JavaScript単項演算子の使用方法

序章

数学的には、操作は、出力値にマッピングされるオペランドと呼ばれる1つ以上の値の計算です。 operator は、オペランドを出力値にマップするシンボルまたは記号です。

単項演算は、オペランドが1つしかない演算です。 このオペランドは、演算子の前または後にあります。

単項演算子は、標準のJavaScript関数呼び出しよりも効率的です。 さらに、単項演算子はオーバーライドできないため、その機能が保証されます。

オペレーター	説明
単項プラス（+）	オペランドを数値に変換しようとします
単項否定（-）	オペランドを数値に変換しようとし、その後否定します
インクリメント（++）	オペランドに1を追加します
デクリメント（--）	オペランドから1つデクリメント
論理否定（!）	ブール値に変換してからそれを否定します
ビット単位ではありません（~）	オペランドのすべてのビットを反転し、数値を返します
typeof	オペランドの型である文字列を返します
delete	配列の特定のインデックスまたはオブジェクトの特定のプロパティを削除します
void	式の戻り値を破棄します。

この記事では、JavaScriptのすべての単項演算子を紹介します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

• JavaScript データ型、変数、オブジェクト、および関数にある程度精通していること。

単項プラス（+）

単項プラス演算子（+）は、そのオペランドの前にあり、そのオペランドに評価されますが、まだ数値に変換されていない場合は、数値に変換しようとします。

数値、ブール値（trueおよびfalse）、およびnullのすべての文字列表現を数値に変換できます。 数値には、整数、浮動小数点数、16進数、科学的（指数）表記、およびInfinityの両方が含まれます。

オペランドを数値に変換できない場合、単項プラス演算子はNaNを返します。

ここではいくつかの例を示します。

手術	結果
+3	3
+"3"	3
+"-3"	-3
+"3.14"	3.14
+"123e-5"	0.00123
+"0xFF"	255
+true	1
+false	0
+null	0
+"Infinity"	Infinity
+"not a number"	NaN
+function(val){ return val }	NaN

オブジェクトは、キー valueOf を持ち、その関数が上記のタイプのいずれかを返す場合にのみ変換できます。

+{
  valueOf: function() {
    return "0xFF"
  }
}

これにより、次のように出力されます。

Output255

さまざまな値を試した後、次の単項演算子に進むことができます。

単項否定（-）

単項否定演算子（-）は、そのオペランドの前にあり、それを否定します。

単項否定とプラスの両方が、非数値のNumber()関数と同じ操作を実行します。

ここではいくつかの例を示します。

手術	結果
-3	-3
-"3"	-3
-"-3"	3
-"3.14"	-3.14
-"123e-5"	-0.00123
-"0xFF"	-255
-true	-1
-false	-0
-null	-0
-"Infinity"	-Infinity
-"not a number"	-NaN
-function(val){ return val }	-NaN
-{ valueOf: function(){ return "0xFF" } }	-255

さまざまな値を試した後、次の単項演算子に進むことができます。

インクリメント（++）

インクリメント演算子（++）は、オペランドをインクリメント（1を加算）して値を返します。

接尾辞または接頭辞演算子として使用できます。

• 接尾辞：演算子がオペランド（y++）の後に来ることを意味します。 これにより、インクリメントする前の値が返されます。
• プレフィックス：演算子はオペランド（++y）の前にあります。 プレフィックスとして使用すると、インクリメント後に値が返されます。

接尾辞の例を次に示します。

x = 4       // x = 4
y = x++     // y = 4 and  x = 5

yはインクリメント前の値に設定され、1がxに追加されます。

postfixを使用するときは、値のリセットに注意してください。

var z = 5   // z = 5
z = z++     // z = 5

zはインクリメント前の値に設定されます。

プレフィックスの例を次に示します。

x = 4       // x = 4
y = ++x     // y = 5 and  x = 5

yはインクリメント後の値に設定され、xに1が加算されます。

var z = 5   // z = 5
z = ++z     // z = 6

zはインクリメント後の値に設定されます。

さまざまな値を試した後、次の単項演算子に進むことができます。

デクリメント（--）

デクリメント演算子（--）は、オペランドをデクリメント（1を減算）して値を返します。

接尾辞または接頭辞演算子として使用できます。

• 接尾辞：演算子がオペランド（y--）の後に来ることを意味します。 これにより、デクリメントする前の値が返されます。
• プレフィックス：演算子はオペランド（--y）の前にあります。 プレフィックスとして使用すると、デクリメント後に値が返されます。

接尾辞の例を次に示します。

x = 4       // x = 4
y = x--     // y = 4 and  x = 3

yをデクリメント前の値に設定すると、xから1が削除されます。

var z = 5   // z = 5
z = z--     // z = 5

zはデクリメント前の値に設定されます。

プレフィックスの例を次に示します。

x = 4       // x = 4
y = --x     // y = 3 and  x = 3

yをデクリメント後の値に設定し、xから1を削除します。

var z = 5   // z = 5
z = --z     // z = 4

zはデクリメント後の値に設定されます。

さまざまな値を試した後、次の単項演算子に進むことができます。

論理否定（!）

論理NOT（!）演算子（論理補数、否定）は、真実を偽りに、またはその逆を行います。

ここではいくつかの例を示します。

手術	結果
!false	true
!NaN	true
!0	true
!null	true
!undefined	true
!""	true
!true	false
!-3	false
!"-3"	false
!42	false
!"42"	false
!"string"	false
!"true"	false
!"false"	false
!{}	false
![]	false
!function(){}	false

これらの例は、オペランドがtrueに変換できる場合、論理否定がfalseを返す方法を示しています。そうでない場合、falseを返します。

二重否定（!!）を使用することもできます。

!!1 === true        // returns true
!!0 === false       // returns true
!!'hi' === true     // returns true

最後の例を見てみましょう。

まず、文字列の否定はfalseを返します。

!'hi'               // returns false

次に、falseを否定すると、trueが返されます。

!false              // returns true

したがって：

true === true       // returns true

さまざまな値を試した後、次の単項演算子に進むことができます。

ビット単位ではありません（~）

ビット単位のNOT演算子（~）は、そのオペランドのビットを反転します。

数値にビット単位がない場合は、-(x + 1)になります。

a	ではありません
0	1
1	0

ここではいくつかの例を示します。

手術	結果
~3	-4
~"3"	-4
~"-3"	2
~"3.14"	-4
~"123e-5"	-1
~"0xFF"	-256
~true	-2
~false	-1
~null	-1
~"Infinity"	-1
~"not a number"	-1
~function(val){ return val }	-1
~{ valueOf: function(){ return "0xFF" } }	-256

次の表は、この操作がどのように実行されるかを詳しく調べています。

（10進数）	（ベース2）	NOT（ベース2）	NOT（10進数）
2	00000010	11111101	-3
1	00000001	11111110	-2
0	00000000	11111111	-1
-1	11111111	00000000	0
-2	11111110	00000001	1
-3	11111101	00000010	2

さまざまな値を試した後、次の単項演算子に進むことができます。

typeof

typeof演算子は、未評価のオペランドのタイプを示す文字列を返します。

ここではいくつかの例を示します。

手術	結果
typeof 3	'number'
typeof '3'	'string'
typeof -3	'number'
typeof 3.14	'number'
typeof 123e-5	'number'
typeof 0xFF	'number'
typeof true	'boolean'
typeof false	'boolean'
typof null	'object'
typeof Infinity	'number'
typeof NaN	'number'
typeof function(val){ return val }	'function'
typeof { valueOf: function(){ return '0xFF' } }	object
typeof [1,2,3]	'object'
typeof {hi: "world"}	'object'
typeof Date()	'string'
typeof new Date()	'object'
typeof undefined	'undefined'

さまざまな値を試した後、次の単項演算子に進むことができます。

delete

JavaScript deleteオペレーターは、オブジェクトからプロパティを削除します。 同じプロパティへの参照がこれ以上保持されない場合、最終的には自動的に解放されます。

プロパティが正常に削除された場合、またはプロパティが存在しない場合は、trueを返します。

アイテムの削除に失敗した場合は、falseを返します。

deleteは、関数と変数の両方に影響を与えません。

変数でdeleteを使用しようとする例を次に示します。

var variableExample = 1;
delete variableExample;          // returns false
console.log(variableExample);    // returns 1

関数でdeleteを使用しようとする例を次に示します。

function functionExample(){};
delete functionExample;           // returns false
console.log(functionExample);     // returns function functionExample(){}

アレイでdeleteを使用しようとする例を次に示します。

var arrayExample = [1,1,2,3,5]
delete arrayExample             // returns false
console.log(arrayExample);      // [1,1,2,3,5]

オブジェクトでdeleteを使用しようとする例を次に示します。

var objectExample = {propertyExample: "1"}
delete objectExample            // returns false
console.log(objectExample);     // returns Object { propertyExample: "1" }

次に、リテラル表記のプロパティでdeleteを使用する例を示します。

var inventory = {"apples": 1, "oranges": 2}
delete inventory["apples"]          // returns true
console.log(inventory);             // returns Object { "oranges": 2 }
console.log(inventory["apples"]);   // returns undefined

そして、ドット表記のプロパティでdeleteを使用する例を次に示します。

var inventory = {"apples": 1}
delete inventory.apples;            // returns true
console.log(inventory);             // returns {}
console.log(inventory.apples);      // returns undefined

存在しないプロパティでdeleteを使用しようとする例を次に示します。

var inventory = {"apples": 1};
delete inventory.oranges;           // returns true
console.log(inventory.apples);      // returns 1

次に、事前定義されたオブジェクトの構成不可能なプロパティでdeleteを使用しようとする例を示します。

delete Math.PI;                     // returns false
console.log(Math.PI);               // returns 3.141592653589793

deleteは、構成不可として設定されているオブジェクトプロパティには影響しません。 常にfalseを返します。

厳密モードでは、これによりSyntaxErrorが発生します。

構成不可能なプロパティでdeleteを使用しようとする例を次に示します。

var configurableFalseExample = {};
Object.defineProperty(configurableFalseExample, 'name', { value: 'Sammy', configurable: false })
console.log(configurableFalseExample.name);     // returns 'Sammy'
delete configurableFalseExample.name            // returns false
console.log(configurableFalseExample.name);     // returns 'Sammy'

構成不可能なプロパティでdeleteを使用する例を次に示します。

var configurableTrueExample = {};
Object.defineProperty(configurableTrueExample, 'name', { value: 'Sammy', configurable: true })
console.log(configurableTrueExample.name);      // returns 'Sammy'
delete configurableTrueExample.name             // returns true
console.log(configurableTrueExample.name);      // returns undefined

defineProperty（）の詳細をご覧ください。

var、let、およびconstは、delete演算子では削除できない構成不可能なプロパティを作成します。

windowスコープ（Webブラウザなど）でvarを設定する例を次に示します。

var num = 1;
Object.getOwnPropertyDescriptor(window, "num")

これは戻ります：

Output{
  value: 1,
  writable: true,
  enumerable: true,
  configurable: false
}

次に、変数をdeleteしようとします。

delete num;

これは戻ります：

Outputfalse

globalスコープ（ノードなど）にvarを設定する例を次に示します。

var num = 1;
Object.getOwnPropertyDescriptor(global, "num")

これは戻ります：

Output{
  value: 1,
  writable: true,
  enumerable: true,
  configurable: false
}

次に、オブジェクトの例を示します。

var inventory = { "apples": 1 };
Object.getOwnPropertyDescriptor(inventory, "apples")

これは戻ります：

Output{
  value: 1,
  writable: true,
  enumerable: true,
  configurable: true
}

configurableプロパティがtrueとしてマークされていることに注意してください。

Arraysは、JavaScriptではタイプObjectと見なされます。 したがって、このメソッドはそれらで機能します。

var arrayExample = [20,30,40];
console.log(arrayExample.length);     // returns 3
delete arrayExample[2]                // returns true
console.log(arrayExample);            // returns [ 20, 30, <1 empty item> ]
console.log(arrayExample[2]);         // returns undefined
console.log(arrayExample.length);     // returns 3

delete演算子は値のみを削除し、配列のインデックスは削除しません。 その特定のインデックスの値はundefinedのままになります。 これが長さが変わらない理由です。

strictモードでは、変数、関数の引数、または関数名への直接参照を使用しているため、deleteはSyntaxErrorをスローします。

SyntaxErrorを引き起こす変数への直接参照の例を次に示します。

‘use strict’
var inventory = {"apples": 1, "oranges": 2};
delete inventory;

これにより、次のものが生成されます。

OutputUncaught SyntaxError: Delete of an unqualified identifier in strict mode.

SyntaxErrorを引き起こす関数の引数の例を次に示します。

‘use strict’
function Person() {
 delete name;
 var name;
}

SyntaxErrorを引き起こす関数名の例を次に示します。

‘use strict’
function yo() { }

delete yo;

deleteを使用する際に常に考慮すべきいくつかの指針を次に示します。

• 存在しないプロパティを削除しようとすると、deleteはtrueを返しますが、オブジェクトには影響しません。
• 削除は、オブジェクト自体のプロパティにのみ影響します。 これは、同じ名前のプロパティがオブジェクトのプロトタイプチェーンに存在する場合、deleteはそれに影響を与えないことを意味します。 削除後、オブジェクトはプロトタイプチェーンのプロパティを使用します。
• var、let、およびconstと宣言された変数は、グローバルスコープまたは関数のスコープから削除できません。 意味：deleteは、グローバルスコープまたは関数スコープ内の関数を削除できません。 削除は、オブジェクトの一部である関数（グローバルスコープを除く）で機能します。
• 構成不可能なプロパティは削除できません。
• deleteは、Math、Array、Objectなどの組み込みオブジェクト、または次のようなメソッドで構成不可能として作成されたプロパティでは機能しません。 Object.defineProperty()。

さまざまな値を試した後、次の単項演算子に進むことができます。

void

void演算子は、指定された式を評価してから、undefinedを返します。

voidオペレーターの主な目的は、undefinedを返すことです。 void演算子は、値を返さずに評価される式を指定します。

void演算子は、void (expression)またはvoid expressionのいずれかの方法で使用されます。

注： void演算子は関数ではないため、()は必須ではありませんが、MDNに従って使用することをお勧めします。

次に例を示します。

void 0

これは戻ります：

Outputundefined

関数の例を次に示します。

var functionExample = function () {
  console.log('Example')
  return 4;
}

関数を参照する場合：

var result = functionExample()
console.log(result);

これにより、値4が返されます。

Output4

ただし、void関数を使用すると、次のようになります。

var voidResult = void (functionExample())
console.log(voidResult);

これにより、値undefinedが返されます。

Outputundefined

void演算子を使用して、式をハイパーテキストリンクとして指定することもできます。 式は評価されますが、現在のドキュメントの代わりにロードされません。

リンクでvoid(0)を使用する例を次に示します。

<a href="javascript:void(0)">Link to perform no action.</a>

上記のコードは、ユーザーがクリックしても何もしないリンクを作成します。 これは、void(0)がundefinedと評価されるためです。

リンクでvoid(document.form.submit())を使用する例を次に示します。

<a href="javascript:void(document.form.submit())">Link to submit a form.</a>

このコードは、ユーザーがフォームをクリックしたときにフォームを送信するリンクを作成します。

さまざまな値を試してください。

結論

この記事では、JavaScriptのすべての単項演算子を紹介しました。

複数の演算子を扱う場合は、常に操作の順序を考慮してください。 これは、予期しないバグを軽減するための良い方法です。

これは、Javascriptを使用する場合の操作の優先順位を示す簡単な表です。 同じレベルのオペランドの優先順位は同じです。

演算子タイプ	オペレーター	例
メンバー	. []	[1,2,3]
インスタンスの呼び出し/作成	() new	var vehicle = new Vehicle();
否定/増分	! ~ + - ++ -- typeof void delete	typeof [1,2,3]
掛け算/割り算	* / %	3 % 3
足し算/引き算	+ -	3 + 3
ビット単位のシフト	<< >> >>>	9 << 2
関連した	< <= > >= in instanceof	[1] instanceof Array
平等	== != === !==	void(0) === undefined
ビット単位-および	&	5 & 1
ビット単位のxor	^	5 ^ 1
ビット単位-または		1
論理-そして	&&	x < 10 && y > 1
論理-または			x == 5	y == 5
条件付き	?:	(amount < 10) ? "Few" : "Many"
割り当て	=	x = 8
コンマ	,	b = 3, c = 4

JavaScriptについて詳しく知りたい場合は、JavaScriptトピックページで演習とプログラミングプロジェクトを確認してください。