[JS] 화살표 함수

 

📌 화살표 함수는 왜 쓰는건가요? 

function이라는 키워드를 사용하지 않아 코드가 짧아지고 입출력 기능을 직관적으로 전달해주는 장점이 있습니다. 

ES6문법부터 등장했다고 합니다. 

 

 

📌 화살표 함수를 사용한 예시를 살펴봅시다. 

//기존에 함수를 표현할때
const sum = function (x,y) {
    return x + y; 
} 

//화살표 함수를 사용했을때 
const add = (x, y) => {
	return x + y; 
}

훨씬 간결해보이네요.!

 

 

📌 매개변수가 하나일때는 괄호를 제거할 수도 있습니다. 

다만, 매개변수가 없을때, 매개변수가 여러 개 일때는 괄호를 제거할 수 없으니 유의합시다. 

const square = x => {
	return x * x;
}

 

📌 화살표함수는 리턴값까지 뺄수도 있다고 합니다. 대신 중괄호를 괄호로 표시해야 합니다. 

const square = x => (
      x * x
)

 

 

📌 급기야  괄호까지 없애고 한 줄로까지 쓸 수 있다고 합니다. 

이것을 암시적 반환(Implicit Return)이라고 하네요. 

const square = x => x * x

그러므로 저런 표현식을 볼때 놀라지 말아야겠죠? 

 

❗ 다만, 이렇게 단축해서 표현할때에  유의해야 할 것은 함수 내에 선언문이 딱 하나만 있을때 가능합니다. 

아래 예시처럼  msg 라는 다른 변수가 추가되면 에러가 납니다. 뭘 반환해야 할지 모르기 때문입니다. 

const rollDie = () => (
    let msg = '선언문은 하나만 있어야해요' 
    Math.floor(Math.random() * 6 ) + 1
 )

 

 

📌 정리

const 김치찌개 = 김치 => 김치 * 2 ;

비유를 하자면 김치찌개는 '김치'라는 재료를 2배로 넣어야 합니다.   (김치를 많이 넣어야  맛있습니다.  😁😁😁) 

이렇게 보니 굉장히 직관적으로 보입니다. 

화살표함수에 중괄호나 생략이 되어 있을때는 당황하지 맙시다!! 

 

 

 

위 내용은 Udemy The Web Developer 부트캠프 2023 강의의 화살표함수 부분을  듣고 요약한 것입니다.