ES6 - Arrow function (array function)

 

이번엔 자바스크립트 함수중 몇가지 함수를 살펴보자(배열에서 쓰이는)

 

1) Array.prototype.find()

이 함수는 주어진 함수를 만족하는 첫 번째 요소의 값을 반환한다. 없다면 undefined를 반환.

find()함수 괄호 안의 매개 변수는 callback 함수가 오고 위 사진처럼 arrow function으로 무지 간단하게 함수가 구현되었다.

es6이전의 방식이라면

이렇게 코드량이 많아진다.

 

자 좀더 설명하자면 find함수는 callback함수가 true를 반환할 때까지 해당 배열의 각 요소에게 callback함수를 실행한다.

만족하는 요소를 찾았다면 해당 요소를 즉시 반환하고, 못찾았다면 undefined를 반환한다.

 

find는 호출대상인 배열을 mutate하지 않는다.

그리고 처리할 배열 요소의 범위는 첫 callback이 호출되기 전에 먼저 결정된다.find()함수가 실행 된 이후에 배열에 추가된 요소는

callback이 호출되지 않는다. 만약 callback이  적용 되지 않았던 요소가 callback에 의해 변경된 경우 예를 들어 callback 함수로 삭제된 경우에도 callback이 호출된다.

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Array.prototype.find() - JavaScript | MDN

 

2) Array.ProtoType.filter()

filter는 제공된 함수의 테스트를 통과한 모든 요소를 새로운 배열로 만들어 준다.

filter역시 매개변수로 콜백함수를 받고 주어진 콜백함수에 만족하는(true를 반환하는) 요소를 새로운 배열로 만들어 준다.

callback함수의 인자는 처리할 요소와 처리할 요소의 인덱스 필터를 호출한 배열등이 들어갈 수 있다.

 

filter는 배열 내 각요소에 대해 한 번 제공된 callback함수를 호출해 callback이 true로 반환하는 모든 값이 있는 새로운

배열을 생성한다. callback은 할당된 값이 있는 배열의 인덱스에 대해서만 호출한다. 삭제됐거나 값이 할당된적이 없는 인덱스에

ㅐ해서는 호출되지 않는다.

filter역시 배열을 mutate하지 않는다.

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter() - JavaScript | MDN

 

 

3) Array.prototype.forEach()

forEach는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행한다. 삭제했거나 초기화 되지 않은 인덱스 속성에

대해서는 실행하지 않는다.

상기 코드는 emails라는 배열에 5개의 요소가 있고 

forEach함수를 써서 인자를 받아  @를 기준으로 스플릿 하고 0번째 인덱스 요소를 clean이라는 배열에 다시 넣어주는

코드이다. 

결과는 아래와 같이 5개의 @앞 텍스트만 뽑아서 배열로 만들어 준다.

코드에서 보면 알다 시피 각각의 요소에 callback함수를 실행하여 준다.

 

이코드를 더 간단히 쓸수 있는 방법이 있는데 바로 map()함수를 사용해주면 된다.

 

4) Array.prototype.map()

map()함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

 

map은 callback함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다.

콜백 함수는 undefined도 포함하여 배열 값이 들어 있는 인덱스에 대해서만 호출한다.

즉 값이 삭제되거나 아직 값이 할당 / 정의 되지 않은 인덱스에 대해서는 호출되지 않는다.

 

위에 forEach를 적용한 코드를 map으로 바꿔보자

 

결과를 보자.

두개의 인자를 받아 하나는 username이라는 property에 @를 기준으로 0번째 인덱스 요소를 할당해주고

두번째에는 index를 받는다.

참고할 것이 있는데

implicit return은 { } 를 쓰면 사용하지 못하고 ()를 같이쓰면 object도 사용 가능해진다.

 

자 그럼 forEach와 map 의 차이가 무엇인지 짚어보자

forEach 메소드는 아무것도 리턴하지 않는다. 단지 제공된 함수로 Array요소를 호출한다.

map은 Array안에 요소들을 호출하나 forEach와 다른점은 값을 사용하고 Array와 동일한 사이즈의 새로운 Array를 반환한다.

 

한마디로 forEach는 배열 요소마다 주어진 callback함수를 실행만 하는것이다. 

map은 배열내 모든 요소에 각각에 대하여 주어진 callback함수를 호출한 결과를 모아 새로운 배열을 반환!! 한다.

자 이해가 안 갈수 있다.... 그럼 map함수를 적용한 코드처럼 만들어보자

 

자 implicit return으로 email.split("@")[0]  즉 받은 인자를 @를 기준으로 splitg하여 0번째 요소를 리턴하기로 한다

그리고 noGmail에 담아준다

그리고 console.log(noGmail) 을 해보면?

undefined가 나온다.. 리턴하지 않기 때문이다! 

 

요기까지~!~! 아 implicit return은 {}스코프가 추가되면 사라진다..그럼 어찌하느냐 

{}스코프를 ()로 감싸주면 된다~! 요까지~!~!