[js] es6 의 화살표 함수 표현식과 필터함수

안녕하세요 시란입니다. 

오랜만에 js 시리즈 입니다. 

 

요즘 vue.js를 공부하고 있는데요, 공부하던중 es6의 화살표 함수를 접했는데 ...

 

이부분이 해석이 안되더라고요. 

정말 정형적인 화살표함수와 배열의 필터 함수인데 말이죠..

 

사실 es6의 표현식은 공부하지 않으면 한눈에 안들어옵니다. 

 

그래서 이왕 이렇게 공부한거 한번 정리해보자는 생각에 포스팅을 작성합니다.

 

먼저 es6의 화살표 함수를 알아봅시다. 

function Test(a, b)

{

return a+ b

}

이건 우리가 매번 보던 함수 형태이죠?

 

여기서 함수를 변수에 담아볼께요

const test = function Test(a,b)

{

return a+b

}

그리고 이걸 한줄로 표현해볼께요.

 

const test = function Test(a, b){ return a+b }

 

자 여기서 함수명을 생략해볼게요 

const test = function (a,b) { return a+b }

여기까지 잘 따라오셨죠?

 

그다음은 화살표를 써서 표현할께요 

const test = function (a,b) =>  (a+b)

 

자 의미는 동일해요.  매개변수 a, b를 입력 받고 화살표 뒤에 부분을 리턴한다 라는 의미에요.

(저게 완성형이 아니에요 ... 절대 아래가 완성형이에요!!)

 

const test = (a, b ) => (a + b)

 

이렇게 function이라는 부분도 제외시켰습니다. 

해석은 동일합니다. 

 

const words = ["apple", "banana", "cherry", "date"];

 

const filteredWords = words.filter(word => word.length > 5);

 

 

 

자 그러면 위의 코드를 해석해볼까요?

일단 words라는 배열이 있습니다. 

 

그리고 filteredWords 는 words배열을 필터한 결과를 저장한다고 하는데 

filter 안에 내용이 해깔리네요.

word => word.length > 5라고 되어 있어요.

근데 겁내지 마세요 우리 배웠잖아요 화살표 함수 

 

(word => word.length > 5)

 

word =>  word.length > 5

여기서 생략된 부분은 function (word) { return word.length >5}

이거에요. 

 filter 함수의 역할은 단순해요, 배열에서 true에 해당되는 값들을 반환해주는 역할이죠. 

전체 내용을 살펴볼까요?

 

 

const filteredWords = words.filter(word => word.length > 5);

 

자 filteredWords 에는 word 배열에 들어있는 값중 길이가 5이상이 되는 값들만 filter 해서 반환된 값을 저장하는 변수입니다. 

banana 와 cherry가 저장되겠네요. 

 

이렇게 유심히 해석해보았습니다. 

 

es6에서는 함수 명도 , 선언도 생략이 되고 단순 화살표로 표기되며, 화살표 뒤는 바로 리턴값을 줌으로써 간단하게 표현하고자 했답니다. 

 

이게 고민을 안하고 그냥 대충 넘긴다면 또 저와 동일하게 잊어버릴꺼에요.

다시 한번 공부 하고 익숙해지고 익혀서 우리 다들 코드를 볼때 막힘이 없이 해석 될 수 있도록 갈고 닦읍시다.

 

지금까지 긴 포스팅 봐주셔서 감사합니다.  :)