TIL 1

📌 Q1. 왜 var 대신 let과 const를 권장할까?

• var는 함수 스코프를 가지기 때문에 블록 안에서 선언해도 전역/함수 밖에서도 전체에 영향을 줄 수 있다.
• 또한 var는 재선언이 가능하고 호이스팅시 초기에 undefined로 할당되어 예측하기 어려운 동작을 유발할 수 있다.
• let과 const는 블록스코프를 가지기 때문에 블록 안에서 재선언 할 수 없다.
• 호이스팅이 되더라도 Temporal Dead Zone (TDZ)때문에 블록 밖에서의 접근할 경우에는 에러가 발생한다.
  • 변수가 호이스팅은 되었지만, 아직 초기화되기 전 상태에 있는 구간을 TDZ라고 합니다.
  • 이 구간에서는 변수를 참조하려 하면 ReferenceError가 발생한다.

코드 예시

// var 예시: 같은 스코프에서 재선언 가능
var name = 'Alice';
var name = 'Bob';
console.log(name); // Bob

// let 예시: 같은 스코프에서 재선언 불가
let age = 20;
// let age = 30; // SyntaxError: Identifier 'age' has already been declared

// var 호이스팅
console.log(a); // undefined (호이스팅됨)
var a = 10;

// let 호이스팅 (TDZ)
console.log(b); // ReferenceError
let b = 20;

let과 const 중에서는 어떤 것을 기본으로 쓰는게 좋을까?

• const를 기본으로 사용하는 것이 좋다. let은 재할당이 필요한 경우에만 사용하면 되고 const를 기본적으로 사용하면 값이 변하지는 않는다는 것을 의도적으로 제공할 수 있어 협업시 가독성과 유지보수성이 좋아진다.

const로 선언한 객체의 내부 프로퍼티를 수정할 수 있는 이유는 무엇인가요?

• const는 참조값 즉 메모지 주소를 변경하지 못할 뿐 객체 자체를 불변으로 만드는 것은 아니다.
• 상태 관리 시 참조형 데이터를 직접 변경하지 않도록 주의해야 하고, 필요하다면 Object.freeze나 Immer.js 같은 라이브러리를 활용해 불변성을 보장하기도 합니다.

Object.freeze

정의: 자바스크립트에서 객체를 동결(freeze) 시켜 수정 불가능하게 만드는 메서드.

특징:

• 속성 추가 ❌
• 속성 삭제 ❌
• 속성 값 변경 ❌
• 속성 재정의 ❌
• 얕은 동결(shallow freeze)만 지원 → 중첩 객체는 여전히 변경 가능

const obj = { name: 'Alice', info: { age: 20 } };
Object.freeze(obj);

obj.name = 'Bob'; // ❌ 무시됨
obj.info.age = 25; // ⭕ 가능 (얕은 freeze라서 내부 객체는 바뀜)

console.log(obj); // { name: "Alice", info: { age: 25 } }

Immer.js

정의: 자바스크립트에서 불변성(immutability)을 간단히 유지할 수 있도록 도와주는 라이브러리.

동작 원리:

• Immer는 draft라는 프록시(proxy) 객체를 제공
• draft를 자유롭게 변경하면, Immer가 내부적으로 불변 객체로 변환해줌
• React + Redux 환경에서 특히 많이 사용돼요.

import { produce } from 'immer';

const state = { todos: [{ text: '공부하기', done: false }] };

const nextState = produce(state, (draft) => {
  draft.todos[0].done = true; // 마치 가변처럼 작성
});

console.log(state.todos[0].done); // false (원본 유지)
console.log(nextState.todos[0].done); // true (새로운 불변 객체)

불변성은 왜 중요할까?

불변성은 데이터가 예측 가능한 방식으로 유지되도록 보장하기 때문에 중요하다.

만약 객체가 변경 가능한 상태라면, 여러 곳에서 같은 참조를 공유할 떄 의도치 않게 값이 바뀌어서 사이드 이펙트가 발생 할 수 있기 때문이다. 즉, 불변성을 유지하면 추적이 훨쒼 쉬워진다.

특히 React 같은 라이브러리에서는 상태 변경을 감지할 때 참조 비교(shallow compare) 를 사용한다. 객체가 불변이면 === 비교만으로도 상태가 바뀌었는지 쉽게 알 수 있어, 렌더링 성능 최적화에도 큰 도움이 된다.

사이드 이펙트: 프로그래밍에서 어떤 함수나 코드가 자기 영역 바깥의 상태를 변경하거나, 외부 환경에 영향을 주는걸 말한다.

📌 Q2. == vs ===

==

• 두 값을 비교할 때, 타입이 다르면 강제 형변환을 하고 비교한다.

• 예시:

  1 == '1'; // true (문자열 "1" → 숫자 1로 변환 후 비교)
  0 == false; // true (false → 0으로 변환)
  null == undefined; // true (특별 규칙)

===

• 값뿐 아니라 타입까지 동일해야 true를 반환한다.

• 예시:

  1 === '1'; // false (숫자 vs 문자열)
  0 === false; // false (숫자 vs 불리언)
  null === undefined; // false (타입 다름)