Javascript: 화살표 함수 사용 방법

클래스, 기본 매개변수, 템플릿 리터럴 및 Javascript 개발자가 사랑하게 된 기타 기능의 도입과 함께 ES6 도입한 기능 중 하나는 화살표 함수였습니다.

ES6 전에는 함수 표현식을 만들 때 다음과 같이 작성해야 했습니다.

// with no arguments
let myFunction = function(){
    return "This is my function"
}

// with one argument

let sayName = function(name){
    return `My name is ${name}`
}

// with two or more arguments
let addNumbers = function(num1, num2){
    return num1 + num2
}

myFunction() // "This is my function"
sayName("Tony") // "My name is Tony"
addNumbers(2,5) // 7

ES6 이후에는 이제 다음과 같이 작성할 수 있습니다.

// our original function expressions from above become..

// with no arguments
let myFunction = () => "This is my function"

// with one argument
// parentheses are optional with only one parameter
let sayName = name => `My name is ${name}`

// as a function expression w/ arguments
// parentheses are required when using more than one parameter
let addNumbers = (num1, num2) => num1 + num2

myFunction() // "This is my function"
sayName("Tony") // "My name is Tony"
addNumbers(2,5) // 7

위의 예에서 우리는 굵은 화살표 "⇒"다음에 하나의 간단한 표현식/문만 사용하고 있으므로 반환이 암시적이거나 필요하지 않을 수 있습니다.

그러나 화살표 함수에서 여러 식/문을 사용하는 경우 중괄호와 return 키워드를 사용해야 합니다. 하나의 간단한 표현식/문을 사용할 때도 중괄호를 사용할 수 있지만 동일한 규칙이 적용되며 그 안에 return 키워드를 사용해야 합니다.

여러 표현식/문이 있는 예:

let multiplyBySix = num => {
    let six = 6
    return num * six
}

let addTenToSum = (num1, num2) => {
    let ten = 10
    let sum = num1 + num2
    return sum + ten
}

multiplyBySix(2) // 12
addTenToSum(2,8) // 20

중괄호 + 명시적 반환이 포함된 원래 예제:

// remember, this is optional here because these are single statement/expressions
let myFunction = () => {return "This is my function"}

let sayName = name => {return `My name is ${name}`}

let addNumbers = (num1, num2) => {return num1 + num2}

myFunction() // "This is my function"
sayName("Tony") // "My name is Tony"
addNumbers(2,5) // 7

간단히 말해서 화살표 함수는 Javascript 함수 표현식의 약식 버전입니다.

화살표 기능의 추가 이점은 현재 컨텍스트 또는 *this*를 유지/바인딩한다는 것입니다(이것이 무엇인지에 대한 추가 정보here , 보다 구체적으로 here , 비디오를 보고 싶다면 — ), 특정 상황에서 매우 편리합니다.

항상 그렇듯이 자세한 내용은 MDN을 참조하세요.
화살표 기능: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

질문이나 피드백이 필요하거나 연결/안녕하세요 👋가 필요한 경우 언제든지 제 소셜에 연락해 주세요.