[개념잡기] 자바스크립트 개념정리

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

함수내에 정의하고 사용하는 함수

let과 const의 차이에 대해서 설명해보세요.

변수 재선언 가능 여부에 따라 나뉜다. let 은 변수 재할당이 가능하지만 const 재선언 재할당이 불가능하다.

비동기 코드에서 콜백큐와 콜스택에 관계에 대해서 설명해보세요.

함수가 실행될때 우선 콜스택에 올라가게 된다. 콜백큐는 비동기적인 함수들을 임시 저장해 놓았다가. 이벤트 루프가 콜스택이 비어있다는 것 을 인지 하게 되면 그때 콜백쿠에 쌓아놓았던 코드들을 하나씩 가져온다.

prototype chain은 무엇인가요?

객체와 객체의 연결을 통한 단방향 공유 관계

constructor 는 무엇인가요?

두가지 뜻이 있음

ES6 부터 추가된 class에 생성자로 constructor 를 사용한다.

생성자 함수를 정의할 때 생성된 프로토타입 오브젝트에 생기는 constructor 프로퍼티가 있다.
이 constructor 프로퍼티는 생성자 함수를 가르킨다.

this키워드의 상황별 동작에 대해서 설명해보세요.

• 생성자 함수로 만든 객체의 this 는 해당 객체를 참조
• call, apply, bind 를 이용한 this 바인딩 첫번째 넘긴 인자를 this가 참조
• 객체 프로퍼티를 이용한 함수 실행할때 this는 해당 객체를 참조
• arrow function의 내부 this 는 상위 블록 컨택스트를 참조
• 나머지 경우는 전역을 참조

Node.js에서 require 를 통한 모듈관리 방법의 원리는 무엇인가요?

외부 모듈을 가져오는 메서드인 require() 는 파라미터로 파일 경로를 받는다. 경로가 들어가게 되면 해ㄷㅇ 프로젝트 내에 있는 파일들을 탐색하고 경로 없이 쓰게 되면 해당 프로젝트에 설치된 모듈을 탐색해서 모듈을 가져온다.

bind는 무엇을 할때 쓰는 것인가요? 동작방식에 대해서 설명해보세요.

Function.prototype.bind는 원하는 함수에 인자로 넘긴 this를 바인딩한 새로운 함수를 리턴한다.

class Garden{
    constructor(flower ){
        this.flower = flower
    }

    grow() {
        setTimeout(function(){
            console.log(`식물이 쑥쑥 자라는 중입니다....`)
            this.grow()
        }, 1000)
    }
}

myflower = new Garden("lily")
myflower.grow()

해당 프로그램을 실행시키면 오류가 발생한다. 그 이유는 setTimeout 내에 있는 콜백 함수의 this 전역을 참조하고 있기 때문에 this.grow() 함수가 정상 동작하지 않는다. 이때 사용할 수 있는 메서드가 bind() 이다.

class Garden{
    constructor(flower ){
        this.flower = flower
    }

    grow() {
        setTimeout(function(){
            console.log(`식물이 쑥쑥 자라는 중입니다....`)
            this.grow()
        }.bind(this), 1000)
    }
}

myflower = new Garden("lily")
myflower.grow()

setTimeout의 콜백함수에 bind() 메서드를 이용하여 this 를 바인딩하였다. myflower.grow() 로 호출했으므로 grow() 메서드 내부의 this 는 myflower 를 참조하고 있다. 이 this 를 bind() 메서드를 이용하여 setTimeout 의 콜백함수에 주입하였다. 따라서 해당 코드는 정상 동작한다.

destructuring 예시코드를 작성해보세요.

const obj = {a: 'hello', b: 'world'}
const {a, b} = obj
console.log(a, b) // hello world

arrow function과 일반 function의 차이에 대해서 설명하세요.

우선 this 가 참조하고 있는 값이 달라진다. 일반 function 은 this가 전역을 참조하지만 arrow function 의 this는 상위 컨텍스트를 참조한다.