[기술면접] JavaScript 부분 2

<목차>

3. this
4. 프로토타입
5. 참조에 의해 복사되는 객체

3. this

1. 글로벌 컨텍스트 (전역 환경)
   • 전역 객체
   • 브라우저 전역 객체 : window
   • Node.js 전역 객체 : global 객체
2. 함수 호출
   • 일반 함수 : 기본적으로 글로벌 객체 (브라우저는 window, Node.js는 global)
   • 엄격 모드 : 함수 내에서 undefined
3. 메서드 호출
   • 객체의 메서드로 함수 호출시 : 그 메서드를 호출한 객체
     ex) obj.method() -> 메서드 내부의 this는 obj
     ex) person.sayHello() -> sayHello 함수 내부의 this는 person 객체
4. 생성자 함수 (new 키워드 사용)
   • 새로 생성된 객체
     ex) new MyFunction() -> MyFunction 내부에는 this는 새롭게 생성된 객체 참조
5. 화살표 함수
   • 일반 함수와는 다르게 작동
   • 화살표 함수 내부의 this : 화살표 함수를 감싸고 있는 일반 함수의 this와 같다.
   • 화살표 함수는 자신만의 this를 생성하지 않는다.
6. call, apply, bind를 이용한 호출
   • this값 명시적으로 설정 가능
     ex) func.call(obj,arg1,arg2) -> func내부의 this는 obj로 설정
   • apply는 배열을 인자로 받는다
   • bind는 함수의 this값을 영구적으로 바꿀 수 있는 새 함수를 반환

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

this는 현재 실행중인 컨텍스트의 객체를 가리킵니다. 그러다보니 현재 실행중인 컨텍스트를 파악하는 것이 중요합니다. 우선 글로벌 컨텍스트 즉 전역 환경에서 this는 전역 객체를 말합니다. 브라우저에서는 window, 노드에서는 global객체입니다. 함수 호출을 할때는 두가지 상황으로 나뉘는데 일반함수인 경우 기본적으로 글로벌 객체를 가리킵니다. 하지만 엄격 모드일 때는 함수 내에서 undefined 결과를 반환합니다. 함수 호출과 달리 객체의 메서드로 함수를 호출할 때는 그 메서드를 호출한 객체가 됩니다. 예외적으로 화살표 함수는 일반함수와 다르게 작동합니다. 화살표 함수가 일반함수 내부에 위치하면 화살표 함수를 감싸고 있는 일반 함수의 this와 동일합니다. 즉 화살표 함수는 자신만의 this를 생성하지 않습니다.

4. 프로토 타입

• 객체지향 프로그래밍의 상속을 구현하는 기본적인 방법
• 한 객체의 속성이나 메서드를 다른 객체가 상속받아 사용가능
• 코드의 재사용성을 높이고 메모리를 효율적으로 관리 할 수 있음
• 각 객체는 프로토타입이라는 다른 객체를 가리키는 내부 링크를 갖고 있고 이를 통해 상속을 구현

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

자바스크립트는 대부분 객체로 이루어진 프로그래밍으로 객체지향 프로그래밍 언어입니다. 뿐만아니라 자바스크립트는 다른 클래스 기반 객체지향 프로그래밍 언어와는 다르게 "프로토타입 기반 객체지향 프로그래밍 언어"입니다. 클래스 기반 객체지향 프로그래밍 언어는 클래스를 기반으로 상속을 구현하지만 자바스크립트는 프로토타입을 기반으로 상속을 구현합니다. 한 객체의 속성이나 메서드를 다른 객체가 상속받아 사용가능하게 함으로써 불필요한 중복을 제거하고 코드의 재사용성을 높이고 메모리를 효율적으로 관리할 수 있습니다. 각 객체는 프로토타입이라는 다른 객체를 가리키는 내부 링크를 갖고 있고 이를 통해 상속을 구현합니다.

5. 참조에 의해 복사되는 객체

• 자바스크립트에서 객체는 참조에 의해 복사되는 특성 때문에, 복사된 객체를 수정할 때 원본 객체에도 영향을 준다.
• 예상치 못한 부작용 초래

발생할 수 있는 오류

1. 데이터 무결성 손실 : 객체의 참조를 다른 변수에 할당하고, 해당 변수를 통해 객체의 속성을 수정하면 원본 객체도 변경됨

2. 버그 발생 원인 : 원본 객체를 의도하지 않게 변경함으로써, 애플리케이션의 다른 부분에 버그 발생 가능. 특히 큰 코드베이스에서는 어느 부분에서 객체가 변경되었는지 추적하기 어려움

3. 메모리 누수 : 객체 사이에 상호 참조가 있는 경우, 가비지 컬렉션이 이루어지지 않아 메모리 누수가 발생

예방법

1. 얕은 복사(Shallow Copy) 사용 : Object.assign(), spread연산자({...obj}) 사용. 이 방법은 최상위 수준의 속성은 복사하지만, 중첩된 객체는 여전히 참조를 공유

let original = { a: 1, b: { c: 2 } };
let copy = {...original};

copy.b.c = 3; // 원본의 original.b.c도 3으로 변경됨

2. 깊은 복사(Deep Copy) 사용 : JSON 메소드를 사용하거나 lodash의 _.cloneDeep()같은 함수를 사용. 이 방법은 모든 수준의 객체 속성을 복사하여 완전히 독립적인 복사본을 만든다.

let deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.b.c = 4; // 원본의 original.b.c는 변경되지 않음

3. 변경 불가능한(Immutable) 객체 사용 : 데이터를 변경할 수 없도록 설계하여 부작용을 방지하는 라이브러리나 패턴 사용. ex) Immutable.js

4. 함수형 프로그래밍 기법 사용 : 데이터 직접 변경하지 않고, 변경된 새 데이터를 반환하는 순수 함수를 사용. 부작용 최소화에 도움

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

자바스크립트의 객체가 참조에 의해 복사되는 특성 때문에 복사된 객체를 수정할 때 원본 객체에도 영향을 줍니다. 이로인해 예상치 못한 부작용을 초래할 수 있습니다. 예를들어 객체의 참조를 다른 변수에 할당하고, 해당 변수를 통해 객체의 속성을 수정하면 원본 객체도 변경되는 일이 발생합니다. 이는 데이터의 무결성을 해칠 수 있습니다. 원본의 객체가 의도하지 않게 변경됨으로써 애플리케이션의 다른 부분에서 버그가 발생할 수 있습니다. 특히 큰 코드베이스에서는 어느 부분에서 객체가 변경되었는지 추적하기 어렵습니다. 뿐만아니라 객체 사이에 상호 참조가 있는 경우, 가비지 컬렉션이 이루어지지 않아 메모리 낭비가 발생할 수 있습니다. 이러한 오류를 피하기 위해 개발자는 얕은 복사, 깊은 복사, 함수형 프로그래밍 기법등을 사용해야합니다. 얕은 복사란 최상위 수준의 속성을 복사하고 중첩된 객체는 여전히 참조를 공유하는 방식으로 스프레드연산자가 대표적입니다. 깊은 복사는 lodash의 _.cloneDeep() 같은 함수를 사용하여 깊은 복사본을 만들어 모든 수준의 객체 속성을 복사하여 완전히 독립적인 복사본을 만들 수 있습니다. 뿐만 아니라 데이터를 직접 변경하지 않고 변경된 새 데이터를 반환하는 순수함수를 사용하여 함수형 프로그래밍 기법을 사용한다면 부작용을 최소화하는데 도움이 됩니다.