01_JSBasics.md

JavaScript

JS의 원시타입을 말해보세요.

• boolean, number, string, symbol, undefined, null 로 7가지가 있습니다.

Undefined 와 Null 의 차이를 설명해보세요.

• undefined 는 선언 후 초기화되지 않은 변수의 값이고, null 은 개발자가 변수에 값이 없다는 것을 명시하기 위해 의도적으로 사용하는 값입니다.

JS에서 call-by-value 와 call-by-reference 를 데이터 타입으로 설명해보세요.

• 모든 원시타입은 immutable 하기 때문에 변경이 불가능하므로 값이 전달될 때 복사하여 전달하는 call-by-value 를 사용합니다. 원시타입을 제외한 모든 데이터들의 타입인 객체타입은 call-by-reference 로 전달되며 값의 변경이 가능합니다.

let, const, var 의 차이를 설명해보세요.

• let 으로 선언된 변수는 값을 재할당할 수 있지만 const 로 선언된 변수를 값을 재할당할 수 없습니다. var 또한 변수를 재할당 할 수 있습니다.

• 유효범위에 대한 차이도 있습니다. var는 함수 내에서만 지역변수로 취급되고 나머지 스코프에서는 모두 전역변수로 취급됩니다. let과 const는 블록 내에서만 사용가능한 지역변수로 취급됩니다.

실행 컨텍스트의 생성과정을 설명해보세요.

• 실행 컨텍스트는 실행할 코드에 대한 정보를 모아둔 객체입니다.
• 먼저 새로운 함수가 실행되면 실행컨텍스트가 생성되고 활성 객체가 생성됩니다.
• 활성객체가 생성 되면 arguments 유사배열객체를 생성합니다. 함수의 인자가 되는 변수들이 이곳에 저장됩니다.
• 다음은 스코프 정보를 생성합니다. 스코프 정보는 현재 실행 컨텍스트의 유효 범위를 나타냅니다.
• 스코프 정보를 완성하면 변수를 생성하고 값을 초기화 합니다. 이때 초기화 되지 않은 값은 undefined 로 초기화됩니다.
• 마지막으로 this 키워드를 사용하는 변수의 값들을 할당합니다.

스코프 체이닝에 대해서 설명해보세요.

• 스코프 체이닝은 실행 컨텍스트에서 현재 활성 객체가 자신이 가지고 있지 않은 변수를 다른 실행 컨텍스트의 활성 객체를 참조하여 접근하는 방법입니다.
• 새로운 실행 컨텍스트가 만들어질 때마다 생성되는 활성 객체는 자신이 만들어지기 전 실행 컨텍스트의 스코프 체인을 복사하고 가장 앞의 자신의 활성 객체를 추가합니다.
• 변수가 참조될 때 실행 컨텍스트 내의 활성 객체의 스코프 체인을 확인하고 앞에서부터 전역객체까지 해당 변수가 존재하는지 차례대로 확인합니다.

프로토타입과 프로토타입 체이닝이 무엇인지 설명해보세요.

• 프로토타입은 Prototype Link 와 Prototype Object 로 구분됩니다.
• Prototype Object는 객체(함수)가 정의될 때 함께 생성되는 원형 객체로 생성자를 가집니다. 내부에는 constructor 와 __proto__ 속성이 존재하고 __proto__ 속성이 기존 객체를 가리키게 됩니다. 즉, 자신을 생성한 조상 객체를 가르킵니다.
• __proto__ 속성으로 자신의 조상이 되는 객체를 가르킵니다. 만약 어떤 객체가 자신이 가지고 있지 않은 속성을 요구받으면 __proto__ 속성을 타고 연결된 상위 객체로 접근하여 값이 존재하는지 확인합니다. 이것을 프로토타입 체이닝이라고 합니다.

여러 방식의 this 바인딩을 설명해보세요.

• 자바스크립트에서 this 는 메서드 호출과, 함수 호출에서 다른 동작을 취합니다.
• 메서드 호출에 사용되는 this 는 해당 메서드를 호출한 객체에 바인딩됩니다.
• 함수 호출에 사용되는 this 는 해당 함수를 전역객체인 window에 바인딩합니다.
• new 키워드로 생성자 함수를 호출하면 this 는 만들어진 객체 자기자신을 바인딩합니다.

정적 스코프에 대해서 설명해보세요.

• Lexical Scope는 함수를 선언했을 때 스코프가 생성되는 것을 의미합니다. 정적 스코프가 있기 떄문에 클로저와 호이스팅이 가능합니다.

클로저에 대해서 설명해보세요.

• 클로저는 함수가 자신의 블록 내부가 아닌 외부 스코프에 선언된 변수에 접근하는 것을 의미합니다.

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

example from MDN

• 위 예시에서 displayName을 반환하고 이후에 호출할 때, displayName은 lexical한 정보를 가지고 있기 때문에 자신의 내부에 있는 name 에 대한 값이 존재하지 않아도 상위 함수에 있던 "Mozilla" 라는 값을 사용합니다.

호이스팅에 대해서 설명해보세요.

• 호이스팅은 모든 변수 선언을 최상단으로 끌어올리는 것을 의미합니다. 전역 범위에 있던 변수는 스크립트 최상단으로 올라가고, 함수 범위에 있던 변수는 함수 내의 최상단 위치로 올려집니다. 이때 초기화 값은 호이스팅되지 않고 선언만 호이스팅됩니다.

이벤트 위임, 이벤트 버블링, 이벤트 캡쳐링에 대해서 설명해보세요.

• 이벤트 위임은 어떤 태그의 상위 태크에 이벤트 리스너를 등록하여 하위 태그들의 이벤트를 처리하는 것을 말합니다. 예를 들어 ul li 태그로 이루어진 목록이 있을 때, 각 li 태그에 대해 모두 클릭이벤트를 처리하고 싶다면 ul 태크에 이벤트 위임을 하면 이벤트 리스너를 한 번만 등록하는 것으로 이벤트를 처리할 수 있습니다.
• 이벤트 버블링은 이벤트가 발생했을 때, 최상위 태그로 이벤트가 전달되는 특성을 의미합니다.
• 이벤트 캡쳐링은 이벤트 버블링과 반대로 최상위 태크에서 하위 태그까지 이벤트를 순차적으로 전달하는 것을 의미합니다. addEventListner()의 세번째 인자를 true로 지정하는 것으로 설정할 수 있습니다.

Throttle 과 Debounce 를 설명해보세요. 왜 사용할까요?

• Throttle은 어떤 함수가 호출된 이후에는 일정시간 동안 해당 함수가 다시 호출되지 않도록 합니다.
• Debounce는 특정 시간내에 발생한 동일한 이벤트를 그룹화하여 최초의 이벤트나 마지막 이벤트만 실행하도록 합니다.
• 스크롤이나 창 크기 조절과 같은 이벤트 처리 함수가 제한없이 실행되면 사용자가 조금만 움직여도 수많은 함수가 호출됩니다. 동일한 함수는 한번만 실행하도록 하여 리소스를 아낄 수 있습니다.

자바스크립트의 가비지 컬렉션을 설명해보세요.

• 자바스크립트는 도달가능상태(Reachability)를 확인해서 어떤 객체가 변수에 의해 참조될 수 있는 상태가 아니라면 해당 객체를 각제합니다.
• 가비지 컬렉터는 변수와 같은 루트를 설정하고 루트로부터 도달할 수 있는 모든 객체를 방문하여 마킹을 합니다. 만약 마킹되지 않은 객체들이 있다면 unreachable 이 되어 삭제합니다.