자바스크립트의 값과 객체: 변수에는 무엇이 들어 있는가

30초 요약

표현식은 실행하거나 계산하면 하나의 값을 내놓는 코드 조각이다. 그 결과를 얻는 과정을 평가라고 한다.

이 글의 핵심은 다음 네 문장이다.

1. 표현식은 값으로 평가된다.
2. 변수 선언은 이름과 값을 연결한다.
3. 숫자·문자열과 객체는 모두 변수에 연결할 수 있다.
4. 서로 다른 두 이름이 같은 객체 값에 연결되어 있으면, 한쪽을 통한 객체 변경이 다른 쪽에서도 보인다.

“변수 안에 주소가 들어 있다”거나 “객체는 참조로 전달된다”는 문장을 먼저 외울 필요는 없다. 자바스크립트 코드가 실제로 관찰할 수 있는 값, 이름, 객체 공유부터 구분하면 뒤의 결과를 예측할 수 있다.

읽기 전에 알아둘 코드 표기

이 글은 다음 문법만 사용한다.

• const name = expression은 expression을 평가한 결과에 name이라는 이름을 연결한다.
• let은 나중에 그 이름을 다른 값에 다시 연결할 수 있는 선언이다.
• { count: 1 }은 count 속성을 가진 객체를 만드는 표현식이다.
• profile.name은 profile이라는 이름을 읽어 얻은 객체의 name 속성을 읽는다.
• 이 글에서는 a === b를 두 이름을 읽었을 때 같은 객체를 얻는지 확인하는 용도로만 사용한다. 숫자와 특별한 값까지 포함한 정확한 규칙은 다음 글에서 설명한다.
• console.log(value)는 예제의 값을 개발자 도구 콘솔에 표시한다.
• function rename(profile) { ... }은 rename이라는 함수를 선언하며, rename(user)는 함수를 호출한다.

ECMAScript는 자바스크립트 언어의 동작 규칙을 정한 표준이다. 자바스크립트 엔진은 그 규칙에 따라 코드를 실제로 실행하는 프로그램이다. 여기서 메모리는 프로그램 실행 중 데이터를 보관하는 공간이라는 일반적인 뜻으로만 사용한다. 특정 자바스크립트 엔진이 값을 몇 바이트로 저장하는지, 실제 주소가 무엇인지는 이 글의 설명 범위가 아니다.

값과 이름을 먼저 나눈다

다음 코드를 세 부분으로 나누어 보자.

const total = 1 + 2

1. 1 + 2라는 표현식을 평가한다.
2. 그 결과로 숫자 값 3을 얻는다.
3. total이라는 이름을 그 값과 연결한다.

스코프(scope)는 어떤 이름을 사용할 수 있는 코드의 범위다. 지금은 중괄호나 함수 안팎에서 같은 이름이 서로 다른 연결을 가질 수 있다는 정도만 알아두면 충분하다.

“값이 상자에 들어간다”는 그림도 간단한 숫자 예제에는 도움이 된다. 하지만 객체를 다루기 시작하면 상자 안에 객체가 통째로 복사되는지, 주소가 들어 있는지 같은 새로운 추측이 필요해진다. 이름과 값의 연결이라는 모델에는 그 추측이 필요 없다.

자바스크립트 값은 크게 두 무리로 나뉜다

입문 단계에서는 다음처럼 구분하면 된다.

| 무리 | 예 | 이 글에서 중요한 성질 | | --- | --- | --- | | 원시 값 | undefined, null, true, "안녕", 42 | 값 자체의 내부를 바꾸지 않는다 | | 객체 값 | {}, [], 함수 | 속성을 가질 수 있고 각각의 객체는 동일성이 있다 |

그 밖에 Symbol은 서로 겹치지 않는 표식을 만들 때 쓰는 값이고, BigInt는 Number가 정확하게 표현할 수 있는 정수 범위보다 큰 정수를 다루는 값이다. 지금은 두 종류도 객체가 아닌 값이라는 분류만 기억하면 된다.

typeof null이 "object"를 반환하는 오래된 언어 동작 때문에 혼동할 수 있지만, 명세의 언어 타입 분류에서 null은 원시 값이다. typeof 연산자의 문자열 결과와 값의 분류를 같은 표로 외우지 않는다.

원시 값이 “단순해서 작다”, 객체가 “커서 복잡하다”는 구분도 정확한 기준은 아니다. 문자열은 길 수 있고 객체는 속성이 없을 수도 있다. 이 글에서 필요한 차이는 객체가 고유한 동일성을 가지며 속성 변경을 허용할 수 있다는 점이다.

원시 값을 대입한 뒤에는 각 이름을 따로 본다

먼저 숫자 예제를 한 줄씩 예측해 보자.

let first = 10
let second = first
 
first = 20
 
console.log(first)  // 20
console.log(second) // 10

let second = first를 실행할 때 first 표현식은 숫자 값 10으로 평가된다. second는 그 값으로 초기화된다. 그 뒤 first = 20은 first라는 이름을 숫자 값 20에 다시 연결한다. second의 연결을 바꾸는 코드는 실행하지 않았으므로 second는 여전히 10이다.

문자열도 같은 관점으로 볼 수 있다.

let greeting = '안녕'
const copiedGreeting = greeting
 
greeting = greeting + '하세요'
 
console.log(greeting)       // 안녕하세요
console.log(copiedGreeting) // 안녕

greeting + '하세요'는 기존 문자열의 내부를 바꾸지 않고 새 문자열 값을 만든다. 그 새 값에 greeting을 다시 연결한다.

객체를 대입하면 같은 객체를 공유할 수 있다

객체 표현식이 몇 번 평가되는지 먼저 세어 보자.

const original = { count: 1 }
const alias = original
 
alias.count = 2
 
console.log(original.count) // 2
console.log(alias === original) // true

{ count: 1 }은 한 번만 평가되었다. original은 그 객체 값에 연결되고, alias = original을 평가할 때도 같은 객체 값을 얻는다.

상황을 이름과 값의 관계로만 그리면 다음과 같다.

original ─┐
          ├── 같은 객체 값 { count: 2 }
alias ────┘

반면 다음 코드는 객체 표현식을 두 번 평가한다.

const first = { count: 1 }
const second = { count: 1 }
 
second.count = 2
 
console.log(first.count)  // 1
console.log(second.count) // 2
console.log(first === second) // false

두 객체는 속성 모양이 처음에 같았지만 서로 따로 만들어졌다. 객체가 “같다”는 말의 정확한 비교 규칙은 다음 글에서 ===와 Object.is를 통해 다룬다.

재대입과 객체 변경은 다른 동작이다

비슷해 보이는 두 줄을 나란히 놓아 보자.

let profile = { name: '민지' }
 
profile.name = '서준'       // 객체의 속성을 변경
profile = { name: '하린' }  // 이름을 다른 객체 값에 재대입

첫 번째 줄은 profile의 연결을 그대로 둔 채 기존 객체의 name 속성을 바꾼다. 두 번째 줄은 새 객체를 만들고 profile을 그 값에 다시 연결한다.

다른 이름이 이전 객체를 공유하고 있으면 차이가 더 분명해진다.

let profile = { name: '민지' }
const oldProfile = profile
 
profile.name = '서준'
console.log(oldProfile.name) // 서준
 
profile = { name: '하린' }
console.log(profile.name)    // 하린
console.log(oldProfile.name) // 서준

속성을 바꿀 때는 공유된 하나의 객체가 달라졌다. 재대입 뒤에 profile을 읽으면 새 객체를 얻고, oldProfile을 읽으면 이전 객체를 얻는다.

const가 막는 것은 이름의 재대입이다

const settings = { theme: 'dark' }
 
settings.theme = 'light' // 가능
settings = { theme: 'light' } // TypeError

TypeError는 허용되지 않은 재대입 때문에 실행 중 발생하는 오류의 종류다.

두 번째 대입은 settings의 연결을 바꾸려 하기 때문에 실패한다. 첫 번째 대입은 settings를 읽어 얻은 기존 객체의 속성을 바꾸므로 const 바인딩 규칙과 충돌하지 않는다.

따라서 다음 두 문장은 구분해야 한다.

• const로 선언한 이름은 다른 값으로 재대입할 수 없다.
• 그 이름을 읽어 얻는 객체는 별도 조치가 없다면 변경될 수 있다.

const가 객체를 불변으로 만드는 것은 아니다. 복사와 Object.freeze가 무엇을 보장하는지는 시리즈의 세 번째 글에서 따로 다룬다.

함수에는 인수의 값이 전달된다

함수 호출에서도 이름과 값을 분리하면 “값 전달인가, 참조 전달인가”라는 말싸움 없이 결과를 예측할 수 있다.

const profile = { name: '민지' }
 
function replace(localProfile) {
  localProfile = { name: '서준' }
}
 
replace(profile)
console.log(profile.name) // 민지

호출 시 profile 표현식이 평가한 객체 값으로 함수의 매개변수 localProfile이 초기화된다. 함수 안에서 localProfile에 새 객체를 대입해도 함수 바깥의 profile 바인딩을 재대입한 것은 아니다.

이번에는 속성을 바꿔 보자.

const profile = { name: '민지' }
 
function rename(localProfile) {
  localProfile.name = '서준'
}
 
rename(profile)
console.log(profile.name) // 서준

함수 호출 직후 profile과 localProfile은 같은 객체 값에 연결되어 있다. 이번 코드는 매개변수를 재대입하지 않고 그 객체의 속성을 바꿨으므로 함수 바깥에서도 결과가 보인다.

React에서도 props와 state는 자바스크립트 값이다

React의 컴포넌트는 입력을 받아 화면 조각을 계산하는 함수나 클래스다. 부모 컴포넌트가 자식 컴포넌트에 전달하는 입력을 props라고 한다.

props와 state에 객체가 들어가도 그 객체가 새로운 자바스크립트 종류로 바뀌지는 않는다. 다른 이름에 대입하면 앞에서 본 객체 공유 규칙이 그대로 적용된다. 다음 코드는 React 함수를 생략하고 객체 관계만 떼어 낸 예제다.

const profileFromState = { name: '민지' }
const alias = profileFromState
 
alias.name = '서준'
 
console.log(profileFromState.name) // 서준

alias를 만들 때 새 객체를 만드는 표현식은 실행되지 않았다. 따라서 profileFromState와 alias는 같은 객체를 읽는다.

이 연결을 알면 React에서 객체 상태를 직접 바꿨을 때 왜 다른 코드에서도 변경이 보이는지 설명할 수 있다. React가 이전 상태와 다음 상태를 어떻게 구분하고 새 객체를 어떻게 만드는지는 두 번째와 세 번째 글에서 이어서 다룬다.

코드를 읽을 때 묻는 네 가지 질문

변수와 객체가 섞인 코드를 만나면 다음 순서로 표시해 본다.

1. 어떤 표현식이 평가되는가? 객체 리터럴처럼 새 객체를 만드는 표현식이 몇 번인지 센다.
2. 각 이름은 어느 값에 연결되는가? 대입문을 실행한 시점의 값을 따라간다.
3. 재대입인가, 객체 변경인가? name = ...과 name.property = ...을 구분한다.
4. 같은 객체를 공유하는 다른 이름이 있는가? 있다면 객체 변경은 그 이름을 통해서도 관찰된다.

이 네 질문으로 첫 번째 글의 모든 예제를 설명할 수 있다. 다음 글에서는 마지막 질문을 코드로 판별하는 ===, Object.is, 같은 객체인지의 판단을 살펴본다.