화살표 기능이란 무엇입니까? - 1 부

화살표 함수는 ES6에 도입되어 JavaScript에서 함수를 보다 정확하게 작성할 수 있습니다. 더 짧은 함수 구문을 작성할 수 있습니다. 화살표 함수는 코드의 가독성과 구조를 개선합니다.

익명 함수는 화살표 함수(이름이 없고 식별자와 연결되지 않은 함수)입니다. 출력을 생성하지 않으며 function 키워드 없이 사용할 수 있습니다. 화살표 함수는 생성자로 사용할 수 없습니다. 화살표 함수의 컨텍스트는 사전적 또는 정적으로 지정할 수 있습니다. 다른 언어에서는 Lambda로 알려져 있습니다.

화살표 함수 구문을 사용하면 코드의 크기가 줄어듭니다. 화살표 기능을 사용하면 더 적은 코드를 작성할 수 있습니다.

기능에서 화살표 기능으로

JavaScript에서 함수를 작성하는 방법에는 여러 가지가 있습니다. 함수를 정의하고 이름을 지정하거나 변수를 정의하고 익명 함수에 할당할 수 있습니다.

예시:

function multiply(a, b) {
   return a * b;
}

다음과 같이 작성할 수 있습니다.

const multiply = function(a, b){
   return a * b;
}

변수 multiply를 정의한 다음 a 및 b 두 매개변수를 사용하여 변수를 함수에 할당한 방법을 기록해 두십시오.

다음 두 단계에 따라 화살표 함수를 사용하여 다시 작성해 보겠습니다.

함수 키워드를 제거합니다

.

매개변수(a, b)와 여는 중괄호 { 사이에 굵은 화살표 =>라고도 하는 화살표 함수를 추가합니다. {

예시:

const multiply = (a, b) => {
   return a * b;
}

화살표 함수는 항상 매개변수로 시작하고 화살표 =>, 마지막으로 함수 본문입니다.

ES5에서는 함수에 return 문을 정의해야 하지만 ES6에서는 한 줄 함수에 return 문이 필요하지 않습니다. 한 줄 함수의 경우 기능 중괄호도 선택 사항입니다.

// ES5
function show(value){
return value/2

// ES6
let show = value => value/2;
console.log(show(50));

화살표 함수를 사용하는 Array.forEach()

// Without the fat arrow
const ages = [10, 15, 22, 45];

ages.forEach(function(ages) {
   console.log(ages);
});

// With the fat arrow
ages.forEach((grade) => {
   console.log(ages);
});

화살표 함수는 매개변수가 하나뿐이므로 매개변수를 둘러싼 괄호()는 필요하지 않습니다.

ages.forEach(grade => {
  console.log(grade);
});

화살표 함수는 어휘적 또는 정적으로 컨텍스트를 바인딩합니다. 이는 일반 함수와 화살표 함수에서 다르게 처리됩니다. 화살표 함수에는 이것에 대한 바인딩이 없습니다. 이 키워드는 일반 함수에서 창, 버튼, 문서 등 함수를 호출한 개체를 나타내는 데 사용됩니다.

//ES5
this.num.forEach(function(num) {
  if(num < 20)
   this.child.push(num);
}.bind(this));

//ES6
this.num.forEach(num => {
  if(num < 20)
    this.child.push(num);
});

그러나 이 키워드는 화살표 함수와 함께 사용될 때 항상 화살표 함수를 정의하는 개체를 나타냅니다.

자동으로 수행되기 때문에 화살표 기능을 사용할 때 암시적으로 바인딩할 필요가 없습니다.

화살표 함수를 사용하는 Array.filter()

// Without the fat arrow
const ages = [10, 15, 22, 25];

let agesAboveTwentyOne = ages.filter(function(age) {
    return age > 21;
});
console.log(agesAboveTwentyOne); //[22, 25]

// With the fat arrow
let agesAboveTwentyOne = ages.filter(age => {
    return age > 21;
});
console.log(agesAboveTwentyOne); //[22, 25]

화살표 함수는 매개변수가 하나뿐이므로 매개변수를 둘러싼 괄호()는 필요하지 않습니다.

아래 댓글 섹션에서 의견을 공유해 주세요. 당신의 생각을 듣고 싶습니다. 아니면 들러서 '👋'라고 말해주세요.