할당 연산자

할당 연산자 (=)

할당(=) 연산자는 변수나 속성에 값을 할당하는 데 사용됩니다. 할당 표현식 자체는 할당된 값인 값을 가집니다. 이는 단일 값을 여러 변수에 할당하기 위해 여러 할당을 연결(chain)할 수 있게 해줍니다.

호환성: Baseline — 널리 사용 가능(Widely available). 이 기능은 잘 확립되어 있으며 많은 기기와 브라우저 버전에서 작동합니다. 2015년 7월부터 브라우저에서 사용할 수 있습니다.

출처: Assignment (=)

본문

Try it

let x = 2;
const y = 3;

console.log(x);
// Expected output: 2

console.log((x = y + 1)); // 3 + 1
// Expected output: 4

console.log((x = x * y)); // 4 * 3
// Expected output: 12

구문 (Syntax)

x = y

매개변수 (Parameters)

  • x: 유효한 할당 대상으로, 식별자(identifier) 또는 속성 접근자(property accessor)를 포함합니다. 구조 분해 패턴(destructuring pattern)일 수도 있습니다.
  • y: x에 할당할 값을 지정하는 표현식입니다.

반환값 (Return value)

y의 값.

예외 (Exceptions)

  • ReferenceError: 엄격 모드에서 스코프에 선언되지 않은 식별자에 할당할 때 발생합니다.
  • TypeError: 엄격 모드에서 수정할 수 없는 속성에 할당할 때 발생합니다.

설명 (Description)

할당 연산자는 다른 위치에서 구문 구분자로 사용되는 등호(=) 기호와 완전히 다릅니다. 그 위치들에는 다음이 포함됩니다.

  • var, let, const 선언의 초기화자(initializer)
  • 구조 분해의 기본값
  • 기본 매개변수(default parameters)
  • 클래스 필드의 초기화자

이 모든 위치는 =의 오른쪽에 할당 표현식을 받아들입니다. 따라서 여러 개의 등호가 연결되어 있을 때:

const x = y = 5;

이는 다음과 동일합니다.

const x = (y = 5);

y는 기존 변수여야 하고 x는 새로 선언된 const 변수입니다. y에는 값 5가 할당되고, xy = 5 표현식의 값인 5로 초기화됩니다. y가 기존 변수가 아니면, 비-엄격 모드에서는 전역 변수 y가 암시적으로 생성되거나, 엄격 모드에서는 ReferenceError가 발생합니다. 하나의 선언 안에서 두 변수를 선언하려면 다음을 사용합니다.

const x = 5,
      y = 5;

예제 (Examples)

기본 할당과 연결 (Basic assignment and chaining)

let x = 5;
let y = 10;
let z = 25;

x = y; // x is 10
x = y = z; // x, y and z are all 25

할당 표현식의 값 (Value of assignment expressions)

할당 표현식 자체가 오른쪽 값으로 평가되므로, 값을 기록(log)하면서 동시에 변수에 할당할 수 있습니다.

let x;
console.log(x); // undefined
console.log(x = 2); // 2
console.log(x); // 2

비정규 식별자 할당 (Unqualified identifier assignment)

전역 객체는 스코프 체인의 맨 위에 있습니다. 이름을 값으로 해석하려 할 때 스코프 체인이 검색됩니다. 이는 전역 객체의 속성이 globalThis.window. 또는 global.로 이름을 한정하지 않아도 모든 스코프에서 편리하게 보인다는 뜻입니다.

전역 객체가 String 속성을 가지므로(Object.hasOwn(globalThis, "String")), 다음 코드를 사용할 수 있습니다.

function foo() {
  String("s"); // The function `String` is globally available
}

따라서 비정규 식별자에 대해서는 결국 전역 객체가 검색됩니다. globalThis.String을 입력할 필요 없이 비정규 String을 입력하면 됩니다. 이 기능을 개념적으로 더 일관되게 만들기 위해, 비정규 식별자에 대한 할당은 스코프 체인에 같은 이름의 변수가 선언되어 있지 않으면 전역 객체(globalThis. 생략)에 그 이름의 속성을 만들려는 것으로 간주합니다.

foo = "f"; // In non-strict mode, assumes you want to create a property named `foo` on the global object
Object.hasOwn(globalThis, "foo"); // true

엄격 모드에서 비정규 식별자에 대한 할당은 전역 객체에 속성이 우연히 생성되는 것을 피하기 위해 ReferenceError를 초래합니다.

위 내용이 함의하는 바는, 널리 퍼진 잘못된 정보와 달리 JavaScript에는 암시적 또는 선언되지 않은 변수가 없다는 것입니다. 단지 전역 객체를 전역 스코프와 혼동하고, 속성 생성 시 전역 객체 한정자를 생략하는 것을 허용할 뿐입니다.

구조 분해를 사용한 할당 (Assignment with destructuring)

왼쪽은 할당 패턴이 될 수도 있습니다. 이는 여러 변수에 한 번에 할당하는 것을 허용합니다.

const result = /(a+)(b+)(c+)/.exec("aaabcc");
let a = "",
    b = "",
    c = "";
[, a, b, c] = result;
console.log(a, b, c); // "aaa" "b" "cc"

자세한 내용은 구조 분해(Destructuring)를 참고하세요.

명세 (Specifications)

ECMAScript® 2027 언어 명세 — sec-assignment-operators

더 알아보기