JavaScript/=

カテゴリ:Book:JavaScript#=%20

=Assignment Operator 代入演算子)は、右辺の式の値を左辺の変数やプロパティに代入するために使用される演算子です。代入演算子は JavaScript における最も基本的な演算子の一つであり、変数に値を格納したり、オブジェクトのプロパティを更新したりするのに使用されます[1]

構文

lhs = rhs
  • lhs: 代入先の変数、プロパティ、配列要素などの左辺値式(LeftHandSideExpression)
  • rhs: 評価され代入される値を生成する右辺の式(AssignmentExpression)

基本的な変数への代入

以下のプログラムは、基本的な変数への代入の例を示しています。

// 変数宣言と初期化
let x = 10;
const y = 20;
var z;
z = 30;

// 複数の変数への代入
let a, b, c;
a = b = c = 50;

console.log(x); // 10
console.log(y); // 20
console.log(z); // 30
console.log(a, b, c); // 50 50 50

// 代入式の結果を利用する
let result = (x = 100);
console.log(result); // 100
console.log(x); // 100

このプログラムでは、変数への基本的な代入操作を示しています。変数宣言と同時に代入を行うことも、後から代入することも可能です。また、複数の変数に同じ値を代入する方法や、代入式自体が代入された値を返すことを利用した例も示しています。

オブジェクトのプロパティへの代入

以下のプログラムは、オブジェクトのプロパティへの代入の例を示しています。

// オブジェクトのプロパティへの代入
const person = {
  name: "Alice",
  age: 30
};

// ドット記法によるプロパティへの代入
person.name = "Bob";
person.age = 25;
person.gender = "male"; // 新しいプロパティを追加

// ブラケット記法によるプロパティへの代入
const propertyName = "occupation";
person["city"] = "Tokyo";
person[propertyName] = "Engineer";

console.log(person);
// { name: 'Bob', age: 25, gender: 'male', city: 'Tokyo', occupation: 'Engineer' }

// ネストされたオブジェクトのプロパティへの代入
const user = {
  id: 1,
  profile: {
    firstName: "John",
    lastName: "Doe"
  }
};

user.profile.firstName = "Jane";
user.profile.email = "jane@example.com";

console.log(user.profile);
// { firstName: 'Jane', lastName: 'Doe', email: 'jane@example.com' }

このプログラムでは、オブジェクトのプロパティへの代入方法を示しています。ドット記法とブラケット記法の両方を使用してプロパティに値を代入する方法や、変数を使用して動的にプロパティ名を指定する方法、ネストされたオブジェクトのプロパティに値を代入する方法などを示しています。

配列要素への代入

以下のプログラムは、配列要素への代入の例を示しています。

// 配列要素への代入
const arr = [1, 2, 3, 4, 5];

// インデックスを指定して要素に代入
arr[0] = 10;
arr[2] = 30;

// 存在しないインデックスに代入すると配列が拡張される
arr[5] = 60;
arr[10] = 100;

console.log(arr);
// [10, 2, 30, 4, 5, 60, empty × 4, 100]

// 多次元配列の要素への代入
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

matrix[1][1] = 55;
matrix[2][0] = 77;

console.log(matrix);
// [[1, 2, 3], [4, 55, 6], [77, 8, 9]]

// スプレッド演算子を使用した配列のコピーと要素の変更
const original = [1, 2, 3];
const copy = [...original];
copy[1] = 200;

console.log(original); // [1, 2, 3]
console.log(copy);     // [1, 200, 3]

このプログラムでは、配列要素への代入方法を示しています。インデックスを指定して配列の特定の位置に値を代入する方法や、存在しないインデックスに代入した場合の挙動、多次元配列の要素に値を代入する方法などを示しています。また、スプレッド演算子を使用して配列をコピーし、元の配列に影響を与えずに要素を変更する方法も示しています。

分割代入

以下のプログラムは、分割代入(Destructuring Assignment)の例を示しています。

// 配列の分割代入
const numbers = [1, 2, 3, 4, 5];
let [a, b, ...rest] = numbers;

console.log(a);    // 1
console.log(b);    // 2
console.log(rest); // [3, 4, 5]

// デフォルト値を持つ配列の分割代入
const [x = 10, y = 20, z = 30] = [5, undefined];
console.log(x, y, z); // 5 20 30

// 値の交換
let first = "Hello";
let second = "World";
[first, second] = [second, first];
console.log(first, second); // "World" "Hello"

// オブジェクトの分割代入
const person = {
  name: "Alice",
  age: 30,
  city: "New York",
  country: "USA"
};

const { name, age, ...address } = person;
console.log(name);    // "Alice"
console.log(age);     // 30
console.log(address); // { city: "New York", country: "USA" }

// プロパティ名の変更とデフォルト値
const { name: fullName = "Anonymous", job = "Unknown" } = person;
console.log(fullName); // "Alice"
console.log(job);      // "Unknown"

// ネストされたオブジェクトの分割代入
const user = {
  id: 1,
  profile: {
    firstName: "John",
    lastName: "Doe",
    social: {
      twitter: "@johndoe",
      facebook: "john.doe"
    }
  }
};

const { profile: { firstName, social: { twitter } } } = user;
console.log(firstName); // "John"
console.log(twitter);   // "@johndoe"

このプログラムでは、配列とオブジェクトに対する分割代入の例を示しています。配列の分割代入ではインデックスに基づいて値が代入され、オブジェクトの分割代入ではプロパティ名に基づいて値が代入されます。また、レスト演算子(...)を使用して残りの要素を取得する方法や、デフォルト値を設定する方法、プロパティ名を変更する方法、ネストされたオブジェクトから特定のプロパティを抽出する方法なども示しています。

注意点

  • 代入と比較: 代入演算子(=)と等価比較演算子(==)や厳密等価比較演算子(===)を混同しないように注意が必要です。
  • プリミティブ値と参照値: プリミティブ値(数値、文字列、真偽値など)は値渡しですが、オブジェクトや配列は参照渡しです。これにより、代入の挙動が異なります。
  • const 変数: const で宣言された変数は再代入できません。ただし、const で宣言されたオブジェクトや配列の内容は変更可能です。
  • プロパティの代入: 存在しないオブジェクトのプロパティに対して代入を行うとエラーになりますが、存在しないオブジェクトのプロパティへのパスの最後のプロパティに代入する場合は、そのプロパティが作成されます。
  • 型変換: 代入演算子は型変換を行いません。右辺の値がそのまま左辺に代入されます。
  • 代入演算子の結合性: 代入演算子は右結合性を持ちます。つまり、a = b = ca = (b = c) と解釈されます。
  • 複合代入演算子: +=-=*= などの複合代入演算子も存在し、演算と代入を組み合わせて行います。

脚註

  1. 代入演算子は式として評価され、代入された値を返します。これにより、複数の代入を一度に行うことが可能になります。

外部リンク

カテゴリ:Book:JavaScript#=%20 カテゴリ:JavaScript
カテゴリ:Book:JavaScript カテゴリ:JavaScript カテゴリ:Pages using the JsonConfig extension