JS. 화살표 함수

MJ·2022년 8월 30일

Java Script

목록 보기

25/57

화살표 함수 (arrow function)

함수 표현식을 화살표를 사용해서 간결하게 작성하는 문법을 화살표 함수라고 합니다.
IE 환경에선 호환되지 않습니다

❤️ 문법 

let func = function(arg1, arg2, ...) {	// 기본적인 함수 표현식
	return expression; 
}


			↑ 위에 함수 표현식을 화살표 함수로 간결하게 작성

            
let func = (arg1, arg2, ...) => { 
  return expression; 
}



/* 
인자 arg1, arg2를 매개변수로 받는 함수가 생성됩니다. (함수명 func)
생성된 함수는 화살표(=>) 우측에 있는 표현식(expression)을 평가하고, 평가 결과를 반환 합니다.
*/

1.1 화살표 함수 사용

❤️ 화살표 함수 사용 (1)

let sum = (a, b) => a + b;

/* 
위 화살표 함수는 아래 함수의 축약 버전입니다.

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3


/* 
인수 1,2를 인자 a,b로 받고, 표현식에서 a와 b를 더한 결과 값을 반환합니다.
인수가 하나밖에 없다면, 인수를 감싸는 괄호를 생략할 수 있습니다.
*/

1.2 인수가 1개라면 괄호 생략 가능

let double = n => n * 2;	// 매개변수가 1개라 괄호생략이 가능하다.
// let double = function(n) { return n * 2 }과 거의 동일합니다.


alert( double(3) ); // 6

1.3 인수가 없다면 괄호는 필수다

let sayHi = () => alert("안녕하세요!");
// 인수가 하나도 없을 때는, 괄호를 생략해서는 안됩니다. ( 괄호를 비워두는건 괜찮다 )


sayHi();

1.3 화살표 함수 응용

let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  () => alert('안녕') :
  () => alert("안녕하세요!");

/* 위 코드는 아래와 동일하다 ↓ */

let welcome = (age < 18) ?
function() { alert('안녕'); }: 
function() { alert('안녕하세요!'); };


welcome();

화살표 함수의 반환

특정상황에서 화살표 함수는 return 지시자를 생략할 수 있다.
표현식을 중괄호 대신 괄호로 변경한다면, 임시적으로 반환할 수 있다.

const rolldie = () => (
   Math.floor(Math.random() * 6 ) + 1
);

console.log(rolldie());	// 난수 출력

/*
return 지시자가 없어도 ( ) 괄호를 사용해서 표현식을 작성하면 임시적으로 반환하기에
오류가 발생하지 않습니다.


const rolldie = () =>  Math.floor(Math.random() * 6 ) + 1;
간단하게 한줄로도 괄호를 생략하고 함수를 작성할 수 있습니다.
다만 구문이 너무 긴 경우에는 2줄로 작성하는 것이 좋다.
*/

임시적 반환에서 중요한 것은 괄호안에 표현식이 1개만 존재해야 합니다.

두 가지인 경우에는 어떤 표현식을 반환해야 할지 모르기에 오류가 발생 합니다.

화살표 함수 응용

const movies = [
    {
        title: '범죄와의전쟁',
        score: 99
    },
    {
        title: '지금 만나러갑니다',
        score: 90  
    },
    {
        title: '검은 사제들',
        score : 85
    }
]

/* const newMovies = movies.map(function (movie){
     return `${movie.title} : ${movie.score / 10}`;
 })
 
화살표 함수를 사용하지 않았을 때의 코드
*/

const newMovies = movies.map((movie) => (
    `${movie.title} : ${movie.score / 10}`
))

console.log(newMovies);
/* 
출력 :
[ '범죄와의전쟁 : 9.9', '지금 만나러갑니다 : 9', '검은 사제들 : 8.5' ]

화살표 함수를 사용해서 코드를 간소화 시킬 수 있다.
*/