[Javascript] 모던 자바스크립트 Deep Dive - 26장 ES6 함수의 추가 기능

해당 내용은 [모던 자바스크립트 Deep Dive] 도서의 핵심 내용을 정리한 글 입니다.

 

 

💡 ES6 함수의 추가 기능

함수의 구분

• ES6 이전의 모든 함수는 일반함수, 생성자함수, 메서드 구분 없이 사용할 수 있었다.
  • 똑같은 함수를 호출하는 방식에 따라 다르게 사용했다
  • 사용 목적에 따라 명확한 구분이 없었음
• 함수의 세가지 종류 (ES6)
  1. 일반함수
     • 함수 선언문이나 함수 표현식으로 정의한 함수
     • ES6이전의 함수와 차이가 없다
  2. ✨ ES6 메서드
  3. ✨ 화살표 함수

 

✨ 메서드(ES6)

메서드 축약 표현으로 정의된 함수

• ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없다. (new랑 같이 못씀)
• 자신을 바인딩한 객체를 가리키는 내부슬롯을 갖는다

//ES6
foo() {...}
//ES6이전
foo : function() {...}

 

• ES6이전에는 프로퍼티 값에 익명함수 표현식으로 할당했었는데, 그러면 안 됨 일반함수로 취급하게 됨

 

✨ 화살표 함수

• function 키워드 대신 화살표를 사용하여 기존의 함수 정의 방식보다 간단하게 함수를 정의할 수 있다. 내부 동작도 기존의 함수보다 간략하다.
• 콜백 함수 내부에서 this가 전역객체를 가리키는 문제를 해결하기 위한 대한으로 유용하다.
• 화살표 함수 정의 방법
  • 함수 정의
    • 화살표 함수는 함수 선언문으로 정의할 수 없고 함수 표현식으로 정의해야 한다
    • const multiply = (x, y) => x*y; multiply(2,3)
  • 매개변수 선언
    • 매개변수가 여러 개인 경우 소괄호 () 안에 매개변수를 선언한다.
    • 매개변수가 한 개인 경우 소괄호 ()를 생략할 수 있다.
    • 매개변수가 없는 경우 소괄호 ()를 생략할 수 없다.
    • const arrow = (x, y) => {...} const arrow = x => {...} const arrow = () => {...}
  • 함수 몸체 정의
    • 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호를 생략할 수 있다.
    • const power = x => x**2 power(5) // 25
    • 객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호로 감싸 주어야 한다.
    • const create = (id, content) => ({id, content})
  • 고차함수 인수
    • 일반적인 함수 표현식보다 표현이 간결하고 가독성이 좋다.
    • // ES5, 일반적인 함수 표현식 [1,2,3]. map(function(v){return v*2}); // ES6, 화살표 함수 [1,2,3]. map(v => v*2)
• 화살표 함수와 일반 함수의 차이
  1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor다
  2. 중복된 매개변수 이름을 선언할 수 없다.
     1. 일반 함수는 매개변수를 중복해서 선언해도 에러가 발생하지 않는다.
  3. 화살표 함수는 함수 자체의 this, argument, super, new.target 바인딩을 갖지 않는다.
     1. 화살표 함수 내부에서 참조하려고 하면 스코프 체인을 통해 상위 스코프의 값을 참조한다.

this

• 화살표 함수가 일반 함수와 구별되는 가장 큰 특징은 바로 this다.
• 일반 함수 : 함수 호출 방식에 따라 this 바인딩 결정
• 화살표 함수 : this 바인딩 못하고 그냥 없음. 그래서 상위 스코프로 찾아가서 this 바인딩 참조함 ⇒ 렉시컬 this 라 부름
  • *렉시컬 this : 렉시컬 스코프와 같이 화살표 함수 this가 함수가 정의된 위치에 의해 정적으로 결정된다는 것을 의미
    • *렉시컬 스코프 : 함수가 정의된 위치에 따라 상위 스코프가 결정되는 것

const counter = {
	num : 1,
	increase : () => ++this.num 
};
console.log(counter.increamse()) // NaN

 

• 화살표 함수 정의된 위치 : 프로퍼티
• 화살표 함수의 this : 프로퍼티의 상위 스코프 = 전역객체
• 화살표 함수로 메서드를 정의하는 건 피해야 된다. this가 상위 스코프 가리킴(자신의 참조 객체 아님)

 

Rest파라미터

• Rest 파라미터는 매개변수 이름 앞에 세 개의 점 … 을 붙여서 정의한 매개변수를 의미한다.
• Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다
• 이름 그대로 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수들로 구성된 배열이 할당된다. 따라서 Rest 파라미터는 반드시 마지막 파라미터이어야 한다.

function bar(p1,p2,p3, ...rest){
	console.log(p1) //1
	console.log(p2) //2
	console.log(p3) //3
	console.log(rest) //[4,5,6,7,8]
}
bar(1,2,3,4,5,6,7,8) 

 

 

매개변수 기본값

• 자바스크립트 엔진이 매개변수의 개수가 인수의 개수를 체크하지 않기 때문에 방어 코드가 필요하다
• ES6에서 도입된 매개변수 기본값을 사용하면 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다.