[ES] Arrow Fucntion

안녕하세요, 늘 부족하지만 아는 것을 공유하는 AlbertKo입니다!

이번 시간에는 ES6에 추가된 Arrow Function에 대해서 알아보도록 하겠습니다.

화살표 함수를 알기 전에 람다 표현식에 대해서 알아보도록 하겠습니다.

람다 표현식

람다 표현식이란 익명 함수를 표현하는 방법이라고 생각하시면 됩니다.

Javascript의 Arrow Function이 이러한 표현 방법입니다.

let array = [10, 20, 30]

//None-Lambda Expression

function none(value) {

console.log(value);

}

array.map(none)

//Lambda Expression <Anonymous Function>

array.map(function(value) {

console.log(value)

})

//Lambda Expression <Arrow Function>

array.map(value => {

console.log(value)

})

일반적인 함수 사용

none 이라는 이름을 가진 함수를 일반적인 방법으로 선언해 map 오퍼레이터에 전달해줬습니다.

콜백함수로 익명 함수 전달

위와 같지만, 따로 함수를 선언 후 전달한 것이 아닌, 익명 함수로 전달을 해줬습니다.

람다 표현식은 익명성을 요구하므로, 람다 표현식이라고 할 수 있습니다.

콜백함수로 화살표 함수 표현식을 이용하여 전달

화살표 함수 역시 익명 / 무명 함수입니다.

단지 화살표 함수 표현식을 통해 기존 익명함수 표현을 축약할 수 있습니다.

저는 헷갈렸던게, 람다식이라고 치면 각 각의 언어마다의 익명함수를 축약형으로 표현하는 방법들이 나옵니다.

대게는 화살표 모양이 대표적이죠, 그래서 저는 람다 표현식 = 화살표 함수 표현식 인줄 알았습니다만, 틀린 생각이였습니다.

그래서, 제가 정확하게 이해한대로 따지면, 

이런 느낌이라고 생각합니다.

return 방법

화살표 함수에서는 return을 어떤 식으로 하는지봅시다.

let a = x => 1

console.log(a()) // 1

let b = x => ({ // Object 리턴시, 소괄호안에 넣어준다. ex) x => ({})

value : 123

})

console.log(b()['value']) // 123

let c = x => {

return 456

}

console.log(c()) // 456

위와 같이 방법들이 있습니다.

첫 번째 방법과 두 번째 방법은 return을 생략한 방법입니다.

첫 번째는 단순 Value 반환할 때, return을 생략한 방법입니다.

화살표 바로 뒤에 값을 반환해줍니다.

두 번째는 객체를 반환할 때입니다.

옆에 예시에 나와있듯이, 소괄호를 씌어주면 반환이 가능합니다.

단, return 생략시 해당 줄을 분리하면 SyntaxError 가 발생합니다.

마지막은 그냥 일반적으로 블록 안에 return 키워드를 사용하여 반환을 해줬습니다.

이상으로 Arrow Function에 대해서 마치겠습니다.

이 외에도 몇가지 내용이 더 있으나, 나중에 좀 더 자세하게 정리하여 자료를 공유하도록 하겠습니다 ㅎㅎ