더북(TheBook)

이것이 이 예제의 바벨 설정 전부이다. 이제 트랜스파일할 코드를 만들어 보겠다. src라는 example 디렉터리의 하위 디렉터리를 만들고 여기에 코드 1-2의 내용으로 index.js라는 파일을 만든다(프로세스가 끝나면 어떤 파일이 어디에 있어야 하는지에 대한 목록을 보여 주겠다. 확실하지 않아도 너무 걱정하지 말라. 파일을 생성 후 마무리할 때 파일을 이동할 수 있다).

코드 1-2 트랜스파일할 ES2015의 예–index.js

var obj = { 
    rex: /\d/,
    checkArray: function(array) {
        return array.some(entry => this.rex.test(entry)); 
    }
}; 
console.log(obj.checkArray(["no", "digits", "in", "this", "array"])); // false 
console.log(obj.checkArray(["this", "array", "has", "1", "digit"])); // true

코드 1-2는 ES2015+ 기능 중 하나만 사용한다. 바로 화살표 함수이다. some 호출 내 entry => this.rex.test(entry)는 코드에서 강조 표시했다(그렇다. 이것은 실제로 함수다). 3장에서 화살표 함수에 대해 배운다. 불완전하지만 간단히 설명하자면 함수를 정의하는 간결한 방법을 제공하고 (보다시피) 마치 this를 매개변수로 전달한 것처럼(this를 호출 방식에 따라 설정하는 대신) 만든다. obj.checkArray(...)가 호출되면 호출 내 thissome 콜백 내에서도 obj를 참조하므로 this.rexobjrex 속성을 참조한다. 콜백이 전통적인 함수라면 불가능하다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.