바인딩 vs 할당 vs 참조

 

바인딩 vs 할당 vs 참조

JavaScript에서 변수를 다룰 때 혼동하기 쉬운 세 가지 개념을 정리합니다.

용어 정리

let a = 10;      // ① 바인딩 + ② 할당
console.log(a);  // ③ 참조

1. 바인딩 (Binding)

식별자와 메모리 주소를 연결하는 것

let name;
// 'name'이라는 식별자를 메모리 주소에 바인딩
// (아직 값은 없음, undefined)

환경 레코드
┌──────┬─────────┐
│ name │ 0x1000  │ ──→ 메모리 [0x1000]: undefined
└──────┴─────────┘

• 실행 컨텍스트 생성 시 발생 (호이스팅)
• 식별자를 환경 레코드에 등록
• 메모리 공간 확보 및 연결

2. 할당 (Assignment)

메모리에 값을 저장하는 것

name = 'zzimzzim';
// 바인딩된 메모리 공간에 값 저장

환경 레코드
┌──────┬─────────┐
│ name │ 0x1000  │ ──→ 메모리 [0x1000]: 'zzimzzim'
└──────┴─────────┘

• = 연산자로 수행
• 바인딩된 메모리에 실제 값 쓰기
• 재할당 가능 (const 제외)

3. 참조 (Reference)

식별자를 통해 메모리의 값을 읽는 것

console.log(name);  // 'zzimzzim'
// 'name' 식별자로 메모리 값을 읽기

const greeting = name;
// 'name'을 참조해서 값을 읽고, greeting에 할당

• 변수를 사용할 때 발생
• 환경 레코드에서 메모리 주소 찾기
• 해당 메모리의 값 읽기

전체 흐름 예시

// 1단계: 바인딩 (호이스팅)
let count;
// 환경 레코드: { count: <메모리 주소> } → 메모리: undefined

// 2단계: 할당
count = 0;
// 메모리에 0 저장

// 3단계: 참조
console.log(count);  // 0 읽기

// 4단계: 참조 + 할당
count = count + 1;
// count 참조(0 읽기) → 계산 → 새 값 할당(1 저장)

객체의 경우

let user = { name: 'zzimzzim' };

// 바인딩: 'user' 식별자 ↔ 메모리 주소 연결
// 할당: 메모리에 객체 참조 저장
// 참조: user 식별자로 객체 접근

user.name;  // 참조: user를 통해 객체 읽기
user.age = 20;  // 참조 + 할당: user 객체의 프로퍼티에 값 저장

핵심 차이점

개념	시점	역할
바인딩	선언 시 (호이스팅)	식별자 ↔ 메모리 연결
할당	= 실행 시	메모리에 값 저장
참조	변수 사용 시	메모리에서 값 읽기

let x = 10;  // 바인딩 + 할당
let y = x;   // x 참조 + y에 바인딩 및 할당
x = 20;      // 재할당
console.log(x, y);  // 둘 다 참조 (20, 10)

기억하기:

• 바인딩: 이름표 붙이기 🏷️
• 할당: 값 넣기 📥
• 참조: 값 꺼내기 📤

 

 

 

 

같은 바인딩인데 넓게 쓰이는 예시들

this 바인딩

const obj = {
  name: 'zzimzzim',
  greet() {
    console.log(this.name);  // this를 obj에 바인딩
  }
};

obj.greet();  // 'zzimzzim' - this → obj

const greet = obj.greet;
greet();  // undefined - this → window (strict mode에서는 undefined)

this 바인딩: this 키워드가 어떤 객체를 가리킬지 결정

• 메서드 호출: this → 호출한 객체
• 일반 함수 호출: this → 전역 객체 (또는 undefined)

명시적 this 바인딩

function greet() {
  console.log(this.name);
}

const user1 = { name: 'zzimzzim' };
const user2 = { name: 'claude' };

greet.call(user1);   // 'zzimzzim' - this를 user1에 바인딩
greet.apply(user2);  // 'claude' - this를 user2에 바인딩

const boundGreet = greet.bind(user1);
boundGreet();  // 'zzimzzim' - this를 user1에 영구 바인딩

• call/apply: 즉시 실행하며 this 바인딩
• bind: this가 바인딩된 새 함수 반환

화살표 함수

const obj = {
  name: 'zzimzzim',
  regularFunc: function() {
    console.log(this.name);  // this 바인딩 O
  },
  arrowFunc: () => {
    console.log(this.name);  // this 바인딩 X (상위 스코프의 this 사용)
  }
};

obj.regularFunc();  // 'zzimzzim'
obj.arrowFunc();    // undefined (전역 this)

화살표 함수는 자신만의 this를 바인딩하지 않고, 상위 스코프의 this를 그대로 사용

 

함수 매개변수 바인딩

function add(a, b) {
  return a + b;
}

add(1, 2);
// 'a' 식별자를 1이 저장된 메모리에 바인딩
// 'b' 식별자를 2가 저장된 메모리에 바인딩

 

이벤트 핸들러 바인딩

button.addEventListener('click', handleClick);
// 'click' 이벤트를 handleClick 함수에 바인딩

이건 "연결"의 의미로 쓰이는 바인딩입니다.