[JS] 배열 메소드(Array Method) 총정리

안녕하세요. 오늘은 유튜브 코드팩토리님의 자바스크립트 강의 영상을 참고하여 JS의 배열 메소드 종류에 대해 좀 더 자세히 작성해보도록 하겠습니다.

 

 

 

요소 추가 및 삭제

push(요소1, 요소2, ...)

• 배열의 마지막에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환

let iveMembers = ['안유진', '가을', '레이', '장원영', '리즈', '이서];

console.log(iveMembers.push('코드팩토리')); // 7
console.log(iveMembers); // [ '안유진', '가을', '레이', '장원영', '리즈', '이서', '코드팩토리' ]

 

pop()

• 배열의 마지막 요소를 제거하고 제거된 요소를 반환

console.log(iveMembers.pop()); // 코드팩토리
console.log(iveMembers); // [ '안유진', '가을', '레이', '장원영', '리즈', '이서' ]

 

shift()

• 배열의 첫 번째 요소를 제거하고 제거된 요소를 반환

console.log(iveMembers.shift()); // '안유진'
console.log(iveMembers); // [ '가을', '레이', '장원영', '리즈', '이서' ]

 

unshift(요소1, 요소2, ...)

• 배열의 시작 부분에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환

console.log(iveMembers.unshift('안유진')); // 6
console.log(iveMembers); // [ '안유진', '가을', '레이', '장원영', '리즈', '이서' ]

 

 

 

조작 및 생성

splice(시작 인덱스, 삭제할 개수, 추가할 요소1, 추가할 요소2, ...)

• 배열의 특정 위치에서 요소를 제거하거나 새로운 요소를 추가(원래 배열을 변경)
• 제거될 요소를 반환

console.log(iveMembers.splice(0, 3)); // [ '안유진', '가을', '레이' ]
console.log(iveMembers); // [ '장원영', '리즈', '이서' ]

 

concat(배열 또는 요소1, 요소2, ...)

• 기존 배열을 변경하지 않고 새로운 배열을 결합하여 반환
• 밑에 코드에서 concat()은 새로운 array를 만들어서 반환하였음('코드팩토리'가 붙은 완전 새로운 array를 반환해준거임!)

let iveMembers = ['안유진', '가을', '레이', '장원영', '리즈', '이서'];

console.log(iveMembers.concat('코드팩토리')); // [ '안유진', '가을', '레이', '장원영', '리즈', '이서', '코드팩토리' ]
console.log(iveMembers); // [ '안유진', '가을', '레이', '장원영', '리즈', '이서' ]

 

slice(시작 인덱스, 끝 인덱스)

• 배열의 일부를 추출하여 새로운 배열로 반환(원래 배열은 변경되지 않음)
• 추출할 요소를 반환
• splice()와 비슷하나 slice()는 원래 array가 변경되지 않음

console.log(iveMembers.slice(0, 3)); // [ '안유진', '가을', '레이' ]
console.log(iveMembers); // [ '안유진', '가을', '레이', '장원영', '리즈', '이서' ]

 

※ (+ 추가 내용) 스프레드 연산자(...배열)

• 배열의 모든 요소를 펼쳐서(리스트([]를 벗겨냄) 복사하거나 결합할 때 사용

let iveMembersCopy1 = [...iveMembers];
console.log(iveMembersCopy1); // [ '안유진', '가을', '레이', '장원영', '리즈', '이서' ]
console.log(iveMembersCopy1 === iveMembers); // false

let iveMembersCopy2 = [iveMembers];
console.log(iveMembersCopy1); // [[ '안유진', '가을', '레이', '장원영', '리즈', '이서' ]], 리스트 안의 리스트
console.log(iveMembersCopy2 === iveMembers); // false

let iveMembersCopy3 = iveMembers;
console.log(iveMembersCopy3); // [ '안유진', '가을', '레이', '장원영', '리즈', '이서' ]
console.log(iveMembersCopy3 === iveMembers); // true

 

 

 

값 변환 및 조회

join(구분자)

• 배열의 모든 요소를 문자열로 반환하고 지정된 구분자로 연결하여 반환함
• 구분자를 지정하지 않으면 기본적으로 콤마(,)가 사용됨

console.log(iveMembers.join()); // 안유진,가을,레이,장원영,리즈,이서
console.log(typeof iveMembers.join()); // string

console.log(iveMembers.join('/')); // 안유진/가을/레이/장원영/리즈/이서
console.log(iveMembers.join(', ')); // 안유진, 가을, 레이, 장원영, 리즈, 이서

 

sort(정렬 함수)

• 배열의 요소를 정렬
• 기본적으로 오름차순으로 정렬되며 원래 배열을 변경함

iveMembers.sort();
console.log(iveMembers); // [ '가을', '레이', '리즈', '안유진', '이서', '장원영' ]

let numberArray = [1, 9, 7, 5, 3];

numberArray.sort((a, b) => {
    return a > b ? 1 : -1;
});

console.log(numberArray);

/*
a, b를 비교했을 때

1) a를 b보다 나중에 정렬하려면 (뒤에 두려면) 0보다 큰 숫자를 반환
2) a를 b보다 먼저 정렬하려면 (앞에 두려면) 0보다 작은 숫자를 반환
3) 원래 순서를 그대로 두려면 0을 반환
*/

 

reverse()

• 배열의 순서를 반대로 뒤집음. 원래 배열을 변경함

iveMembers.reverse();
console.log(iveMembers); // [ '장원영', '이서', '안유진', '리즈', '레이', '가을' ]

 

 

 

탐색 및 변환

map(콜백 함수)

• 배열의 모든 요소를 순회하며 주어진 함수에 따라 변형한 새로운 배열을 반환

console.log(iveMembers.map((x) => x)); // [ '장원영', '이서', '안유진', '리즈', '레이', '가을' ]
console.log(iveMembers.map((x) => `아이브: ${x}`));
// [ '아이브: 장원영', '아이브: 이서', '아이브: 안유진', '아이브: 리즈', '아이브: 레이', '아이브: 가을' ]

console.log(iveMembers.map((x) => {
    if(x === '안유진') {
        return `아이브: ${x}`;
    } else {
        return x;
    }
})); // [ '장원영', '이서', '아이브: 안유진', '리즈', '레이', '가을' ]

console.log(iveMembers); //  ['장원영', '이서', '안유진', '리즈', '레이', '가을'], 실제 iveMember는 변경되지 않음

 

filter(조건을 확인하는 콜백 함수)

• 조건에 맞는 배열의 모든 요소를 새로운 배열로 반환

let numbers = [1, 8, 7, 6, 3];

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

 

find(조건을 확인하는 콜백 함수)

• 조건에 맞는 첫 번째 요소를 반환하며, 없으면 'undefined'를 반환. 찾게 되면 뒤에껀 안봄

console.log(numbers.find((x) => x % 2 === 0)); // 8

 

findIndex(조건을 확인하는 콜백 함수)

• 조건에 맞는 첫 번째 요소의 인덱스를 반환하며 없으면 '-1'을 반환

console.log(numbers.findIndex((x) => x % 2 === 0)); // 1

 

reduce(누적자와 현재 값을 처리하는 콜백 함수, 초기값)

• 배열을 순회하며 누적된 값을 계산하여 반환

console.log(numbers.reduce((p, n) => p+n , 0)); // 25
/* 
n에 numbers의 값이 하나씩 들어가고 기존 loop에서 반환한 값이 p에 들어감
0부터 시작이고 처음 loop가 실행될 때는 p에 0이 들어가는거임

1. 초기값인 0이 p에 입력된다.
2. numbers 어레이의 첫 번째 값인 1이 n에 입력된다.
3. p + n 즉, 0 + 1의 결과값인 1이 반환된다.
4. 3에서 반환한 값(1)이 p에 입력된다.
5. 어레이의 두 번째 값인 8이 n에 입력된다.
6. p + n 즉, 1 + 8의 결과값인 9가 반환된다.
7. 6에서 반환한 값(9)이 p에 입력된다.
8. numbers 리스트의 모든 값들을 다 순회할 때까지 반복
   결국 모든 값을 다 더한 25가 반환된다.
*/