ES6 함수의 추가 기능

📌 스프레드 오퍼레이터에 대해서 설명하고 왜 사용하는 지 말해주세요

• 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있음
• 배열 병합, 얕은 복사, 함수 rest parameter, 함수 rest arguments, 객체 복사 등에 사용
• 불변성을 지키는데 도움을 준다. 리액트에서 state값이 객체인 경우 setState를 통해 상태값을 업데이트 시킬때, spread operator를 사용해서 기존의 state값은 유지시키고 그것을 복사해서 업데이트한 값으로 상태를 바꿔준다. 불변성은 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만들어내는 것이다.

📌 ES6 함수의 추가 기능을 말하고 각각 내용을 핵심만 설명하세요

• 함수의 구분
  • 일반함수 > constructor, prototype, arguments
  • 메서드 > non-constructor, super, arguments
  • 화살표 함수 > non-constructor
• 메서드
  • 메서드 축약표현으로 정의된 함수만을 의미
• 화살표 함수
  • function 키워드 대신 화살표를 사용해서 기존의 함수 정의 방식보다 간략하게 함수를 정의할 수 있다.
• rest parameter
  • Rest파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다
• rest parameter 기본 값
  • 함수를 호출할 때 매개변수의 개수만큼 인수를 전달하지 않으면 인수가 전달되지 않은 매개변수의 값은 undefined이기 때문에, 매개변수에 기본값을 할당 함으로서 확인할 수 있다.

📌 화살표 함수와 일반 함수의 차이는 무엇인가요?

• this

  • 일반함수

    • 자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다.
    • 아래는 일반 함수에서 this가 바인딩 되는 상황이다.
    • 함수 실행시에는 전역(window) 객체를 가리킨다.
    • 메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다.
    • 생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.
    • 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

  • 화살표 함수

    • 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
    • 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다.(Lexical this)
    • 또한 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

• 생성자 함수로 사용 가능 여부

  • 일반 함수는 생성자 함수로 사용할 수 있다.
  • 화살표 함수는 생성자 함수로 사용할 수 없다. prototype 프로퍼티를 가지고 있지 않기 때문이다.

• arguments 사용 가능 여부

  • 일반 함수 에서는 함수가 실행 될때 암묵적으로 arguments 변수가 전달되어 사용할 수 있다.
  • 화살표 함수에서는 arguments 변수가 전달되지 않는다.

📌 ES6 클래스와 ES5 함수 생성자의 차이점은 무엇인가요?

• ES5 함수 생성자
  • 일반 함수가 new 연산자와 함께 호출 시, 생성자 함수로서 동작.
• ES6 클래스
  • class 키워드로 선언된 클래스의 본문 영역 내에 constructor 키워드를 통해 생성자를 정의함

📌 화살표 함수로 생성자 함수와 인스턴스를 생성할 수 있는지 판단하고 그 이유를 설명해 주세요.

• 화살표 함수로 생성자 함수와 인스턴스를 생성하는 것은 불가능합니다.
• 화살표 함수는 this를 상위 스코프에서 상속받으므로 생성자 함수에서 필요한 객체 초기화를 수행할 수 없기 때문입니다. 생성자 함수를 정의할 때에는 화살표 함수 대신 일반 함수를 사용해야 합니다.