[JavaScript] 배열 메소드 ✅

parkheeddong·2023년 5월 1일

JavaScript

목록 보기
8/26
post-thumbnail

1. splice

splice(i, n) index i부터 n개 삭제

const characters = ['짱구', '훈이', '철수', '수지', '짱아']
console.log(characters.splice(0, 3)); // [ '짱구', '훈이', '철수' ]
console.log(characters); // [ '수지', '짱아' ]


2. slice

slice(i, j) : i부터 j-1까지 삭제

splice와 유사하지만 원래 배열 변경 x

const characters = ['수지', '짱아']
console.log(characters.slice(0, 1)); // [ '수지' ]
console.log(characters); // [ '수지', '짱아' ] 


3. concat

해당 array를 변경하지는 않되, 요소를 추가한 새로운 array를 만들어 반환

const characters = ['수지', '짱아']
console.log(characters.concat('맹구')); // [ '수지', '짱아', '맹구' ]
console.log(characters); // [ '수지', '짱아' ]


4. Spread Operators

스프레드 연산자를 이용하면 배열을 복사할 수 있다.

const characters = [ '짱구', '훈이', '철수', '수지', '짱아' ]

let characters2 = [
    ...characters,
] 
console.log(characters2);
// [ '짱구', '훈이', '철수', '수지', '짱아' ]
// characters의 모든 값이 펼쳐져서 새로운 배열 characters2에 들어간다.

let characters3 = [
    characters,
]
console.log(characters3);
// [ [ '짱구', '훈이', '철수', '수지', '짱아' ] ]

let characters4 = characters;
console.log(characters4 === characters); 
// true. 즉 새로운 array가 아니라, 메모리 공간이 같은 것..!


5. join

배열을 문자열로 만들어준다. 인수 전달 안하면 쉼표로 합쳐진다.

const characters = [ '짱구', '훈이', '철수', '수지', '짱아' ];
console.log(characters.join());
// comma 기준으로 모든 요소 합친다.
// 짱구,훈이,철수,수지,짱아
console.log(characters.join('/'));
// 짱구/훈이/철수/수지/짱아


6. sort

배열을 정렬하며 배열 자체가 변경된다.

const characters = [ '짱구', '훈이', '철수', '수지', '짱아' ];
characters.sort();
console.log(characters);
// [ '수지', '짱구', '짱아', '철수', '훈이' ]

sort 내부에 함수를 넣을 수 있다.

두 개의 파라미터 a, b에 대해서 a와 b를 비교할 때 a를 b보다 뒤에 두려면 0보다 큰 숫자 반환, a를 b보다 앞에 두려면 0보다 작은숫자 반환, 원래순서 그대로 두려면 0을 반환한다.

let numbers = [1,9,7,5,3]
numbers.sort((a, b)=>{
    return a > b ? 1 : -1;
});
// [ 1, 3, 5, 7, 9 ]

numbers.sort((a,b)=>{
    return a > b ? -1 : 1;
});
// [ 9, 7, 5, 3, 1 ]


7. reverse

배열을 역순으로 재정렬

const characters = [ '짱구', '훈이', '철수', '수지', '짱아' ];
characters.reverse();
console.log(characters);
//[ '훈이', '철수', '짱아', '짱구', '수지' ]


8. map

함수를 받아 특정기능 수행 후 새 배열 반환

const blackpink = ['jenny', 'jisoo', 'rose', 'lisa'];
console.log(blackpink.map((x)=>{
    if (x==='jenny') {
        return `blackpink:${x}`;
    } else {
        return x;
    }
}))
// [ 'blackpink:jenny', 'jisoo', 'rose', 'lisa' ]


9. filter

조건을 만족하는 모든 요소를 배열로 반환

const integers = [1, 8, 7, 6, 3];
console.log(integers.filter((x)=> x%2===0));
// [ 8, 6 ]


10. find

filter는 조건을 만족하는 모든 값을 찾지만, find는 해당 조건에 맞는 첫 값만 반환한다.

const integers = [1, 8, 7, 6, 3];
console.log(integers.find((x)=> x%2===0)); // 8


11. findIndex

find 함수와 동일하되, 인덱스를 반환한다.

const integers = [1, 8, 7, 6, 3];
 console.log(integers.findIndex((x)=>x%2===0)); // 1


12. reduce

array.reduce((p,n) => ~, i))

배열의 원소가 n(next)에 하나씩 들어가며, 기존 loop에서 반환한 값이 p (previous)에 들어가게 된다. 처음 loop에서 p에 들어갈 값은 초기값 i이다.

const integers = [1, 8, 7, 6, 3];
console.log(integers.reduce((p, n) => previous + next, 0));
// 25

0개의 댓글