TIL.자바스크립트 면접 정리1.

1.이벤트 위임(event delegation)

이벤트 위임이란 이벤트 리스너를 부모 요소에 붙이는 것을 말한다. 하위 요소에 이벤트가 발생하면 이벤트 버블링때문에 부모 요소에 연결된 리스너가 실행된다.

모든 li에 이벤트 리스너를 추가하는 대신 li의 상위요소인 Ul 태그에 이벤트 리스너를 연결하고 하위에서 발생한 클릭 이벤트를 감지하는 것이다. 이벤트 위임이 발생하는 원리를 살펴보면, 자식요소에서 발생한 이벤트가 부모요소로 전파되는 이벤트 버블링을 이용한 것을 알 수 있다.

이 테크닉의 장점은 1) 사용하는 메모리 양이 감소한다.이벤트가 발생하는 모든 요소마다 리스너를 추가할 필요가 없고 부모에 하나만 추가하면 되기때문이다. 2)이벤트 발생하는 요소가 추가되고 제거될때마다 리스너를 추가하고 제거할 필요가 없다.

2.This키워드는 어떻게 동작하는가

This가 가리키는 것은 코드의 실행위치, 실행 방법에 따라 달라진다.

1. 함수 실행에 new키워드를 사용하면, 그 함수 안에서 this 키워드는 새로운 객체를 가리킨다.
   2.apply,call,bind를 사용해 함수를 호출/생성했다면, 함수 안에서 this 키워드는 apply,call,bind 호출시 전달된 객체를 가리킨다.
   3.함수가 객체의 메소도로서 호출되었다면 ,this는 그 함수를 속성으로 추가한 객체를 가리킨다.
   4.함수가 단순히 실행되었다면, 다시말해 위의 3가지 사례를 제외한 방식으로 호출되었다면, this는 전역객체를 가리킨다. 브라우저에서는 window, node에서는 global이 된다.
   5.함수가 화살표함수라면 위의 규칙을 모두 무시하고 함수가 만들어진 시점에서 그 함수를 둘러싼 scope의 this를 가리킨다.

3.프로토타입 상속이 어떻게 동작하는가?

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

모든 자바스크립트 객체는 __proto__라는 속성을 가지고 있다.
그것은 다른 객체를 가리키는 레퍼런스며, 객체의 "prototype"이라고 불린다.
객체에서 어떤 속성을 사용하려 하는데 그 객체에 없다면 자바스크립트 엔진은 __proto__ 객체에 그 속성이 있는지 확인한다. 만약 거기에도 없다면 다시 __proto__의 __proto__객체에 있는지 확인하는 식으로 반복 확인하면서 프로토타입 체인의 끝까지 탐색한다. 이 동작은 전통적인 상속처럼 보이지만 상속보다는 위임에 더 가깝다.

4.undefined와 null

undefined는 선언은 되었지만 값이 할당되지 않은 상태를 말한다. 함수가 값을 리턴하지 않는다면 undefined를 반환한다. 아직 정의 되지 않은 것.
null은 명시적으로 값이 없음을 할당해주는 것이다. 당분간 사용하지 않을 변수라면 null값을 명시적으로 할당해준다.

5.클로저란 무엇이며 어떻게/왜 사용하는가?

접근 불가능한 영역에 통로를 만드는 것!
클로저는 함수의 실행이 끝난 뒤에도 함수에 선언된 변수의 값을 접근할 수 있도록 만든 함수를 말한다.

함수는 블럭으로 둘러싸여있고 하나의 스코프를 형성한다. 함수 안에 선언된 변수는 함수 바깥에서 참조할 수 없으며 함수가 실행된 후에는 더이상 사용할 수 없다.
하지만, 자바스크립트에서는 함수 리턴값을 통해 함수 안에 선언된 변수를 노출시킴으로서 클로저를 형성할 수 있다.

자바스크립트에서 스코프는 두가지 타입이 있다. 지역과 전역변수.
전역 변수는 어떤 블럭에도 속하지 않은 위치에서 선언된 것이며 로컬변수는 블럭 안에서 선언된 것이다.

6.forEach와 map의 차이점이 무엇이고 어떤 메소드를 사용해야 하는가?

콜백 리턴값으로 맵핑을 하느냐? 하지 않느냐? 그리고 둘다 배열메소드!

Array.prototype.forEach

• 배열의 요소를 순환한다.
• 각각의 요소를 파라미터로 전달받는 콜백함수가 실행된다.
• 값을 리턴하지 않는다.

Array.prototype.map

• 배열의 요소를 순환한다.
• 새로운 배열을 리턴한다. 그리고 각각의 요소마다 콜백함수를 실행시키며 콜백의 리턴값을 새로운 배열의 요소로 mapping한다.

두 메소도 모두 원본 배열의 값을 바꾸지 않는다. 차이점은 forEach는 값을 리턴하지 않고 map은 값을 리턴한다는 것이다. 결과가 필요하다면 map을 아니라면 forEach를 사용하라

7.function Person(){}이 있을 때, var person=Person()과 var person =new Person()의 차이점은?

함수를 생성자로 사용하느냐, 일반 호출로 사용하느냐의 차이

var person=Person()은 Person을 생성자가 아닌 함수로 호출한다. 이렇게 함수를 호출하는 것은 실수다. 실제로는 undefined값이 할당된다.
var person=new Person()은 new연산자를 사용해 Person객체의 인스턴스를 만든다. 그 인스턴스는 Person.prototype을 상속한 프로토타입을 상속하는 다른 방법에는 Object.create가 있다.

8.Function.prototype.call과 Function.prototype.apply의 차이점은?

this 객체를 지정한다는 것은 같지만, 함수 파라미터 전달방식에 차이가 있다.

call과 apply모두 함수를 호출하는데 사용하며, 첫번째 파라미터는 함수 안에서 this값으로 사용된다.
두번째 파라미터부터는 함수의 파라미터로 전달된다.
call은 콤마로 구분된 파라미터를 사용하지만,apply는 배열을 사용한다.

function add(a,b){
  return a+b;
}
console.log(add.call(null,1,2));//3
console.log(add.apply(null,[1,2]))//3

9.Function.prototype.bind에 대해 설명하라

this 키워드가 지정된 새 함수를 만든다.

bind메소드는 새로운 함수를 만든다. 새로 만들어진 함수 안에서 this키워드의 값은 bind를 할 때 첫번째로 전달된 값이 된다. Function.prototype.call처럼 두번째 파라미터부터 차례대로 원래 함수의 파라미터로 전달된다.

React에서 컴포넌트 클래스의 메소드에 this를 바인딩하는 것이 유용한 사용방법 중 하나.
클래스의 메소드가 비동기적으로 실행되거나, DOM의 이벤트 핸들러(onClick)로 할당되면 this가 유지되지 않고 사라진다. bind를 사용해서 this를 명시적으로 바인딩하거나 화살표 함수를 사용해야 한다.

bind를 사용하는 예제
setTimeout은 비동기적으로 실행되므로 함수가 호출될 때 this를 유지하지 않는다. 그래서 this를 바인딩하지 않으면 this가 클래스 인스턴스가 아닌 다른 값(전역객체)을 가리키게 된다.

function debounce(fn,to){
  setTimeout(fn);
}
class Foo{
  constructor(){
    this.fullName="Bar";
  }
  speak(){
    console.log("My name is", this.fullName);
  }
  test(){
    debounce(this.speak,1000);
    debounce(this.speak.bind(this),2000);
  }
}
let foo=new Foo();
foo.test();
//My name is undefined
//My name is Bar

메소드를 선언할 때 화살표 함수를 사용하면 this를 바인딩하지 않아도 된다. 화살표 함수는 자신의 this를 바인딩하지 않으며 this를 lexical하게 바인딩하기 때문이다. 즉 다른 규칙은 다 무시하고 화살표 함수 코드가 작성된 곳의 this를 사용한다.

class Foo{
  constructor(){
    this.fullName="Bar";
  }
  speak=()=>{
    console.log("My name is", this.fullName);
  };}

10.호이스팅에 대해서 설명하라

같은 스코프라면 아래쪽 줄에 있는 변수를 윗 줄에서 참조 가능하도록 하는 자바스크리브 특징. 하지만 변수에 할당된 값은 알려주지 않는다.

var키워드로 선언되거나 초기화된 변수는 그 선언이 자바스크립트 엔진에 의해 모듈/함수 스코프의 최상단으로 옮겨진다. 이것을 호이스팅이라고 한다. 하지만 선언만 호이스팅될뿐 값 할당은 여전히 거기에 머무른다. 다시말해 값이 할당된 변수라도 호이스팅을 통해 접근하면 undefined값을 얻는다.

let,const로 선언된 변수도 호이스팅된다. 하지만 코드에서 선언한 부분 위에서 접근하면 var와는 다르게 값이 할당되어 있지 않으면 undefined가 출력되는 것이 아니라 ReferenceErrorexception오류를 발생시킨다. 그런 변수는 코드 시작점부터 변수 선언부까지 "temporal dead zone(TDZ)"을 가진다.

//--변수y의 TDZ시작
x;// undefined
y;//Reference error:y is not defined

var x="local"
let y="local";
//--변수 y의 TDZ종료

참고 ;https://blog.rhostem.com/posts/2020-04-12-fe-interview-handbook-js-1