이 기사에서는 JS 화살표 기능에 대해 설명합니다.

괄호 없음 구문위 예에서 함수에는 매개변수가 없습니다. 이 경우 굵은 화살표 기호(=>) 앞에 빈 괄호 쌍()을 추가해야 합니다. 매개변수가 여러 개인 경우에도 마찬가지입니다.

console.log(anonymousArrowFunc.name) // output: "anonymousArrowFunc"

로그인 후 복사

로그인 후 복사

매개변수가 하나만 있는 경우 괄호를 생략할 수 있습니다(꼭 그럴 필요는 없지만 가능합니다).

let counter = 5 let countDown = setInterval(() => { console.log(counter) counter-- if (counter === 0) { console.log("I have no name!!") clearInterval(countDown) } }, 1000)

로그인 후 복사

로그인 후 복사

이 작업을 수행할 때는 주의하세요. 예를 들어, 기본 매개변수를 사용하기로 결정한 경우 매개변수를 괄호로 묶어야 합니다.

Start Counter ... const startBtn = document.querySelector(".start-btn"); startBtn.addEventListener('click', function() { this.classList.add('counting') let counter = 5; const timer = setInterval(() => { this.textContent = counter counter -- if(counter < 0) { this.textContent = 'THE END!' this.classList.remove('counting') clearInterval(timer) } }, 1000) })

로그인 후 복사

로그인 후 복사

Implicit return함수 본문에 표현식이 하나만 있는 경우 ES6의 화살표 구문을 더 간결하게 만들 수 있습니다. 모든 내용을 한 줄에 입력하고 중괄호를 제거하고return키워드를 제거할 수 있습니다. 위의 예에서 이러한 멋진 한 줄짜리 코드가 어떻게 작동하는지 확인했습니다. 다음orderByLikes()함수는 좋아요 수가 가장 많은 순서로 정렬된 Netflix 에피소드 개체 배열을 반환합니다.

startBtn.addEventListener('click', function() { console.log(this) ... })

로그인 후 복사

로그인 후 복사

이 작성 방법은 멋지지만 코드의 가독성에 주의하세요. 특히 한 줄과 괄호 없는 ES6 화살표 구문을 사용하여 여러 화살표 함수를 정렬할 때 더욱 그렇습니다. 예를 들면 다음과 같습니다.

startBtn.addEventListener('click', () => { console.log(this) ... })

로그인 후 복사

로그인 후 복사

거기서 무슨 일이 일어났나요? 일반 함수 구문을 사용해 보세요.

// change button's border's appearance this.classList.add('counting')

로그인 후 복사

로그인 후 복사

이제 외부 함수greeter에greeting매개변수가 있고 익명 함수를 반환하는 방법을 빠르게 확인할 수 있습니다. 이 내부 함수는name이라는 또 다른 매개변수를 취하고greeting및name값을 사용하여 문자열을 반환합니다. 함수를 호출하는 방법은 다음과 같습니다.

const timer = setInterval(function() { console.log(this) ... }, 1000)

로그인 후 복사

로그인 후 복사

암시적 반환 오류에 유의하세요

const that = this const timer = setInterval(function() { console.log(that) ... }, 1000)

const timer = setInterval(function() { console.log(this) ... }.bind(this), 1000)

화살표 함수의 이름을 지정할 수 없습니다.function키워드 및 인수 목록에서 이름으로 식별되지 않는 함수를 익명 함수라고 합니다. 일반 익명 함수 표현식은 다음과 같습니다.

const timer = setInterval( () => { console.log(this) ... }, 1000)

로그인 후 복사

로그인 후 복사

화살표 함수는 모두 익명 함수입니다.

const timer = setInterval( () => { console.log(this) // the button's text displays the timer value this.textContent = counter }, 1000)

로그인 후 복사

로그인 후 복사

ES6부터name 속성의 이름을 지정합니다. 이를 통해 해당 값을 확인하거나 오류를 보고할 때 기능을 식별할 수 있습니다. anonymousArrowFunc를 사용하여 확인하세요.

console.log(anonymousArrowFunc.name) // output: "anonymousArrowFunc"

로그인 후 복사

로그인 후 복사

需要注意的是，只有当匿名函数被分配给一个变量时，这个可以推断的name属性才会存在，正如上面的例子。如果你使用匿名函数作为回调函数，你就会失去这个有用的功能。在下面的演示中，.setInterval()方法中的匿名函数无法利用name属性：

let counter = 5 let countDown = setInterval(() => { console.log(counter) counter-- if (counter === 0) { console.log("I have no name!!") clearInterval(countDown) } }, 1000)

로그인 후 복사

로그인 후 복사

这还不是全部。这个推断的name属性仍然不能作为一个适当的标识符，你可以用它来指代函数本身--比如递归、解除绑定事件等。

Start Counter ... const startBtn = document.querySelector(".start-btn"); startBtn.addEventListener('click', function() { this.classList.add('counting') let counter = 5; const timer = setInterval(() => { this.textContent = counter counter -- if(counter < 0) { this.textContent = 'THE END!' this.classList.remove('counting') clearInterval(timer) } }, 1000) })

startBtn.addEventListener('click', function() { console.log(this) ... })

startBtn.addEventListener('click', () => { console.log(this) ... })

// change button's border's appearance this.classList.add('counting')

const timer = setInterval(function() { console.log(this) ... }, 1000)

const that = this const timer = setInterval(function() { console.log(that) ... }, 1000)

const timer = setInterval(function() { console.log(this) ... }.bind(this), 1000)

const timer = setInterval( () => { console.log(this) ... }, 1000)

const timer = setInterval( () => { console.log(this) // the button's text displays the timer value this.textContent = counter }, 1000)

const netflixSeries = { title: 'After Life', firstRealease: 2019, likes: 5, getLikes: () => `${this.title} has ${this.likes} likes`, addLike: () => { this.likes++ return `Thank you for liking ${this.title}, which now has ${this.likes} likes` } }

const netflixSeries = { title: 'After Life', firstRealease: 2019, likes: 5, getLikes() { return `${this.title} has ${this.likes} likes` }, addLike() { this.likes++ return `Thank you for liking ${this.title}, which now has ${this.likes} likes` } } // call the methods console.log(netflixSeries.getLikes()) console.log(netflixSeries.addLike()) // output: After Life has 5 likes Thank you for liking After Life, which now has 6 likes

$('body').on('click', function() { console.log(this) }) // 

$('body').on('click', () =>{ console.log(this) }) // Window

new Vue({ el: app, data: { message: 'Hello, World!' }, created: function() { console.log(this.message); } }) // Hello, World!

new Vue({ el: app, data: { message: 'Hello, World!' }, created: () => { console.log(this.message); } }) // undefined

const listYourFavNetflixSeries = () => { // we need to turn the arguments into a real array // so we can use .map() const favSeries = Array.from(arguments) return favSeries.map( (series, i) => { return `${series} is my #${i +1} favorite Netflix series` } ) console.log(arguments) } console.log(listYourFavNetflixSeries('Bridgerton', 'Ozark', 'After Life'))

const listYourFavNetflixSeries = function() { const favSeries = Array.from(arguments) return favSeries.map( (series, i) => { return `${series} is my #${i +1} favorite Netflix series` } ) console.log(arguments) } console.log(listYourFavNetflixSeries('Bridgerton', 'Ozark', 'After Life')) // output: ["Bridgerton is my #1 favorite Netflix series", "Ozark is my #2 favorite Netflix series", "After Life is my #3 favorite Netflix series"]

const listYourFavNetflixSeries = (...seriesList) => { return seriesList.map( (series, i) => { return `${series} is my #${i +1} favorite Netflix series` } ) }