자바스크립트 - 배열

기초부터 완성까지, 프런트엔드를 읽고 정리한 내용입니다.

배열

객체이지만 정수 타입인 인덱스를 프로퍼티로 갖는 특별한 데이터

생성

• Array() 생성자 함수

  const arr = new Array(1,'2',true);
  console.log(arr)
  
  const arr = new Array(3); // 길이가 3인 빈 배열 생성

• 배열 리터럴([])을 사용

  const arr = [1,2,3]

접근과 동적 원소 생성

자바스크립트 배열은 순차적으로 값을 넣지 않아도 아무 인덱스 위치에나 값을 추가할 수 있다. 추가한 위치에 따라 length 프로퍼티도 갱신되는데 배열의 length 프로퍼티는 배열의 최대 인덱스보다 항상 크기 때문이다.

const arr = [];

arr[0] = 1;
arr[2] = 2;

console.log(arr) // [1,empty,2]
console.log(arr.length); //3
console.log(arr[1]) // undefined

이처럼 배열 원소가 연속적이지 않고 중간에 빈 배열을 희소 배열이라고 하며, 희소 뱅려의 빈 원소는 forEach, map(), filter()내장 메서드에서 무시된다. (find(), findIndex()는 모두 탐색)

배열 조작

배열은 원소를 조작할 수 있는 내장 메서드를 가지며 아래 두 가지로 나뉜다.

• 원본 데이터를 직접 수정하는 메서드
• 기존 배열 데이터를 기반으로 조작해 새로운 배열을 생성하는 메서드Array.prototype의 메서드를 상속 받아 사용한다.

원본 배열 데이터 수정

• shift()

  첫 번째 원소를 삭제하고 삭제된 원소를 반환한다.

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

• unshift()

  배열의 첫 번째 인덱스에 원소를 추가하고, 결과값으로 배열의 새로운 길이를 반환한다.

  const arr=[1,2];
  console.log(arr.unshift(-1,0)); //4
  consoel.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;

• splice(index, elements count,[replace value])

  배열의 원소를 추가하거나 교체 또는 삭제하고 결괏값으로 삭제된 원소의 배열 반환

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

• sort()

  비교함수를 생략하면 각 문자의 유니코드 포인트 값에 따라 정렬됨. 숫자도 문자로 변환하여 졍렬. 별도의 비교 방식을 정의하고 싶다면 비교 함수를 정의해 전달하여 사용

  const arr = [1,2,3,5,63];
  arr.sort();
  console.log(arr); [1,2,3,63];

새로운 배열 생성 메서드

• 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);

map()

배열의 모든 원소를 인자로 받은 함수를 실행해 특정한 형식으로 변경하고, 새로운 배열을 만들어 반환한다.

const arr = [1,2,3];
arr.map((value,index,array) => {
	console.log(value,index,array);
	// 1, 0, [1,2,3]
	// 2, 1, [1,2,3]
	// 3, 2 , [1,2,3]
});

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

forEach()

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

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

filter()

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

유사 배열 객체

일반 객체를 배열처럼 사용할 수 있다. 유사 배열 객체는 length 프로퍼티로 양의 정수 값을 가진 객체여야 한다.

const arr = {
	0: 'h',
	1: 'e',
	2: 'l',
	3: 'l',
	4: 'o',
  length: 4
};

대표적인 예로 argument 가 있다.

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');

배열처럼 인덱스로 프로퍼티에 접근할 수 있으며 length 프로퍼티를 가지지만 배열 내장 매서드를 사용할 수 없다. 배열의 내장 메서드를 call() 또는 apply() 함수와 결합해 사용한다.

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