JS 기술면접 1주차(2)

강연주·2024년 11월 10일

JavaScript 기술면접

🙋‍♀️ 기술면접

목록 보기

43/112

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

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

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

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

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

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

자바스크립트에서 this는 현재 실행 컨텍스트(context)에 따라 달라지는 특별한 객체를 참조한다. 실행 위치에 따라 this가 가리키는 대상이 달라지며, 자바스크립트에서는 주로 함수 내에서 this를 많이 사용한다.

기본적인 this 동작 방식

👝 전역 컨텍스트
: 전역 컨텍스트에서 this는 전역 객체(브라우저에서는 window)를 가리킨다.

🖥️j avascript

console.log(this); // window 객체 출력 (브라우저 환경 기준)

👝 메서드 호출
: 객체의 메서드 내부에서 this는 해당 객체를 가리킵니다.

🖥️ javascript

const obj = {
    name: "John",
    sayName: function() {
        console.log(this.name);
    }
};
obj.sayName(); // "John" 출력

👝 생성자 함수
: 생성자 함수 내부에서 this는 새로 생성된 객체 인스턴스를 가리킨다.

🖥️ javascript

function Person(name) {
    this.name = name;
}
const person1 = new Person("Alice");
console.log(person1.name); // "Alice" 출력

👝 화살표 함수
: 화살표 함수에서 this는 상위 스코프의 this를 상속받아 사용.
그래서 this를 새로 바인딩하지 않는다.

🖥️ javascript

const obj = {
    name: "John",
    sayName: () => {
        console.log(this.name);
    }
};
obj.sayName(); // undefined (상위 스코프의 this가 window라면 undefined가 출력됨)

👝 명시적 바인딩
: call, apply, bind 메서드를 통해 this를 원하는 객체에 명시적으로 바인딩할 수 있다.

🖥️ javascript

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

const user = { name: "Jane" };
greet.call(user); // "Jane" 출력

➡️ 이처럼 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() 같은 라이브러리를 사용해 안전하게 객체의 참조를 분리할 수 있다.