【JS応用|初心者向け】JavaScriptの「単項演算子」をマスターして、コードをよりスマートに書こう!

1. 導入:なぜ単項演算子が重要なのか

JavaScriptを書いていると、変数の値を1増やしたり、データの型を調べたりする場面に頻繁に出くわします。これらを短く、効率的に記述できるのが「単項演算子」です。単項演算子を使いこなすと、余計なコードを書かずに済むため、プログラムが読みやすくなり、バグを減らすことにもつながります。今回は、フロントエンド開発で特によく使う単項演算子の使い方を解説します。

2. 基礎知識:単項演算子とは?

通常、「足し算(1 + 2)」のように演算子は2つの値を使いますが、単項演算子は「1つの値」に対して作用する演算子です。
・typeof:データの型を確認する
・void:式を評価し、undefinedを返す
・delete:オブジェクトのプロパティを削除する
・+, –:数値への変換や符号の反転
・++, —:値を1増やす、または減らす
これらは、コードの可読性を高めたり、意図した動作を短く記述するために欠かせない存在です。

3. 実装/解決策:具体的な使い方

それぞれの演算子は目的が明確です。例えば、typeofはAPIから受け取ったデータの型が正しいかチェックする時に役立ちます。また、++や–はループ処理やカウンターの実装に必須です。

4. サンプルプログラム

以下のコードをコピーして、ブラウザのコンソールなどで実行してみてください。

// 1. typeof: 型を調べる
const text = "こんにちは";
console.log(typeof text); // 結果: "string"

// 2. 数値変換と符号反転
const strNum = "10";
console.log(+strNum + 5); // 結果: 15 (先頭の+で文字列を数値に変換)
console.log(-strNum);     // 結果: -10 (符号を反転)

// 3. インクリメント/デクリメント
let count = 0;
count++; // 1を足す
console.log(count); // 結果: 1
count--; // 1を引く
console.log(count); // 結果: 0

// 4. delete: オブジェクトのプロパティを削除
const user = { name: "田中", age: 25 };
delete user.age;
console.log(user); // 結果: { name: "田中" }

// 5. void: undefinedを返す
// リンククリック時にページ遷移させない場合などに使われます
console.log(void(0)); // 結果: undefined

5. 応用・注意点:現場で役立つポイント

現場で特に注意すべきは「インクリメント(++)とデクリメント(–)」です。これらは「変数の前」に置くか「後ろ」に置くかで、計算のタイミングが変わるため注意が必要です。
・前置(++x):値を1増やしてから、その値を使う。
・後置(x++):今の値を使ってから、値を1増やす。

また、delete演算子は、配列の要素を削除すると「空の枠(空スロット)」が残ってしまうという性質があります。配列の要素を削除したい場合は、deleteではなくfilterメソッドやspliceメソッドを使うのが一般的です。これらを正しく使い分けることで、より堅牢なプログラムを書くことができます。

タイトルとURLをコピーしました