JS 기술면접 1주차(1)

강연주·2024년 11월 7일

JavaScript 기술면접

🙋‍♀️ 기술면접

목록 보기

42/112

1. 이벤트 버블링과 캡처링에 대해 설명해주세요.

그 이벤트가여, 딱 이거 하나에만 적용되어야 하는데 막 같이 난리가 나는 것일걸요?

2. 이벤트 위임에 대해 설명해주세요.

부모가 자식 요소한테 이벤트 위임..?

3.자바스크립트의 this가 어떤 값을 가지는지 각 상황을 가정하여 설명해주세요.

각 상황을 가정하라는 조건이, 상당히 까다로운 답변이 될 것임을 보여준다.
this 바인딩을 안 하는 게 화살표함수였던가?

4. 자바스크립트의 프로토타입의 역할을 설명해주세요.

프로토타입이라는 내부 슬롯이 있고, 굉장히 추상적인 것8ㅅ8
메소드들 보면 prototype. 이 있는 애들이 많다...

5. 자바스크립트의 객체는 참조에 의해 복사됩니다. 이로 인해 생길 수 있는 오류와, 해당 오류를 피하는 방법을 설명해주세요.

그냥 복사하면 객체 자체가 아니라 객체가 가리키고 있는 주소를 같이 가리키게 된다. 불변성? 얕은 복사? 깊은 복사?

🥟 객체, 원시값 vs 객체

주요 오류

객체를 참조에 의해 복사할 때 발생하는 주요 오류는 예기치 않은 변경이다.
이는 한 객체의 속성을 수정할 때,
해당 객체의 참조를 가진 다른 객체들도 영향을 받기 때문에 발생한다.
예상치 못한 버그가 발생하거나 데이터가 의도치 않게 수정될 수 있다.

문제를 피하는 방법

1. 얕은 복사(Shallow Copy) 사용
스프레드 연산자 { ...original }나 Object.assign()을 사용해 얕은 복사 가능.
얕은 복사는 최상위 객체의 참조를 끊어 주지만,
중첩된 객체는 여전히 참조가 공유되기 때문에 완벽한 해결책이 아니다.

🖥️ javascript

const original = { name: "Alice", age: 25, address: { city: "Wonderland" } };
const copy = { ...original };

copy.age = 26;
console.log(original.age); // 25 (변경되지 않음)

copy.address.city = "New Wonderland";
console.log(original.address.city); // "New Wonderland" (참조가 공유됨)

위 코드에서 age는 독립적으로 변경되지만,
ddress.city는 참조가 공유되어 여전히 original에도 영향을 준다.

2. 깊은 복사(Deep Copy) 사용
깊은 복사는 객체의 모든 중첩 구조까지 새로운 객체로 복사해,
참조가 완전히 끊긴다. 이를 위해 몇 가지 방법을 사용할 수 있다.

structuredClone() 함수 (최신 브라우저에서 지원)
: 깊은 복사 쉽게 수행 가능

🖥️ javascript

const original = { name: "Alice", address: { city: "Wonderland" } };
const copy = structuredClone(original);

copy.address.city = "New Wonderland";
console.log(original.address.city); // "Wonderland" (영향을 받지 않음)

JSON.parse(JSON.stringify()) 방법
: 객체를 JSON 문자열로 변환했다가 다시 파싱하여 복사하는 방식.
다만, 함수나 undefined, Symbol 같은 일부 데이터는
복사되지 않으므로 주의가 필요하다.
❓ Symbol?

🖥️ javascript

const original = { name: "Alice", address: { city: "Wonderland" } };
const copy = JSON.parse(JSON.stringify(original));

copy.address.city = "New Wonderland";
console.log(original.address.city); // "Wonderland" (영향을 받지 않음)

lodash의 cloneDeep() 함수
lodash 라이브러리의 cloneDeep 함수를 사용하면 안전하게 깊은 복사를 할 수 있다.

🖥️ javascript

const _ = require('lodash');
const original = { name: "Alice", address: { city: "Wonderland" } };
const copy = _.cloneDeep(original);

copy.address.city = "New Wonderland";
console.log(original.address.city); // "Wonderland" (영향을 받지 않음)

❓lodash 예시 코드는 왜 변수명을 언더바로 쓸까?

➡️ 객체 복사 시 참조가 공유됨으로 인해 발생할 수 있는 문제를 방지하려면,
단순한 얕은 복사가 아닌 깊은 복사가 필요하다. 최신 자바스크립트의 structuredClone(), JSON.parse(JSON.stringify()) 방법, 또는 lodash의 cloneDeep() 같은 라이브러리를 사용해 안전하게 객체의 참조를 분리할 수 있다.