[JavaScript] 배열을 다루는 다양한 메소드 💽

📜 들어가며

 

매일매일 JS를 사용해서 개발을 하고 있지만, 배열의 메소드들의 의미가 혼동되어 이를 바로잡고자 이번 포스팅을 진행하게 되었습니다! 모든 메소드를 정리하지는 않았고 많이 사용되는 메소드 위주로 작성했습니다 👨‍💻

 

 

✅ 배열 생성

• Array.from(): 유사 배열 객체나 반복 가능한 객체를 배열로 변환합니다.
• Array.isArray(): 주어진 값이 배열인지 확인합니다.

// Array.from()
const str = "hello";
const arrFromStr = Array.from(str); // ['h', 'e', 'l', 'l', 'o']

// Array.isArray()
console.log(Array.isArray(arrFromStr)); // true

 

 

✅ 데이터 추가/제거

• push(): 배열의 끝에 하나 이상의 요소를 추가하고 새로운 길이를 반환합니다.
• pop(): 배열의 마지막 요소를 제거하고, 제거한 요소를 반환합니다.
• unshift(): 배열의 앞에 하나 이상의 요소를 추가하고, 새로운 길이를 반환합니다.
• shift(): 배열의 첫 번째 요소를 제거하고, 제거한 요소를 반환합니다.
• splice(): 특정 위치에 요소를 추가하거나 제거합니다. arr.splice(시작 인덱스, 삭제할 개수, 추가할 요소들) 형태로 사용합니다.

// push() & pop()
const arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
arr.pop(); // [1, 2, 3]

// unshift() & shift()
arr.unshift(0); // [0, 1, 2, 3]
arr.shift(); // [1, 2, 3]

// splice()
arr.splice(1, 1, 5); // [1, 5, 3] (1번 인덱스에 있는 2를 5로 대체)

 

 

✅ 배열 검색/검사

• indexOf(): 주어진 값의 첫 번째 인덱스를 반환하고, 값이 없으면 -1을 반환합니다.
• lastIndexOf(): 주어진 값의 마지막 인덱스를 반환합니다.
• includes(): 배열에 특정 요소가 포함되어 있는지 검사하여 true 또는 false를 반환합니다.
• find(): 콜백 함수의 조건을 만족하는 첫 번째 요소를 반환하고, 없다면 undefined를 반환합니다.
• findIndex(): 조건을 만족하는 첫 번째 요소의 인덱스를 반환하고, 없다면 -1을 반환합니다.

const nums = [10, 20, 30, 20, 40];

// indexOf() & lastIndexOf()
console.log(nums.indexOf(20)); // 1
console.log(nums.lastIndexOf(20)); // 3

// includes()
console.log(nums.includes(30)); // true

// find() & findIndex()
const found = nums.find(num => num > 25); // 30
const foundIndex = nums.findIndex(num => num > 25); // 2

 

 

✅ 배열 변환

• map(): 배열의 각 요소에 콜백 함수를 적용하여 새로운 배열을 반환합니다.
• filter(): 콜백 함수의 조건을 만족하는 모든 요소로 새로운 배열을 반환합니다.
• reduce(): 배열의 각 요소에 대해 콜백 함수를 실행하여 단일 누적 값을 반환합니다.
• flat(): 다차원 배열을 지정한 깊이까지 평탄화하여 새로운 배열로 반환합니다.
• flatMap(): map() 메소드 후에 flat()을 1단계로 수행하는 것과 동일합니다.

const numbers = [1, 2, 3, 4];

// map()
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8]

// filter()
const even = numbers.filter(num => num % 2 === 0); // [2, 4]

// reduce()
const sum = numbers.reduce((acc, curr) => acc + curr, 0); // 10 (0은 초깃값을 의미)

// flat()
const nested = [1, [2, [3, 4]]];
const flattened = nested.flat(2); // [1, 2, 3, 4]

// flatMap()
const phrases = ["hello world", "how are you"];
const words = phrases.flatMap(phrase => phrase.split(" ")); // ['hello', 'world', 'how', 'are', 'you']

 

 

✅ 배열 정렬/반전

• sort(): 배열을 정렬하고, 원본 배열을 수정합니다.
• reverse(): 배열의 순서를 반대로 바꾸고, 원본 배열을 수정합니다.

const letters = ['d', 'a', 'c', 'b'];

// sort()
letters.sort(); // ['a', 'b', 'c', 'd']

// reverse()
letters.reverse(); // ['d', 'c', 'b', 'a']

 

 

✅ 배열 병합/복사

• concat(): 두 개 이상의 배열을 병합하여 새 배열을 반환합니다.
• slice(): 배열의 일부분을 추출하여 새로운 배열로 반환합니다. arr.slice(시작 인덱스, 끝 인덱스) 형태로 사용합니다.
• copyWithin(): 배열 내부에서 요소들을 복사하여 다른 위치에 덮어쓰고, 배열의 길이는 변경하지 않습니다.

const arr1 = [1, 2];
const arr2 = [3, 4];

// concat()
const merged = arr1.concat(arr2); // [1, 2, 3, 4]

// slice()
const sliced = merged.slice(1, 3); // [2, 3]

// copyWithin()
const arr3 = [10, 20, 30, 40];
arr3.copyWithin(2, 0); // [10, 20, 10, 20]

 

 

✅ 배열 반복

• forEach(): 배열의 각 요소에 대해 함수를 실행합니다. 반환 값이 없고, 반복만 수행합니다.
• some(): 배열의 요소 중 하나라도 콜백 함수의 조건을 만족하면 true를 반환합니다.
• every(): 배열의 모든 요소가 조건을 만족해야만 true를 반환합니다.

const arr4 = [1, 2, 3, 4];

// forEach()
arr4.forEach(num => console.log(num * 2)); // 2, 4, 6, 8

// some()
const hasEven = arr4.some(num => num % 2 === 0); // true

// every()
const allPositive = arr4.every(num => num > 0); // true

 

 

✅ 원본 배열을 변경하는 메소드

• push(): 배열의 끝에 요소를 추가 → 원본 배열 변경
• pop(): 배열의 마지막 요소를 제거 → 원본 배열 변경
• unshift(): 배열의 앞에 요소를 추가 → 원본 배열 변경
• shift(): 배열의 첫 번째 요소를 제거 → 원본 배열 변경
• splice(): 지정한 위치에서 요소를 추가 또는 제거 → 원본 배열 변경
• sort(): 배열을 정렬 → 원본 배열 변경
• reverse(): 배열을 반대로 정렬 → 원본 배열 변경
• copyWithin(): 배열의 요소를 다른 위치로 복사 → 원본 배열 변경

 

 

✅ 원본 배열을 변경하지 않는 메소드

• concat(): 배열을 병합하여 새로운 배열을 반환 → 원본 배열 변경 없음
• slice(): 배열의 일부를 복사하여 새로운 배열을 반환 → 원본 배열 변경 없음
• map(): 각 요소에 대해 콜백을 실행하여 새로운 배열을 반환 → 원본 배열 변경 없음
• filter(): 조건에 맞는 요소로 새 배열을 반환 → 원본 배열 변경 없음
• reduce(): 각 요소에 대해 콜백을 실행하여 단일 값을 반환 → 원본 배열 변경 없음
• flat(): 다차원 배열을 평탄화하여 새 배열 반환 → 원본 배열 변경 없음
• flatMap(): 각 요소에 대해 콜백 실행 후 평탄화하여 새 배열 반환 → 원본 배열 변경 없음
• forEach(): 각 요소에 대해 콜백을 실행 (반환값 없음) → 원본 배열 변경 없음
• some(): 배열의 일부 요소가 조건에 맞는지 여부 반환 → 원본 배열 변경 없음
• every(): 모든 요소가 조건에 맞는지 여부 반환 → 원본 배열 변경 없음
• indexOf(), lastIndexOf(), includes(), find(), findIndex(): 특정 요소 검색 후 결과 반환 → 원본 배열 변경 없음

 

 

📝 참고자료 

 

mdn array: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array