let,const 등장배경과 호이스팅

김슬아·2024년 12월 16일

const와 let은 자바스크립트의 초기 버전인 ES5까지는 존재하지 않았고, ES6 (ECMAScript 2015)에서 새롭게 추가된 변수 선언 방식입니다. 이들은 기존의 변수 선언 키워드인 var의 단점을 보완하기 위해 만들어졌습니다. 다음은 const와 let이 등장하게 된 배경과 이유입니다.

1. 기존 `var`의 문제점

var는 자바스크립트에서 초기에 사용된 변수 선언 방식이었지만, 몇 가지 심각한 단점이 있었습니다.

(1) 스코프(Scope) 문제

var는 함수 스코프를 가지고, 블록 스코프를 지원하지 않았습니다.

이는 예기치 않은 변수 오염을 초래할 수 있었습니다.

if (true) {
    var x = 10;
}
console.log(x); // 10 (블록을 벗어나도 변수 접근 가능)

(2) 변수 호이스팅(Variable Hoisting)

var로 선언된 변수는 호이스팅(hoisting)으로 인해 선언만 코드의 상단으로 끌어올려졌습니다.
하지만 초기화는 호이스팅되지 않아, 개발자가 혼란을 겪는 경우가 많았습니다.
```
console.log(a); // undefined
var a = 10;
```

(3) 중복 선언 허용

같은 이름의 변수를 여러 번 선언할 수 있어, 실수로 변수 값이 덮어써지는 버그가 발생하기 쉬웠습니다.
```
var x = 5;
var x = 10;
console.log(x); // 10
```

2. `const`와 `let`의 등장 이유

const와 let은 위의 문제를 해결하기 위해 설계되었습니다.

(1) 블록 스코프(Block Scope) 지원

let과 const는 블록 스코프를 지원하여, 블록 내부에서만 변수가 유효합니다.
```
if (true) {
    let x = 10;
}
console.log(x); // ReferenceError: x is not defined
```

(2) 변수 호이스팅 문제 해결

let과 const도 호이스팅되지만, TDZ (Temporal Dead Zone) 때문에 초기화 전에 변수에 접근할 수 없습니다.
```
console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 10;
```

(3) 의미 명확화

const는 재할당이 불가능한 변수를 선언하는 데 사용되며, 불변성을 명확히 표현합니다.
let은 재할당이 필요한 변수를 선언하는 데 사용됩니다.
이는 코드의 의도를 더 명확하게 만들어 줍니다.

(4) 중복 선언 방지

동일한 스코프 내에서 같은 이름의 변수를 선언하려고 하면 오류를 발생시킵니다.
```
let x = 5;
let x = 10; // SyntaxError: Identifier 'x' has already been declared
```

3. ES6의 등장과 모던 자바스크립트

const와 let은 ES6의 주요 특징 중 하나로, 자바스크립트의 가독성과 안전성을 높이기 위해 도입되었습니다.

기존의 문제를 보완하며 얻은 장점:

예측 가능한 동작: 블록 스코프와 TDZ 덕분에 변수 사용이 더 명확.
코드 안정성: 재할당 불가능한 const로 의도하지 않은 변경 방지.
가독성 향상: let과 const로 변수의 의도를 명확히 표현.

결론적으로, 자바스크립트가 점점 더 복잡한 애플리케이션 개발에 사용되면서, 안정성과 유지보수성을 높이기 위한 필요성에 의해 등장한 기능입니다.

호이스팅(hoisting)은 자바스크립트의 독특한 동작으로, 변수 선언, 함수 선언 등이 실제 코드에서 선언된 위치와 상관없이 스코프의 맨 위로 끌어올려지는 것처럼 동작하는 현상을 말합니다.

호이스팅은 자바스크립트가 코드를 실행하기 전에 변수 선언과 함수 선언을 메모리에 등록하기 때문에 발생합니다.

1. 변수 호이스팅

변수를 선언하면, 선언이 코드의 맨 위로 끌어올려진 것처럼 보입니다.

예시: `var`의 호이스팅

console.log(a); // undefined
var a = 10;

위 코드는 아래와 같이 동작합니다:

var a;       // 선언이 호이스팅됨
console.log(a); // undefined (초기화는 호이스팅되지 않음)
a = 10;      // 초기화

`let`과 `const`의 호이스팅

let과 const도 선언 자체는 호이스팅되지만, TDZ(Temporal Dead Zone, 임시 사각지대) 때문에 초기화되기 전에는 접근할 수 없습니다.

console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 10;

2. 함수 호이스팅

함수 선언은 전체 스코프의 맨 위로 호이스팅되며, 선언 이전에도 호출할 수 있습니다.

함수 선언식의 호이스팅

hello(); // "Hello, World!"
function hello() {
  console.log("Hello, World!");
}

위 코드는 아래와 같이 동작합니다:

function hello() { // 함수 선언이 호이스팅됨
  console.log("Hello, World!");
}
hello(); // "Hello, World!"

함수 표현식의 호이스팅

함수 표현식은 변수에 할당되므로, 변수 호이스팅 규칙을 따릅니다.

hello(); // TypeError: hello is not a function
var hello = function() {
  console.log("Hello, World!");
};

위 코드는 아래와 같이 동작합니다:

var hello;          // 변수 선언이 호이스팅됨
hello();            // hello는 아직 undefined 상태
hello = function() { // 초기화
  console.log("Hello, World!");
};

3. Temporal Dead Zone (TDZ, 임시 사각지대)

let과 const가 호이스팅되더라도, 선언 전에 접근하려고 하면 ReferenceError가 발생합니다. 이것을 임시 사각지대라고 합니다.

TDZ가 있는 예:

console.log(a); // ReferenceError
let a = 5;

TDZ가 없는 예:

var는 TDZ가 없기 때문에, 선언 전에 접근하면 undefined를 반환합니다.

console.log(a); // undefined
var a = 5;

4. 호이스팅이 왜 중요한가?

호이스팅은 다음과 같은 이유로 개발자가 코드 작성 시 주의해야 하는 중요한 개념입니다:

예상치 못한 동작 방지
- 선언 순서와 실행 순서가 일치하지 않을 때 디버깅이 어려워질 수 있습니다.
코드 가독성 향상
- 호이스팅을 고려하지 않고 작성한 코드는 다른 개발자가 이해하기 어렵습니다.
let과 const의 사용 권장
- TDZ 덕분에 선언 전 접근이 불가능하므로, 의도하지 않은 변수 사용을 방지할 수 있습니다.

요약

호이스팅: 변수와 함수 선언이 코드의 상단으로 끌어올려진 것처럼 동작.
var: 선언만 호이스팅되며, 초기화는 나중에 이루어짐.
let/const: 선언이 호이스팅되지만, TDZ로 인해 초기화되기 전에는 접근 불가.
함수 선언: 전체 스코프의 맨 위로 호이스팅됨.
함수 표현식: 변수 호이스팅 규칙을 따름.

canvas-sketch는 생성적 아트와 도구 제작에 강력하지만, 사용 목적과 요구 사항에 따라 더 적합한 라이브러리를 선택할 수 있습니다. 아래는 사용 목적별로 canvas-sketch를 대체하거나 보완할 수 있는 라이브러리 목록입니다.

1. 더 강력한 그래픽 및 애니메이션

p5.js

특징:
- Processing을 기반으로 한 자바스크립트 라이브러리.
- 그래픽, 애니메이션, 인터랙션 중심.
- 학습 자료와 커뮤니티가 풍부함.
장점:
- 초보자 친화적.
- 2D/3D 렌더링 지원.
단점:
- 고급 설정이 제한적일 수 있음.
추천 이유: 인터랙티브 아트와 시각화를 쉽게 구현하고 싶다면 p5.js가 강력한 도구입니다.