[Development] 프론트엔드 면접 예상 질문 - JavaScript(1)

 

 

1. 클로져(closure)는 무엇이며, 어떻게/왜 사용하는지 알려주세요.
2. 스코프(scope)에 대해서 아는 대로 설명해주세요.
3. 프로토타입(prototype) 기반 상속은 어떻게 이루어지는지 설명해주세요.
4. this는 자바스크립트에서 어떻게 작동하는지 알려주세요.
5. null과 undefined 그리고 undeclared의 차이점은 무엇인가요?

 

 

1. 클로져(closure)는 무엇이며, 어떻게/왜 사용하는지 알려주세요.

클로져란 함수의 실행이 끝난 후에도 함수에 선언된 값을 접근할 수 있도록 만든 함수이다.

• 이것이 가능한 이유는 자바스크립트에서 함수는 호출되는 환경과 관계없이 자신이 정의된 환경을 기억하기 때문
• 정확히 말하면 함수는 자신의 내부 슬롯에 자신이 정의된 환경, 즉 상위 스코프에 대한 참조를 저장하고, 이는 함수가 존재하는 한 유지됨
• 사용하는 이유
  • 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하기 위해
  • 특정 함수에게만 상태 변경을 허용하기 위해

 

 

2. 스코프(scope)에 대해서 아는대로 설명해주세요.

스코프는 식별자의 유효범위. 자바스크립트에서 모든 식별자는 자신이 선언된 위치에 의해 유효 범위가 결정된다.

• 전역 스코프: 변수가 코드의 가장 바깥 영역인 전역에서 선언된다면 이는 전역 스코프를 갖는 전역 변수
  지역 스코프: 함수 몸체 내부인 지역에서 선언된다면 이는 지역 스코프를 가진 지역 변수
• 스코프 체인
  • 함수 안에 함수가 정의된 경우, 외부 함수와 중첩 함수 간의 계층적 구조가 발생
  • 외부에 있는 함수일수록 상위 스코프가 됨
  • 스코프 체인의 정의: 스코프들이 서로 계층적으로 연결된 것
  • 자바스크립트 엔진이 변수를 참조할 때 스코프 체인을 통해 하위 스코프에서 상위 스코프 방향으로 이동하며 선언된 변수를 검색

+) 자바스크립트는 렉시컬(정적) 스코프를 따른다. 렉시컬 스코프는 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다.
     / 반대로 어디서 호출했는지에 따라 경정하는 것은 다이나믹(동적) 스코프

 

 

3. 프로토타입(prototype) 기반 상속은 어떻게 이루어지는지 설명해주세요.

어떤 속성이 내 객체에 있으면 사용하고, 없으면 프로토타입 객체에 있는 것을 사용하는 방식

• 모든 객체는 [[prototype]] 이라는 내부 슬롯을 가짐
• 프로토타입 체이닝
  
  • 모든 객체는 프로토타입의 계층 구조인 프로토타입 체인에 묶여 있음
  • 객체에서 어떤 속성을 사용하려는데 그 객체에 없다면 자바스크립트 엔진은 __proto__객체에 그 속성이 있는지 확인
  • 만약 찾지 못한다면 __proto__ 접근자 프로퍼티가 가리키는 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색
  • 프로토타입 체인의 최상위 객체는 Object.prototype임
• 사용하는 이유
  • 재사용의 관점에서 유용
    : 모든 인스턴스가 공통으로 사용할 프로퍼니아 메서드는 상속을 통해 공유하여 사용 가능

+) __proto__ 는 Object.prototype의 접근자 프로퍼티, 이것을 통해 간접적으로 [[prototype]] 내부 슬롯의 값에 접근할 수 있다.

+) Object, String, Number, Function, Array 등과 같은 빌트인 생성자 함수도 일반 함수와 마찬가지로 빌트인 생성자 함수가 생성되는 시점에 프로토타입이 생성된다.

 

 

4. this는 자바스크립트에서 어떻게 작동하는지 알려주세요.

this가 가리키는 것은 함수의 호출 방법에 따라 달라진다.

• 메서드로써 호출할 경우 내부에서의 this
  
  • 메서드로 호출되는 경우, 어떤 함수를 호출할 때 이름 앞에 객체가 명시되어야 함
  • 메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있음
• 함수로써 호출할 경우 함수 내부에서의 this 
  • 일반 함수로 호출된 모든 함수 내부의 this는 전역 객체가 바인딩됨
  • 전역 객체를 가리키는 this의 경우 브라우저에서는 window, node에서는 global이 됨
  • this를 지정하기 위해서는 apply, call, bind와 같은 메서드를 사용해야 함
• 생성자 함수 내부에서의 this
  • new 키워드와 함께 생성자 함수를 호출하면, 그 함수 안에서 this 키워드는 새로운 객체(인스턴스)를 가리킴

+) 화살표 함수와 this

     화살표 함수는 일반 함수와 달리 고유한 this의 값이 없다. 화살표 함수 본문에서 this에 접근하면, 상위 스코프의 this를 그대로 참조한다.

+) apply, call, bind를 사용해 함수를 호출/생성했다면, 함수 안에서 this 키워드는 apply, call, bind 호출 시 전달된 객체를 가리킨다.

+) 전역 객체를 가리키는 this의 경우 브라우저에서는 window, node에서는 global이 된다. strict 모드에서 this는 전역 객체 대신 undefined가 된다.

 

 

5. null과 undefined 그리고 undeclared의 차이점은 무엇인가요?

• null
  • 존재하지 않는 값
  • 변수에 값이 없다는 것을 의도적으로 명시하는 것
• undefined
  
  • 선언은 되었지만 값이 할당되지 않은 상태
  • var의 경우, 변수는 선언했지만 값을 할당하지 않았다면 undefined가 자동으로 할당됨
• undeclared
  • var, let, const를 붙여서 선언하지 않은 변수
  • strict 모드에서는 에러가 발생
  • strict 모드가 아니면 전역에 자동으로 추가되므로 사용하지 않아야 함

+) loose equality, 동등 연산자(==)에서 null과 undefined를 비교할 경우 true값이 나오지만, strict equality, 일치 연산자(===)로 둘을 비교할 경우 false의 값이 출력된다. 

 

 

 

글 속에 오류가 있다면 언제든 댓글로 알려주세요 :-)