JS - 자바스크립트 배열(Array) 모든 문법 사용법

자바스크립트 배열(Array)은 여러 개의 값을 하나의 변수에 저장할 수 있는 객체입니다. 배열은 숫자 인덱스를 사용하여 요소에 접근하며, 다양한 메서드를 제공하여 데이터를 효율적으로 관리할 수 있습니다.

 

배열 39가지의 인스턴스 메서드 사용법

 

1. push()와 pop(): 배열의 끝에서 요소 추가/제거

push()는 배열의 끝에 새로운 요소를 추가하고, pop()은 마지막 요소를 제거합니다.
예를 들어, 친구 리스트에 새 친구를 추가하거나 마지막 친구를 제거할 때 사용할 수 있어요.

let friends = ['철수', '영희'];
friends.push('민수'); // '민수'를 배열 끝에 추가
console.log(friends); // ['철수', '영희', '민수']

let lastFriend = friends.pop(); // 마지막 요소 '민수' 제거
console.log(lastFriend); // '민수'
console.log(friends); // ['철수', '영희']

 

 

2. shift()와 unshift(): 배열의 앞에서 요소 추가/제거

shift()는 배열의 첫 번째 요소를 제거하고, unshift()는 배열의 앞에 새로운 요소를 추가합니다.
예를 들어, 줄서기에서 가장 앞 사람이 나가거나 새 사람이 앞에 설 때 사용할 수 있어요.

let queue = ['철수', '영희'];
queue.unshift('민수'); // '민수'를 배열 앞에 추가
console.log(queue); // ['민수', '철수', '영희']

let firstPerson = queue.shift(); // 첫 번째 요소 '민수' 제거
console.log(firstPerson); // '민수'
console.log(queue); // ['철수', '영희']

 

 

3. slice(): 배열의 일부분 잘라내기

slice()는 배열의 특정 부분을 잘라서 새로운 배열로 반환합니다.
예를 들어, 과일 리스트에서 일부만 가져오고 싶을 때 사용할 수 있어요.

let fruits = ['사과', '바나나', '오렌지', '포도'];
let someFruits = fruits.slice(1, 3); // 인덱스 1부터 3 전까지 잘라냄
console.log(someFruits); // ['바나나', '오렌지']

 

 

4. splice(): 배열의 요소 추가, 제거, 교체

splice()는 배열의 특정 위치에서 요소를 추가, 제거, 교체할 수 있습니다.
예를 들어, 친구 리스트에서 특정 친구를 제거하거나 새 친구를 추가할 때 사용할 수 있어요.

let friends = ['철수', '영희', '민수'];
friends.splice(1, 1, '지민'); // 인덱스 1에서 1개 제거하고 '지민' 추가
console.log(friends); // ['철수', '지민', '민수']

 

 

5. map(): 배열의 모든 요소를 변환

map()은 배열의 각 요소에 함수를 적용하여 새로운 배열을 만듭니다.
예를 들어, 숫자 배열의 모든 요소를 2배로 만들고 싶을 때 사용할 수 있어요.

let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2); // 각 요소를 2배로 변환
console.log(doubled); // [2, 4, 6]

 

 

6. filter(): 조건에 맞는 요소만 필터링

filter()는 조건을 만족하는 요소만 새로운 배열로 반환합니다.
예를 들어, 점수 리스트에서 합격한 점수만 추출하고 싶을 때 사용할 수 있어요.

let scores = [80, 45, 90, 60];
let passed = scores.filter(score => score >= 60); // 60점 이상만 필터링
console.log(passed); // [80, 90, 60]

 

 

7. reduce(): 배열의 요소를 하나로 줄이기

reduce()는 배열의 모든 요소를 누적하여 하나의 값으로 줄입니다.
예를 들어, 숫자 배열의 총합을 계산하고 싶을 때 사용할 수 있어요.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, num) => acc + num, 0); // 모든 요소의 합 계산
console.log(sum); // 10

 

 

8. forEach(): 배열의 각 요소에 함수 실행

forEach()는 배열의 각 요소에 대해 함수를 실행합니다.
예를 들어, 각 학생들의 점수를 출력할 때 사용할 수 있어요.

// 학생들의 점수를 배열로 저장
let scores = [85, 90, 78, 92, 88];

// 각 점수를 출력하는 forEach 문
scores.forEach((score, index) => {
  console.log(`학생 ${index + 1}의 점수: ${score}`);
});

// 출력 결과:
// 학생 1의 점수: 85
// 학생 2의 점수: 90
// 학생 3의 점수: 78
// 학생 4의 점수: 92
// 학생 5의 점수: 88

 

 

9. find()와 findIndex(): 조건에 맞는 요소 찾기

find()는 조건을 만족하는 첫 번째 요소를 반환하고, findIndex()는 그 요소의 인덱스를 반환합니다.
예를 들어, 친구 리스트에서 특정 친구를 찾을 때 사용할 수 있어요.

let friends = ['철수', '영희', '민수'];
let found = friends.find(friend => friend === '영희'); // '영희' 찾기
console.log(found); // '영희'

let index = friends.findIndex(friend => friend === '영희'); // '영희'의 인덱스 찾기
console.log(index); // 1

 

 

10. includes(): 배열에 특정 요소가 있는지 확인

includes()는 배열이 특정 요소를 포함하는지 확인합니다.
예를 들어, 친구 리스트에 특정 친구가 있는지 확인할 때 사용할 수 있어요.

let friends = ['철수', '영희', '민수'];
let hasFriend = friends.includes('영희'); // '영희'가 있는지 확인
console.log(hasFriend); // true

 

 

11. join(): 배열의 요소를 문자열로 합치기

join()은 배열의 모든 요소를 하나의 문자열로 합칩니다.
예를 들어, 친구 리스트를 쉼표로 구분된 문자열로 만들고 싶을 때 사용할 수 있어요.

let friends = ['철수', '영희', '민수'];
let friendString = friends.join(', '); // 요소를 쉼표로 구분하여 문자열로 합침
console.log(friendString); // "철수, 영희, 민수"

 

 

12. reverse(): 배열의 순서를 뒤집기

reverse()는 배열의 요소 순서를 뒤집습니다.
예를 들어, 숫자 배열을 역순으로 정렬하고 싶을 때 사용할 수 있어요.

let numbers = [1, 2, 3, 4];
numbers.reverse(); // 배열의 순서를 뒤집음
console.log(numbers); // [4, 3, 2, 1]

 

 

13. sort(): 배열의 요소를 정렬하기

sort()는 배열의 요소를 정렬합니다. 기본적으로는 문자열 순서로 정렬되지만, 숫자 정렬을 위해 비교 함수를 사용할 수도 있어요.

let numbers = [3, 1, 4, 1, 5];
numbers.sort(); // 기본 정렬 (문자열 순서)
console.log(numbers); // [1, 1, 3, 4, 5]

numbers.sort((a, b) => a - b); // 숫자 오름차순 정렬
console.log(numbers); // [1, 1, 3, 4, 5]

 

 

14. every()와 some(): 조건 검사

every()는 배열의 모든 요소가 조건을 만족하는지 확인하고, some()은 일부 요소가 조건을 만족하는지 확인합니다.
예를 들어, 모든 점수가 합격점인지, 또는 일부 점수가 합격점인지 확인할 때 사용할 수 있어요.

let scores = [80, 90, 70, 85];
let allPassed = scores.every(score => score >= 60); // 모든 점수가 60점 이상인지 확인
console.log(allPassed); // true

let somePassed = scores.some(score => score >= 90); // 일부 점수가 90점 이상인지 확인
console.log(somePassed); // true

 

 

15. flat(): 다차원 배열을 평탄화하기

flat()은 다차원 배열을 평탄화하여 1차원 배열로 만듭니다.
예를 들어, 중첩된 배열을 단일 배열로 만들고 싶을 때 사용할 수 있어요.

let nestedArray = [1, [2, [3, 4]]];
let flatArray = nestedArray.flat(2); // 2단계까지 평탄화
console.log(flatArray); // [1, 2, 3, 4]

 

 

16. flatMap(): 매핑 후 평탄화

flatMap()은 각 요소에 함수를 적용한 후 결과를 평탄화합니다.
예를 들어, 각 요소를 2배로 만들고 평탄화하고 싶을 때 사용할 수 있어요.

let numbers = [1, 2, 3];
let result = numbers.flatMap(num => [num, num * 2]); // 각 요소를 2배로 만들고 평탄화
console.log(result); // [1, 2, 2, 4, 3, 6]

 

 

17. at(): 특정 인덱스의 요소 가져오기

at()은 배열의 특정 인덱스에 있는 요소를 반환합니다. 음수 인덱스도 지원하므로, 마지막 요소를 쉽게 가져올 수 있어요.

let fruits = ['사과', '바나나', '오렌지'];
let lastFruit = fruits.at(-1); // 마지막 요소 가져오기
console.log(lastFruit); // '오렌지'

 

 

18. toReversed(), toSorted(), toSpliced(): 원본 배열 변경 없이 작업

이 메서드들은 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.
예를 들어, 배열을 정렬하거나 역순으로 만들 때 원본 배열을 유지하고 싶을 때 사용할 수 있어요.

let numbers = [3, 1, 2];
let sorted = numbers.toSorted(); // 정렬된 새 배열
console.log(sorted); // [1, 2, 3]
console.log(numbers); // [3, 1, 2] (원본 배열은 그대로)

 

 

19. with(): 특정 인덱스의 요소 교체

with()는 원본 배열을 변경하지 않고 특정 인덱스의 요소를 교체한 새 배열을 반환합니다.
예를 들어, 배열의 특정 요소를 바꾸고 싶을 때 사용할 수 있어요.

let fruits = ['사과', '바나나', '오렌지'];
let newFruits = fruits.with(1, '포도'); // 인덱스 1의 요소를 '포도'로 교체
console.log(newFruits); // ['사과', '포도', '오렌지']
console.log(fruits); // ['사과', '바나나', '오렌지'] (원본 배열은 그대로)

 

 

20. entries(), keys(), values(): 배열의 이터레이터 생성

이 메서드들은 배열의 인덱스와 값을 반환하는 이터레이터를 생성합니다.
예를 들어, 배열의 인덱스와 값을 함께 사용하고 싶을 때 활용할 수 있어요.

let fruits = ['사과', '바나나', '오렌지'];
let entries = fruits.entries(); // 인덱스와 값을 쌍으로 반환
for (let [index, value] of entries) {
    console.log(index, value); // 0 '사과', 1 '바나나', 2 '오렌지'
}

let keys = fruits.keys(); // 인덱스만 반환
for (let key of keys) {
    console.log(key); // 0, 1, 2
}

let values = fruits.values(); // 값만 반환
for (let value of values) {
    console.log(value); // '사과', '바나나', '오렌지'
}

 

 

21. fill(): 배열의 특정 범위를 값으로 채우기

fill()은 배열의 특정 범위를 지정한 값으로 채웁니다.
예를 들어, 배열을 특정 값으로 초기화하고 싶을 때 사용할 수 있어요.

let numbers = [1, 2, 3, 4, 5];
numbers.fill(0, 1, 3); // 인덱스 1부터 3 전까지 0으로 채움
console.log(numbers); // [1, 0, 0, 4, 5]

 

 

22. copyWithin(): 배열 내부의 요소 복사

copyWithin()은 배열 내부의 요소를 복사하여 다른 위치에 붙여넣습니다.
예를 들어, 배열의 일부를 복사하여 다른 위치에 사용하고 싶을 때 활용할 수 있어요.

let numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(0, 3); // 인덱스 3부터의 요소를 인덱스 0에 복사
console.log(numbers); // [4, 5, 3, 4, 5]

 

 

23. reduceRight(): 오른쪽부터 누적 계산

reduceRight()는 배열의 오른쪽부터 시작하여 누적 계산을 수행합니다.
예를 들어, 배열의 요소를 오른쪽부터 더하고 싶을 때 사용할 수 있어요.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduceRight((acc, num) => acc + num, 0); // 오른쪽부터 누적 합계
console.log(sum); // 10 (4 + 3 + 2 + 1)

 

 

24. findLast()와 findLastIndex(): 조건에 맞는 마지막 요소 찾기

findLast()는 조건을 만족하는 마지막 요소를 반환하고, findLastIndex()는 그 요소의 인덱스를 반환합니다.
예를 들어, 배열에서 마지막으로 조건을 만족하는 요소를 찾고 싶을 때 사용할 수 있어요.

let numbers = [1, 2, 3, 4, 3];
let lastFound = numbers.findLast(num => num === 3); // 마지막으로 3인 요소 찾기
console.log(lastFound); // 3

let lastIndex = numbers.findLastIndex(num => num === 3); // 마지막으로 3인 요소의 인덱스 찾기
console.log(lastIndex); // 4

 

 

25. toLocaleString(): 지역화된 문자열로 변환

toLocaleString()은 배열의 요소를 지역화된 문자열로 변환합니다.
예를 들어, 숫자를 지역화된 형식으로 표시하고 싶을 때 사용할 수 있어요.

let numbers = [1000, 2000, 3000];
let localeString = numbers.toLocaleString(); // 지역화된 문자열로 변환
console.log(localeString); // "1,000, 2,000, 3,000" (지역에 따라 다를 수 있음)

 

 

26. toString(): 배열을 문자열로 변환

toString()은 배열의 모든 요소를 쉼표로 구분된 문자열로 변환합니다.
예를 들어, 배열을 간단한 문자열로 표현하고 싶을 때 사용할 수 있어요.

let fruits = ['사과', '바나나', '오렌지'];
let string = fruits.toString(); // 배열을 문자열로 변환
console.log(string); // "사과,바나나,오렌지"

 

 

27. Array.isArray(): 배열인지 확인

Array.isArray()는 값이 배열인지 확인합니다.
예를 들어, 변수가 배열인지 확인하고 싶을 때 사용할 수 있어요.

let arr = [1, 2, 3];
let isArray = Array.isArray(arr); // 배열인지 확인
console.log(isArray); // true

 

 

28. Array.from(): 유사 배열을 배열로 변환

Array.from()은 유사 배열 객체나 이터러블을 배열로 변환합니다.
예를 들어, 문자열을 배열로 변환하고 싶을 때 사용할 수 있어요.

let str = 'hello';
let arr = Array.from(str); // 문자열을 배열로 변환
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

 

 

29. Array.of(): 주어진 인수로 배열 생성

Array.of()는 주어진 인수로 새로운 배열을 생성합니다.
예를 들어, 단일 숫자로 배열을 만들고 싶을 때 사용할 수 있어요.

let arr = Array.of(7); // 단일 요소 7을 가진 배열 생성
console.log(arr); // [7]

 

 

30. Array.prototype@@iterator: 이터레이터 반환

이 메서드는 배열의 이터레이터를 반환합니다.
배열의 @@iterator 메서드는 [Symbol.iterator]를 통해 접근할 수 있으며, 이는 이터레이터 객체를 반환합니다.

let arr = [10, 20, 30];
let iterator = arr[Symbol.iterator](); // 배열 이터레이터 생성

console.log(iterator.next()); // { value: 10, done: false }
console.log(iterator.next()); // { value: 20, done: false }
console.log(iterator.next()); // { value: 30, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

 

동작설명

1. arr[Symbol.iterator]()를 호출하면 배열의 이터레이터 객체가 반환됩니다.
2. iterator.next()를 호출할 때마다 배열의 다음 요소를 반환합니다.

3. 반환된 객체는 { value: 요소값, done: 불리언값 } 형태입니다.

• value: 현재 요소의 값
• done: 요소를 모두 순회하면 true, 아직 남아있으면 false

4. 배열을 끝까지 순회하면 value는 undefined, done은 true가 됩니다.

 

for...of 문과 @@iterator
배열은 기본적으로 for...of 문을 사용할 수 있으며, 이는 내부적으로 @@iterator를 활용합니다.

let arr = [10, 20, 30];
for (let value of arr) {
  console.log(value);
}
// 출력:
// 10
// 20
// 30

 

 

Array.prototype[@@iterator]의 활용

이터레이터는 수동으로 next()를 호출하여 순회할 수도 있지만, for...of 문이나 스프레드 연산자(...)와 같은 기능과 함께 사용할 수도 있습니다.

let arr = [1, 2, 3];
let iter = arr[Symbol.iterator]();

console.log([...iter]); // [1, 2, 3]

 

이터레이터 객체는 한 번 사용되면 재사용할 수 없으므로, 다시 순회하려면 새로운 이터레이터를 생성해야 합니다.

let arr = [5, 10, 15];
let iter = arr[Symbol.iterator]();

console.log(iter.next()); // { value: 5, done: false }
console.log(iter.next()); // { value: 10, done: false }
console.log([...iter]); // [15]

위 코드에서 iter.next()를 두 번 호출한 후 남은 값만 [...iter]에 의해 배열로 변환됩니다.

 

 

31. Array.prototype@@unscopables: 스코프에서 제외할 속성

Array.prototype[@@unscopables]는 with 문에서 특정 배열 메서드를 스코프에서 제외할 수 있도록 도와주는 객체입니다. 즉, with 문을 사용할 때 특정 메서드가 프로퍼티 탐색에서 제외되도록 설정할 수 있습니다.

 

Array.prototype[@@unscopables] 사용법

배열의 @@unscopables 속성은 Symbol.unscopables을 통해 접근할 수 있으며, 특정 메서드를 true로 설정하면 with 문에서 해당 메서드를 찾지 못하게 됩니다.

let arr = [1, 2, 3];
console.log(arr[Symbol.unscopables]);
/* 출력 예시 (브라우저에 따라 다를 수 있음):
{
  copyWithin: true,
  entries: true,
  fill: true,
  find: true,
  findIndex: true,
  keys: true,
  values: true
}
*/

 

with 문과 @@unscopables

let arr = [1, 2, 3];
with (arr) {
  console.log(find); // ReferenceError: find is not defined
}

 

@@unscopables 속성 변경

사용자가 직접 @@unscopables 값을 수정하여 특정 메서드를 스코프에서 제외할 수도 있습니다.

let arr = [1, 2, 3];
arr[Symbol.unscopables].push = true;

with (arr) {
  console.log(push); // ReferenceError: push is not defined
}

 

동작 설명

1. arr[Symbol.unscopables]은 배열의 특정 메서드를 with 문에서 제외하는 객체입니다.
2. 기본적으로 find, findIndex, fill 등의 메서드가 제외되어 있습니다.
3. push 메서드를 true로 설정하면 with (arr) 블록 내에서 push를 찾을 수 없게 됩니다.

Array.prototype[@@unscopables]은 with 문을 사용할 때 특정 메서드를 제외할 수 있도록 도와줍니다. 이는 with 문이 스코프 체인 탐색을 수행할 때 불필요한 메서드를 제거하여 혼동을 줄이는 데 유용할 수 있습니다. 그러나 with 문 자체가 일반적으로 권장되지 않으므로, @@unscopables를 직접 사용할 일은 거의 없지만, 동작 원리를 이해하는 것은 중요합니다.

 

 

32. Array.prototype.group(): 그룹화

group()은 배열의 요소를 그룹화하여 객체로 반환합니다.
예를 들어, 점수를 등급별로 그룹화하고 싶을 때 사용할 수 있어요.

let scores = [80, 95, 70, 85];
let grouped = scores.group(score => {
    return score >= 90 ? 'A' : score >= 80 ? 'B' : 'C';
});
console.log(grouped); // { B: [80, 85], A: [95], C: [70] }

 

 

33. Array.prototype.groupToMap(): 그룹화하여 Map으로 반환

groupToMap()은 배열의 요소를 그룹화하여 Map 객체로 반환합니다.
예를 들어, 점수를 등급별로 그룹화하고 Map으로 관리하고 싶을 때 사용할 수 있어요.

let scores = [80, 95, 70, 85];
let groupedMap = scores.groupToMap(score => {
    return score >= 90 ? 'A' : score >= 80 ? 'B' : 'C';
});
console.log(groupedMap); // Map { 'B' => [80, 85], 'A' => [95], 'C' => [70] }

 

 

34. Array.prototype.flatMap(): 매핑 후 평탄화

flatMap()은 각 요소에 함수를 적용한 후 결과를 평탄화합니다.
예를 들어, 각 요소를 2배로 만들고 평탄화하고 싶을 때 사용할 수 있어요.

let numbers = [1, 2, 3];
let result = numbers.flatMap(num => [num, num * 2]); // 각 요소를 2배로 만들고 평탄화
console.log(result); // [1, 2, 2, 4, 3, 6]

 

 

35. Array.prototype.at(): 특정 인덱스의 요소 가져오기

at()은 배열의 특정 인덱스에 있는 요소를 반환합니다. 음수 인덱스도 지원하므로, 마지막 요소를 쉽게 가져올 수 있어요.

let fruits = ['사과', '바나나', '오렌지'];
let lastFruit = fruits.at(-1); // 마지막 요소 가져오기
console.log(lastFruit); // '오렌지'

 

 

36. Array.prototype.toReversed(): 원본 배열 변경 없이 역순 배열 반환

toReversed()는 원본 배열을 변경하지 않고 역순 배열을 반환합니다.
예를 들어, 배열을 역순으로 만들고 싶지만 원본 배열은 유지하고 싶을 때 사용할 수 있어요.

let numbers = [1, 2, 3];
let reversed = numbers.toReversed(); // 역순 배열 생성
console.log(reversed); // [3, 2, 1]
console.log(numbers); // [1, 2, 3] (원본 배열은 그대로)

 

 

37. Array.prototype.toSorted(): 원본 배열 변경 없이 정렬된 배열 반환

toSorted()는 원본 배열을 변경하지 않고 정렬된 배열을 반환합니다.
예를 들어, 배열을 정렬하고 싶지만 원본 배열은 유지하고 싶을 때 사용할 수 있어요.

let numbers = [3, 1, 2];
let sorted = numbers.toSorted(); // 정렬된 배열 생성
console.log(sorted); // [1, 2, 3]
console.log(numbers); // [3, 1, 2] (원본 배열은 그대로)

 

 

38. Array.prototype.toSpliced(): 원본 배열 변경 없이 요소 추가/제거

toSpliced()는 원본 배열을 변경하지 않고 요소를 추가, 제거, 교체한 배열을 반환합니다.
예를 들어, 배열의 특정 요소를 제거하거나 추가하고 싶지만 원본 배열은 유지하고 싶을 때 사용할 수 있어요.

let fruits = ['사과', '바나나', '오렌지'];
let spliced = fruits.toSpliced(1, 1, '포도'); // 인덱스 1에서 1개 제거하고 '포도' 추가
console.log(spliced); // ['사과', '포도', '오렌지']
console.log(fruits); // ['사과', '바나나', '오렌지'] (원본 배열은 그대로)

 

 

39. Array.prototype.with(): 원본 배열 변경 없이 특정 인덱스의 요소 교체

with()는 원본 배열을 변경하지 않고 특정 인덱스의 요소를 교체한 새 배열을 반환합니다.
예를 들어, 배열의 특정 요소를 바꾸고 싶지만 원본 배열은 유지하고 싶을 때 사용할 수 있어요.

let fruits = ['사과', '바나나', '오렌지'];
let newFruits = fruits.with(1, '포도'); // 인덱스 1의 요소를 '포도'로 교체
console.log(newFruits); // ['사과', '포도', '오렌지']
console.log(fruits); // ['사과', '바나나', '오렌지'] (원본 배열은 그대로)