js) find, map, filter

특정 조건을 가진 것만 뽑아냄

• find -> true를 만나면 즉시 함수 종료
• filter -> true 반환하는 '모든' 원소들로 배열을 만듦

map - 배열을 '변환' 시킴. 새로운 배열을 재생산

 

cf) reduce - 배열 안의 합을 구할 때 사용

 

 

find - true를 만나면 즉시 함수 종료

The find() method returns a value in the array, if an element in the array satisfies the provided testing function. Otherwise undefined is returned.

 

find 함수는 배열 원소에 대해서 주어진 함수 연산을 하다가 함수가 true를 반환하면 find함수도 같이 종료됩니다. for 로 구현한 예제의 13행의 break;와 같이 동작한다고 이해. find함수로 조건에 만족하는 원소를 반환하지 못하는 경우 undefined 를 반환
 
filter 함수는 각각 배열의 원소에 대해서 전달받은 함수의 결과가 true를 반환한 원소들로만 배열을 만듦. 

https://gnujoow.github.io/dev/2016/10/14/Dev6-es6-array-helper/

 

const params = {a : 1 , b:2, c:null, d:4, e:5};
const foundKey = Object.keys(params).find(key => params[key] === null || params[key] === undefined);
console.log(Object.keys(params));
console.log(foundKey);

 

 

 

cf) 

출처 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

 

element 부분 주의 깊게 보기

-> 요소 하나하나를 의미

 

const params = {a : 1 , b:2, c:null, d:4, e:5}
const foundKey = Object.keys(params).find(aaa => params[aaa] === null || params[aaa] === undefined);

 

Object.keys(params) 가 [ 'a', 'b', 'c', 'd', 'e' ]

-> 이거의 요소 하나하나는 a, b, c, d, e

 

즉, params[a] = 1 이렇게 읽어되게 되는 것이므로 'elemenet'를 뜻하는 자리에 aaa든 bbb든 명칭은 아무거나 써주어도 된다. 

- key값이라 key라고 적어주었을뿐 key라는 변수만 들어가는건 아니라는 점

---

filter - true 반환하는 '모든' 원소들로 배열을 만듦

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

 

const params = {a : 1 , b:2, c:null, d:null, e:5};
const foundKey = Object.keys(params).filter(function(key){
    return params[key] === null || params[key] === undefined;
});

 

 

---

map - 배열을 '변환' 시킴. 새로운 배열을 재생산

The map() method creates a new array with the results of calling a provided function on every element in this array.

 

 

문제 상황 

-> 무슨 식을 세워도 다 TypeError: params.map is not a function가 난다. 

 

-> key, value 값은 그냥 가지고 올 수 있는건가... 했는데 아니었다. 배열로 만들어줘서 직접 설정을 해줘야했음

 

 

해결 

// find
const params = {a : 1 , b:2, c:null, d:4, e:5};
const foundKey = Object.keys(params).find(key => params[key] === null || params[key] === undefined);
console.log(Object.keys(params)); //-> [ 'a', 'b', 'c', 'd', 'e' ]
console.log(foundKey); //-> c


//filter
const params2= {a : 1 , b:2, c:null, d:null, e:5};
const foundKey2 = Object.keys(params2).filter(function(key){
    return params2[key] === null || params2[key] === undefined;
});
console.log(foundKey2); // -> [ 'c', 'd' ]


//map
const params3 = [
    {key:'a', value:1},
    {key:'b', value:2},
    {key:'c', value:3},
    {key:'d', value:4},
    {key:'e', value:5}
   ]
// 새롭게 배열을 만들어주는 것이므로 변수 설정

// 첫번째
const reParams = params3.map(({key, value}) => ({ [key] : value*2 }));
console.log(reParams); // -> [ { a: 2 }, { b: 4 }, { c: 6 }, { d: 8 }, { e: 10 } ]

// 두번째
const reParams2 = params3.map(function(obj){
    const newObj = {};
    newObj[obj.key] = obj.value*2
    return newObj
})
console.log(reParams2); // -> [ { a: 2 }, { b: 4 }, { c: 6 }, { d: 8 }, { e: 10 } ]

//세번째
const reParams3 = params3.map(function(key, value){
    return console.log(key, value, value*5);
})
console.log(reParams3);

/*
{ key: 'a', value: 1 } 0 0
{ key: 'b', value: 2 } 1 5
{ key: 'c', value: 3 } 2 10
{ key: 'd', value: 4 } 3 15
{ key: 'e', value: 5 } 4 20

*/

 

세번째 방법

 

// map 기본
const practiceArray = [1,2,3,4,5];
const result = practiceArray.map(element => element*5);
console.log(result); // -> [ 5, 10, 15, 20, 25 ]