4주차 위클리 페이퍼

보리·2024년 3월 29일

codeit-sprint

목록 보기

12/22

❓자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 설명해 주세요.

얕은 복사(Shallow Copy)

객체나 배열을 복사할 때, 복사된 객체는 원본 객체의 참조를 공유한다.
즉, 복사된 객체의 내부 객체는 실제로 복사되지 않고, 원본 객체와 같은 내부 객체를 참조한다.
주로 Object.assign()이나 스프레드 연산자(...)를 사용하여 이루어진다.

예시)

let originalArray = [1, 2, 3];

// 또는 let shallowCopy = [...originalArray];
let shallowCopy = originalArray.slice();

shallowCopy[0] = 5;

console.log(originalArray); // [1, 2, 3]
console.log(shallowCopy); // [5, 2, 3]

깊은 복사(Deep Copy)

객체나 배열을 복사할 때, 복사된 객체는 원본 객체와 완전히 분리되어 있다. 내부 객체까지 모두 복사된다.
이러한 방식으로 복사된 객체는 원본 객체의 변경에 영향을 받지 않는다.
자바스크립트에서는 기본적으로 깊은 복사를 지원하지 않기 때문에 직접 구현하거나 외부 라이브러리를 사용해야 한다.

예시)

let originalArray = [[1], [2], [3]];
let deepCopy = JSON.parse(JSON.stringify(originalArray));

deepCopy[0][0] = 5;

console.log(originalArray); // [[1], [2], [3]]
console.log(deepCopy); // [[5], [2], [3]]

JSON.stringify()를 통해 객체를 문자열로 변환하고, 다시 JSON.parse()를 사용하여 문자열을 객체로 변환함으로써 깊은 복사를 할 수 있다. 하지만 이 방법은 모든 데이터를 복사하기 때문에 성능에 영향을 줄 수 있다. 또한, 함수나 순환 참조된 객체 등을 복사할 수 없다.

❓var, let, const 를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교해 주세요.

중복 선언 허용

var: 중복 선언이 허용된다. 같은 변수를 여러 번 선언해도 오류가 발생하지 않는다. 다만, 이전 값은 무시되고 새로운 값으로 변수가 재할당된다.
let, const: 중복 선언이 허용되지 않는다. 같은 이름의 변수를 두 번 선언하면 구문 오류가 발생한다.

스코프(Scope)

var: 함수 스코프를 갖는다. 함수 내에서 선언된 변수는 해당 함수 전체에서 접근할 수 있다.
let, const: 블록 스코프를 갖는다. {} 내에서 선언된 변수는 해당 블록 내에서만 접근할 수 있다.

호이스팅(Hoisting)

var: 선언 단계가 호이스팅된다. -> 변수 선언은 해당 스코프의 최상단으로 끌어올려진다. 초기화는 그 자리에 남아 있다.
let, const: 호이스팅은 발생하지만 TDZ(Temporal Dead Zone)라는 것이 존재한다. TDZ 내부에서 변수를 참조하려고 하면 ReferenceError가 발생한다. -> 선언 이전에 변수에 접근하는 것은 안전하지 않다.

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

// let
console.log(y); // ReferenceErrorinitialization
let y = 20;
console.log(y); // 20

// const
console.log(z); // ReferenceErrorinitialization
const z = 30;
console.log(z); // 30

⚠️TDZ

Temporal Dead Zone의 약자(일시적 사각지대)

let과 const 변수가 선언되기 전에 접근하려고 할 때 발생하는 현상 -> 변수가 선언되었지만 초기화되기 이전의 시점을 나타낸다.

TDZ 특성

접근 시 오류 발생: TDZ 내에서 변수에 접근하면 ReferenceError가 발생한다. -> 변수가 아직 초기화되지 않았기 때문에 해당 변수에 접근할 수 없음.
호이스팅: let이나 const로 선언된 변수는 호이스팅된다. -> 해당 변수의 선언은 스코프의 최상단으로 끌어올려진다. 하지만 초기화는 호이스팅되지 않으며, TDZ 내에서 변수에 접근하면 ReferenceError가 발생한다.
블록 스코프 내에서 적용: TDZ는 블록 스코프에서만 적용된다. -> let이나 const로 선언된 변수는 해당 블록 내에서만 TDZ에 영향을 받는다.

🙏🏻TDZ는 코드의 안전성을 높이고 실수를 줄이기 위해 도입된 개념으로, 변수의 사용을 명시적으로 초기화한 후에만 안전하게 접근할 수 있도록 한다.