[TIL]Javascript - ES6 Arrow function -1- (화살표 함수)

 Arrow function 

 

특징

• 화살표함수는 함수를 식별할 수 있는 식별자(=함수명)가 없음 (익명함수 표현식과 유사)
• 화살표 함수를 호출하기 위해 함수 표현식 방법으로 호출해 줄 수 있음

/* 기존 함수 */
function 함수명 (param1, param2...){
	body...
    return;
}

/* 화살표 함수 */
() => {

}

 

✅  기존 함수를 화살표 함수로 표현하려면?

/* "함수 선언문"방식으로 표현된 함수 */
function sum(num1, num2){
  return num1 + num2
}

const result = sum(1, 2);
console.log(result);     // 3

/* 식별자가 없는 "화살표 함수" */
(num1, num2) => {
  return num1 + num2
}

 

하지만 이런 형식은 식별자가 없어 호출 할 수 없다.

고로 아래와 같이 "함수 표현식"을 사용하여 변수에 할당 한 뒤, 해당 변수를 호출하는 방식으로 사용할 수 있다.

 

/* 화살표 함수를 "함수 표현식"으로 사용 */
const sum = (num1, num2) => {
  return num1 + num2
}

const result = sum(1, 2);
console.log(result);    // 3

 

화살표 함수 내에 return 문만 있는 형태이면 더 간단하게 표현 가능하다.

const sum = (num1, num2) => num1 + num2;

 

✅  사용되는 parameter가 1개이면 '()' 소괄호 생략 가능하다.

const sum = num1 =>  num1 + num1;
const result = sum(1);
console.log(result);  // 2

 

✅ 전달하고자하는 parameter가 없다면 소괄호만 작성하면 된다.

const sum = () =>  123;
const result = sum();
console.log(result);   // 123

 

✅ return에 객체 사용시 "{}"중괄호 밖을 "()" 소괄호로 한 번 더 감싸줘야한다.

const myObject = () =>  ({
  name : "dan",
  age : "30"
})

const obj = myObject();
console.log(obj.name);   // dan

 

✅ 화살표 함수를 사용해 중첩된 함수를 더욱 간단히 표현할 수 있다.

const myFunction = (x) => () => x+x

const innerFunction  = myFunction(5);
const result = innerFunction();
console.log(result);    // 10

이와 같이 화살표를 연쇄적으로 사용할 수 있다.

위의 화살표 함수는 아래의 함수와 똑같은 역할을 한다.

function myFunction(x){
  return function innerFunction(){
    return x+x;
  }
}


const innerFunction  = myFunction(5);
const result = innerFunction();
console.log(result); // 10

 

 

 

📚참고 자료

유튜브 "드림코딩 by 엘리" - "자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현"

https://youtu.be/e_lU39U-5bQ

유튜브 "수코팅" - "ES6 화살표 함수 기본편"

https://youtu.be/5kRgzyGRPrU