B20 : 배열

목차

1. 배열

    1-1. 배열의 생성

    1-2. 배열 원소에 접근

    1-3. const 배열은 변하지 않을까?

2. 배열 메서드

    2-1. 배열 길이 : length

    2-2. 원본 배열 수정 : shift(), unshift(), push(), pop(), splice(), sort(), reverse()

    2-3. 새로운 배열 생성 : concat(), slice(), Spread Operator

    2-4. 배열 원소 다루기 : map(), forEach(), filter()

    2-5. 특정 값 찾기 : indexOf(), lastIndexOf(), includes()

    2-6. 배열 출력하기 : toString(arr)

3. 유사 배열 객체

4. for...of 반복문

---

1. 배열

순서가 있는 데이터의 집합으로, 정수 타입의 인덱스를 프로퍼티로 가지는 객체이다.

인덱스 값은 0부터 시작한다.

1. 배열의 생성

배열은 Array() 생성자 함수나, 배열 리터럴[]을 사용해 생성한다.

// 1. Array() 생성자 함수 사용 (잘 안씀)
const arr = new Array(1,'2', true);
console.log(arr);	// [1, '2', true]

const arr = new Array(3);
console.log(arr);	// [empty, empty, empty] - 길이가 3인 빈 배열

// 2. 배열 리터럴[] 사용
const arr = [1, '2', true];

 

 

2. 배열 원소 접근과 동적 원소 생성

배열 원소에 접근할 때는 대괄호[]에 인덱스값을 넣어 접근한다.

배열 길이보다 큰 인덱스값을 사용한다면 undefined를 반환한다.

원소를 추가할 때는 원하는 인덱스에 값을 추가할 수 있다.

// 배열 원소 접근
const arr = [1, 2, 3];
console.log(arr[0]);	// 1

// 동적 원소 생성
const arr = [];
arr[0] = 1;
arr[2] = 3;
console.log(arr);	// [1, empty, 3]

• 두번째 예시같이 중간이 빈 배열을 희소 배열이라고 하는데, 빈 원소는 forEach(), map(), filter()같은 배열의 내장 메서드에서는 무시되나, find(), findIndex() 메서드에서는 무시되지 않고 모두 탐색된다.

희소 배열은 동작이 일관되지 않고, 가독성과 구조 파악에 안좋으니 웬만하면 쓰지 않는다.

 

3. const 배열은 변하지 않을까?

위 예시에서 배열을 선언할 때 const 키워드를 사용했다.

const 키워드로 변수를 선언하면 값을 재할당할 수 없다. (TypeError 발생)

 

하지만 const로 객체/배열을 선언할 경우, 메서드를 통해 값을 변경할 수 있다.

const로 상수로 선언된 것은 객체/배열 내부 프로퍼티가 아니라, 배열의 주소값 그 자체이기 때문이다.

const arr = [1, 2, 3];

// ✅ 내부 값은 변경 가능
arr[0] = 99;
arr.push(4);

console.log(arr); // [99, 2, 3, 4]

// ❌ 변수 자체를 다른 배열로 재할당은 불가능
arr = [9, 9, 9]; // TypeError

 

const로 배열을 선언하는 이유는 불필요한 재할당 가능성을 줄이고, 상태 관리 실수를 줄이려는 목적이다.

 

배열 내부 값까지 변경을 막고 싶다면 JS 내장 객체의 메서드인 Object.freeze(arr)를 사용한다.

// 얕은 동결
const arr = [1, 2, 3];
Object.freeze(arr);

// 깊은 동결
const arr = [[1, 2], [3, 4]];
function deepFreeze(obj) {
  Object.freeze(obj);
  Object.keys(obj).forEach(key => {
    if(typeof obj[key] === 'object' && obj[key] !== null) {
      deepFreeze(obj[key]);
    }
  });
  return obj;
}
 const arr2 = deepFreeze(arr);
 arr2.push(4);	// error

 

 

---

2. 배열 메서드

1. 배열 길이 : length  

length

빈 원소 값을 포함하여 전체 배열의 길이를 계산하며, length 프로퍼티를 직접 수정하여 배열의 길이를 조정할 수 있다.

const arr = [1, 2, 3, 4];
console.log(arr.length);	// 4

arr.length = 2;
console.log(arr);	// [1, 2]

 

---

2. 원본 배열 수정 : shift(), unshift(), push(), pop(), splice(), sort() 

shift()

• 기능 : 배열의 첫 번째 원소를 삭제
• 반환값 : 삭제된 원소

const arr = [1, 2];
console.log(arr.shift));	// 1
console.log(arr);	// [2]

 

unshift()

• 기능 : 배열의 첫 번째 인덱스에 원소를 추가
• 반환값 : 배열의 새로운 길이

const arr = [1, 2];
console.log(arr.unshift(-1, 0));	// 4
console.log(arr);	//[-1, 0, 1, 2]

 

push()

• 기능 : 배열의 마지막 인덱스에 원소를 추가
• 반환값 : 배열의 새로운 길이

const arr=[1];
console.log(arr.push(2,3));	// 3
console.log(arr);	// [1, 2, 3]

 

pop()

• 기능 : 배열의 마지막 원소를 삭제
• 반환값 : 삭제된 원소

const arr = [1, 2];
console.log(arr.pop());	// 2
console.log(arr);	// [1]

 

splice()

• 기능 : 배열의 원소를 추가/교체/삭제하여 배열 데이터 변경
• 반환값 : 삭제된 배열

splice(startIndex) : n번째 인덱스 이상의 값을 모두 삭제

splice(startIndex, deleteCount) : startIndex부터 deleteCount만큼 삭제

splice(startIndex, deleteCount, item, ... ) : 삭제한 자리에 item들 추가

const arr = [1, 2, 3];
console.log(arr.splice((1, 2));	// [2, 3] : arr[1]~arr[2] 삭제
console.log(arr);	// [1]

 

sort()

• 기능 : 배열의 원소를 '인자로 넘긴 비교 함수'를 사용해 정렬
• 반환값 : 재정렬된 배열

const arr = [3, 2, 4, 21, 55];
arr.sort();
console.log(arr);	//	[2, 21, 3, 4, 55] : 문자 정렬이 아닌 다른 방식을 원하면 비교 함수를 정의해야함

// 크기 순으로 비교하는 함수 만들어서 sort에 넘기기
function compareNumeric(a, b) {
  if(a>b) return 1;
  if(a==b) return 0;
  if(a<b) return -1;
}

arr(sort(compareNumeric);
console.log(arr);	// [2, 3, 4, 21, 55]

 

reverse()

• 기능 : arr의 요소를 역순으로 정렬
• 반환값 : 재정렬된 배열

let arr = [1, 2, 3, 4, 5];
arr.reverse();
alert(arr);	// 5, 4, 3, 2, 1

 

 

---

3. 새로운 배열 생성 : concat(), slice(), Spread Operator  

concat()

• 기능 : 인자로 넘긴 배열/값들을 기존 배열에 합쳐, 새로운 배열을 생성
• 반환값 : 새로 생성된 배열

const arr = [1, 2, 3];
const newArr = arr.concat([4, 5]);

console.log(arr);	//[1, 2, 3]
console.log(newArr);	// [1, 2, 3, 4, 5]

 

slice()

• 기능 : 특정 범위의 원소를 얕은 복사해, 새로운 배열을 생성 (참조가 유지됨)
• 반환값 : 새로 생성된 배열 

const obj = {};
const arr = [1, obj, 3];
const newArr = arr.slice(1, 2);
console.log(newArr[0] === obj);	// true

 

펼침 연산자 (Spread Operator)

• 기능 : slice() 연산자와 같음

const arr = [1, 2, 3];
const newArr = [...arr];
console.log(newArr);	// [1, 2, 3]

---

4. 배열 원소 다루기 : map(), forEach(), filter() 

map()

• 기능 : '모든 원소를 인자로 받은 함수'를 실행해 특정 형식으로 변경하여 새로운 배열 생성
• 반환값 : 새로 생성된 배열

const arr = [1, 2, 3];
const newArr = arr.map(x => x + 1);
console.log(newArr);	// [2, 3, 4];

• 반환값이 있기 때문에 어떤 변수에 반환값에 넣고 싶을 때 주로 사용한다.

 

forEach()

• 기능 : '인자로 받은 함수'를 배열의 모든 원소를 대상으로 실행

const arr = [1, 2, 3];
const newArr = arr.forEach(x => console.log(x));

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} is at index ${index} in ${array}`);
});

• 성능 문제로 for문을 쓰는 경우가 많다.
• map과 다르게 반환값이 없다.

 

 

filter()

• 기능 : '인자로 받은 함수'의 테스트를 통과하는 원소들로 새로운 배열 생성
• 반환값 : 새로 생성된 배열

const arr = [1, 2, 3];
const newArr = arr.filter(x => x != 1);
console.log(newArr);	// [2, 3]

 

 

5. 특정 값 찾기 : indexOf(), lastIndexOf(), includes() 

indexOf(item)

• 기능 : 배열에 item이 포함되어 있는지 탐색
• 반환값 : 포함될 경우 : 해당 인자가 있는 첫 번째 인덱스, 없을 경우 -1

let arr = [1, 2, 3, 1];
console.log(arr.indexOf(1));	// 0
console.log(arr.indexOf(5));	// -1

 

lastIndexOf()

• 기능 : 배열에 item이 포함되어 있는지 뒤에서부터 탐색
• 반환값 : 포함될 경우 : 해당 인자가 있는 첫 번째 인덱스, 없을 경우 -1

let arr = [1, 2, 3, 1];
console.log(arr.lastIndexOf(1));	// 3
console.log(arr.lastIndexOf(5));	// -1

 

includes()

• 기능 : 배열에 item이 포함되어 있는지 여부만 확인
• 반환값 : 있을 경우 true, 없을 경우 false

let arr = [1, 2, 3, 1];
console.log(arr.includes(1));	// true
console.log(arr.includes(5));	// false

 

6. 배열 출력하기 : toString(arr)

toString() 메서드를 사용하면 요소를 쉼표로 구분한 문자열이 반환된다.

let arr = [1, 2, 3];

alert( arr );	// 1, 2, 3

---

3. 유사 배열 객체

자바스크립트에서는 일반 객체를 배열처럼 사용할 수 있다.

유사 배열 객체는 length 프로퍼티로 양의 정수 값을 가진 객체여야 한다.

// 유사 배열 객체 예시
const arr = {
  0: 'hi',
  1: 'my',
  2: 'name is',
  3: 'bdy',
  length: 4	// 프로퍼티로 length: 양의 정수를 가짐
};

// 실제 유사 배열 객체 arguments
function foo(a, b, c) {
  console.log(arguments[0], arguments[1], arguments[2]);	// 'a', 'b', 'c'
  console.log(arguments.length);	// 3
}

foo('a', 'b', 'c');

 

arr, arguments 객체는 배열처럼 인덱스로 프로퍼티에 접근하며 legnth를 가지나,

유사 배열이기 때문에 배열 내장 메서드는 사용할 수 없다.

 

이럴 때 배열의 내장 메서드를 call(), apply() 함수와 결합하여 사용할 수 있다.

function foo(a, b, c) {
  Array.prototype.forEach.call(arguments, (arg) => {
    console.log(arg);	// 'a', 'b', 'c'
  });
}

foo('a', 'b', 'c');

유사 배열 객체는 DOM을 다루다보면 자주 볼 수 있는 형태의 데이터이다.

 

 

• 요즘에는 arguments는 거의 안쓰고 rest parameter(...)를 사용한다.
• 이제는 레거시 코드 유지보수할 때나 사용한다고 한다.

---

4. for...of 반복문

배열을 간편하게 순회하는 반복문이다.

배열의 길이만큼 반복하며 반복될 때마다 element에 배열의 요소를 할당한다.

let arr = [1, 2, 3, 4, 8];

for(let element of arr) {
  console.log(element);	// 1, 2, 3, 4, 8
}

 

물론 객체의 모든 프로퍼티를 도는 for...in문으로도 배열의 요소들을 동일하게 출력할 수 있으나,

배열의 메서드나 length 프로퍼티 등이 할당될 수도 있기 때문에 for...of문을 사용하는 것이 더 안전하다.

 

 

 

 

 

 

참고

기초부터 완성까지, 프런트엔드 (이재성|한정)

기초부터 완성까지, 프런트엔드 - 예스24

https://ko.javascript.info/array-methods

배열과 메서드