위코드 사전 스터디를 듣고 쓰는 글입니다.
수업 내용을 참고/인용하여 작성했습니다.

사실...화살표 문법이라는 것을 이전 포스팅에서 몰래몰래 썼습니다.
하지만 익숙해지기 위해 짚고 넘어가지 않을 수 없네요.

화살표 함수란?

화살표 함수는 ES6 문법으로서 function을 이용하는 것보다 더 간단하게 코드를 작성할 수 잇는 문법입니다.
ES6는, ECMAScript 표준의 가장 최신 버전입니다. 그러니까 새로운 언어들이 추가된 자바스크립트라고 이해해도 될까요?이렇게까지 딥하게 들어가면 조금 힘들어집니다.
ES6 문법에 대해 더 알고 싶으신 분들은 여기로!

지난 concat 포스팅에서 예제 3번을 더 간결하기 위해 화살표 함수를 사용했는데, 일단 우리에게 익숙한 대로 function을 이용하면 꽤나 줄을 많이 잡아먹습니다.
한번 간단하게 기능 몇 개를 만들어볼까요?

먼저 '자라나라 머리머리'를 외치는 로봇을 만들어보도록 하겠습니다.

기본 문법

//기존 function 문법
let function mermery1 (){
	console.log('자라나라 머리머리!');
}
mermery1();

//화살표 문법
let mermery2 = () => console.log('자라나라 머리머리!');
mermery2();

약 3줄이 1줄로 줄어드는 굉장한 발전입니다!
매개변수가 있을 경우도 한번 볼까요?

매개변수가 있을 경우

이탈리아에 있는 진실의 입을 함수로 만들어봅시다.
함수 mouth는 입력값이 참인지, 거짓인지에 따라 콘솔로 조용...과 뎅겅!을 출력합니다.

let mouth = boolean => {
	if(boolean == true){
    console.log('조용..');
  }else{
    console.log('뎅겅!');
  }
}
mouth(true)
mouth(false)
//직접 결과를 확인하세요.

이렇게 if문같은 여러 줄이 들어갈때는 =>의 다음이 중괄호로 감싸집니다.

매개변수가 여러개일 경우

화살표 이전의 매개변수 넣는 곳을 소괄호로 감싸줍니다.
이번엔 이름과 나이를 출력하는 로봇을 만들어볼게요.

let sayInfo = (name, age) => console.log(`제 이름은 ${name}이고 나이는 ${age}살입니다.`) 

sayInfo('곽두팔',40)
//직접 결과를 확인하세요.

객체를 반환하는 경우

let sample = () => ({dog: '맬러뮤트',cat : '러시안블루',hamster :'정글리안'})
sample()
//Object { dog: "맬러뮤트", cat: "러시안블루", hamster: "정글리안" }

객체에 대해선 아직 생소하죠?

또한 이런 화살표 문법들은 filter와 같은 콜백 함수에도 그대로 사용할 수 있어, 예제 3에서도 활용이 가능했던 겁니다.
한가지 좋은 것은, 기존 function 문법을 사용했을 경우 중괄호 안에 return을 넣어 주어 값을 반환하라는 명령을 해야 했죠. 하지만 화살표 문법에서는 굳이 return을 써주지 않아도 됩니다!

function totalIngredients () {
 let both = pasta.concat(pizza)
 let useFilter = both.filter(function(name,i){
 	return both.indexOf(name) == i //return으로 배열을 반환해야함
 });
 both = useFilter
 return both
}

function totalIngredients () {
 let both = pasta.concat(pizza)
 let oneIng = both.filter((name,index)=>both.indexOf(name)==index) //조건만 써지면 충분!
 both = oneIng
 return both
}

마무리

여기서는 함수의 표현을 줄여 쓸 수 있다는 부분만 적어두었고, 화살표 문법의 모든 것에 대해선 적지 않았습니다. 더 많은 정보를 얻고 싶으면 아래에 있는 참고 블로그에 들어가세요!
>>참고 블로그<<