[DAY - 27] at, splice, filter, find, findIndex, map, forEach, reduce, flat, every, some

• at
• splice
• filter
• find, findIndex
• map
• forEach
• reduce
• flat
• every
• some

 

 

1) at

 

at 메서드는 배열을 뒤에서부터 부를 때 사용한다.

 

let arr=[10, 20, 30, 40];
console.log(arr[arr.length-1]);
console.log(arr[2]);
console.log(arr.at(-1));
// at : 뒤에서 부터 인덱스 카운트
console.log(arr.at(-2));
console.log(arr.at(2));

console.log(arr[-2]);
// 인덱스 번호로 부를땐 음수 불가능



40
30
40
30
30
undefined

 

첫 번째 console.log는 arr배열의 맨 마지막 요소를 length를 사용해 출력했고, 세 번째는 at을 사용해서 뒤에서부터 인덱스 번로를 카운트 한 뒤 출력했다.

 

at을 사용하지 않을 시 인덱스 번호는 0, 1, 2, 3...처럼 0부터 시작하는 양수이므로 음수를 넣으면 출력되지 않는다.

 

 

 

2) splice

 

 특정 위치의 요소를 삭제 또는 교체하거나, 새 요소를 추가할 때 사용한다.

.splice(시작 인덱스 번호, 삭제할 요소 수)

.splice(시작 인덱스 번호, 삭제할 요소 수, 추가할 요소)

 

let arr1 = [10, 20, 30, 40, 50, 60];
arr1.splice(2, 0, 'a');
console.log(arr1);

let arr2 = [10, 20, 30, 40, 50, 60];
arr2.splice(0, 3);
console.log(arr2);

let arr3 = [10, 20, 30, 40, 50, 60];
arr3.splice(1, 0, 'a','b','c');
console.log(arr3);

let arr4 = [10, 20, 30, 40, 50, 60];
arr4.splice(2, 3, 'a','b','c');
console.log(arr4);



[
  10, 20, 'a', 30,
  40, 50, 60
]
[ 40, 50, 60 ]
[
  10, 'a', 'b', 'c',
  20, 30,  40,  50,
  60
]
[ 10, 20, 'a', 'b', 'c', 60 ]

 

arr1은 2번 인덱스에서 요소를 삭제하지 않고 'a'를 추가했고, arr2는 0번 인덱스부터 요소 3개를 삭제해 40, 50, 60만 남았다.

 

 

3) filter 조건문 단축

 

let arr = [10, 20, 30, 40, 50, 60];

let result2 = arr.filter(function(a){
    if(a>30){
        return true;
    } else {
        return false;
    }
});
console.log(result2);

let result3 = arr.filter(function(b){
    return b >30
});
console.log(result3);

let result4 = arr.filter(b=> b >30);
console.log(result4);



[ 40, 50, 60 ]
[ 40, 50, 60 ]
[ 40, 50, 60 ]

 

result2에서 if문을 생략하면 result3가 되고 화살표함수로 바꾸면 result4가 된다.

 

 

 

4) find, findIndex

 

filter 메서드와 비슷하지만 filter는 반환값이 배열 [ ] 인 반면 find는 반환값이 { } 하나이다.

findIndex는 find에서 반환값이 index번호가 된다.

 

let arr = [10, 20, 30, 40, 50];

let a1 = arr.filter(x=>x>=30);
let a2 = arr.find(x=>x>=30);
let a3 = arr.findIndex(x=>x>=30);

console.log(a1);
console.log(a2);
console.log(a3);



[ 30, 40, 50 ]
30
2

let data = [
    {id : 1, name : '유재석', age : 20, addr : '서울'},
    {id : 2, name : '정준하', age : 30, addr : '수원'},
    {id : 3, name : '정형돈', age : 30, addr : '수원'},
    {id : 4, name : '하하', age : 10, addr : '서울'},
    {id : 5, name : '노홍철', age : 10, addr : '서울'},
    {id : 6, name : '길', age : 40, addr : '인천'}
]
// id가 3인 사람 [{}] 출력
let data1 = data.filter(a=>a.id===3);
console.log(data1);
// id가 3인 사람 {} 출력
let data2 = data.find(a=>a.id===3);
console.log(data2);
// id가 3인 사람 인덱스 번호 출력
let data3 = data.findIndex(a=>a.id===3);
console.log(data3);



[ { id: 3, name: '정형돈', age: 30, addr: '수원' } ]
{ id: 3, name: '정형돈', age: 30, addr: '수원' }
2

 

 

5) map

 

map 메서드도 filter와 비슷하다.

map은 slice, concat처럼  복제본을 만들기 때문에 원본이 바뀌지 않는다.

 

let arr = [10, 20, 30, 40, 50];
let arr1 = arr.map(function(x, y){
    console.log(x, y);
    return x;
})
console.log(arr1);

console.log(`-----------------------`)

let arr2 = arr.map(function(a, b){
    console.log(a, b);
    return b;
})
console.log(arr2);



10 0
20 1
30 2
40 3
50 4
[ 10, 20, 30, 40, 50 ]
-----------------------
10 0
20 1
30 2
40 3
50 4
[ 0, 1, 2, 3, 4 ]

 

위 코드에서 x와 a는 arr의 요소값인 10, 20, 30... 을 의미하고 y와 b는 인덱스 번호인 0, 1, 2... 를 의미한다.

따라서 return으로 x를 받은 arr1은 값이 배열로 반환되었고 b를 받은 arr2는 인덱스 번호가 배열로 반환되었다.

 

'use strict';

let data = [
    {id : 1, name : '유재석', age : 20, addr : '서울'},
    {id : 2, name : '정준하', age : 30, addr : '수원'},
    {id : 3, name : '정형돈', age : 30, addr : '수원'},
    {id : 4, name : '하하', age : 10, addr : '서울'},
    {id : 5, name : '노홍철', age : 10, addr : '서울'},
    {id : 6, name : '길', age : 40, addr : '인천'}
]

let data3 = data.map(function(x, y){
    if(x.age===30){

        x.age+=10;
        return x;
    } else {
        return x;
    }
});
console.log(data3);




[
  { id: 1, name: '유재석', age: 20, addr: '서울' },
  { id: 2, name: '정준하', age: 40, addr: '수원' },
  { id: 3, name: '정형돈', age: 40, addr: '수원' },
  { id: 4, name: '하하', age: 10, addr: '서울' },
  { id: 5, name: '노홍철', age: 10, addr: '서울' },
  { id: 6, name: '길', age: 40, addr: '인천' }
]

 

* filter와 차이점은 filter는 단순 조건에 맞는 요소만 모아 배열로 만든다면 map은 조건에 맞는 요소 중 원하는 요소들의 값에 연산을 해 배열로 만들 때 사용한다.

 

 

<body>
    <div class="box">
        <table>
            <caption>신상명세서</caption>
            <colgroup>
                <col class="w1">
                <col class="w2">
                <col class="w3">
                <col class="w4">
                <col class="w5">
            </colgroup>
            <thead>
                <tr>
                    <th scope="col">번호</th>
                    <th scope="col">이름</th>
                    <th scope="col">나이</th>
                    <th scope="col">주소</th>
                    <th scope="col">설명</th>
                </tr>
            </thead>
            <tbody class="tbody">
            </tbody>
        </table>
    </div>
    <script>
        let data = [
            {id:1, name:'유재석', age:30, addr:'서울', msg:'나는 고양이를 키웁니다.'},
            {id:2, name:'정준하', age:40, addr:'서울', msg:'나는 강아지를 키웁니다.'},
            {id:3, name:'정형돈', age:20, addr:'인천', msg:'나는 고슴도치를 키웁니다.'},
            {id:4, name:'권지용', age:10, addr:'수원', msg:'나는 앵무새를 키웁니다.'},
            {id:5, name:'하하', age:20, addr:'부천', msg:'나는 거북이를 키웁니다.'},
            {id:6, name:'노홍철', age:30, addr:'성남', msg:'나는 토끼를 키웁니다.'}
        ]
        let dom = document.querySelector('.tbody');
        let x = '';

        let data2 = data.map((a, b)=>{
            return (
                `<tr>
                    <td>${a.id}</td>
                    <td>${a.name}</td>
                    <td>${a.age}</td>
                    <td>${a.addr}</td>
                    <td>${a.msg}</td>
                </tr>`
            )
        })
        dom.innerHTML = data2.join('');
    </script>
</body>

 

이처럼 map을 활용해 table내용을 작성할 수 있다.

 

 

 

6) forEach

 

forEach 메서드는 요소의 개수만큼 반복처리한다.

 

let arr = [10, 20, 30, 40, 50, 60];
arr.forEach(function(item, idx, arr){
    console.log(item, idx, arr);
})



10 0 [ 10, 20, 30, 40, 50, 60 ]
20 1 [ 10, 20, 30, 40, 50, 60 ]
30 2 [ 10, 20, 30, 40, 50, 60 ]
40 3 [ 10, 20, 30, 40, 50, 60 ]
50 4 [ 10, 20, 30, 40, 50, 60 ]
60 5 [ 10, 20, 30, 40, 50, 60 ]

 

첫 번째 매개변수는 요소를 두 번째는 인덱스를, 세 번째는 배열을 반환한다.

 

 

 

7) reduce

 

reduce는 배열 요소들의 누적합을 구할 때 사용한다.

 

let arr = [10, 20, 30];
let sum = 0;
let sum1 = 0;
let sum2 = 0;
let sum3 = 0;

// for문
for(let i=0; i<arr.length; i++){
    sum += arr[i];
}

// for~of
for(let x of arr){
    sum1+=x;
}

// for~in
for(let y in arr){
    sum2+=arr[y];
}

// forEach
arr.forEach(a=>{
    sum3+=a;
})

 

기존의 메서드를 사용해 요소의 총합을 구하려면 위와 같이 해야 한다.

 

let total=arr.reduce(function(acc, cur, idx, src){
    return acc + cur
},0)

 

이를 reduce 메서드를 사용하면 똑같이 구할 수 있다.

,0 으로 초기값을 0으로 설정해 주고, 누적값인 cur를 더해가면 60이 나오게 된다.

 

let data = [
    {id : 1, name : '유재석', age : 20, addr : '서울'},
    {id : 2, name : '정준하', age : 30, addr : '수원'},
    {id : 3, name : '정형돈', age : 30, addr : '수원'},
    {id : 4, name : '하하', age : 10, addr : '서울'},
    {id : 5, name : '노홍철', age : 10, addr : '서울'},
    {id : 6, name : '길', age : 40, addr : '인천'}
]

let total3=data.reduce((acc, cur)=>acc + cur.age,0)
console.log(total3);



140

 

data 객체의 age값 누적합을 구하고 싶다면 첫 번째 매개변수인 acc가 아닌 두 번째 매개변수인 cur에. age를 해야 한다.

 

 

 

8) flat

 

배열 안에 배열이 있을 때 하나의 배열로 만들어 준다.

'use strict';

const arr1 = [1, 2, [3, 4]];
arr1.flat();


const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();


const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);


const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);




[1, 2, 3, 4]
[1, 2, 3, 4, [5, 6]]
[1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

 

 

9) every, some

 

두 메서드는 조건(함수)에 맞는 요소가 있는지 확인을 할 때 사용한다.

every : 배열의 요소들이 모두 조건에 만족하면 true, 하나라도 만족 안 하면 false

some : 배열의 요소들이 하나라도 조건에 만족하면 true, 하나라도 없다면 false 

 

let arr = [10, 20, 30, 40, 50];

let arr1 = arr.every(x=>x<50);
console.log(arr1);

let arr2 = arr.some(x=>x<50);
console.log(arr2);



false
true