[자바스크립트] 배열

맹뿌·2021년 6월 12일

목록 보기

6/8

배열의 생성

자바스크립트에서의 배열은 어떤 데이터 타입의 조합이라도 포함할 수 있음

const misc = [
  'string',
  10,
  true,
  null,
  undefined,
  NaN,
  Infinity,
  ['nested array'],
  { object: true },
  function () {}
];

배열은 Array() 생성자 함수로도 생성할 수 있음

위와 같이 매개변수가 1개이고 데이터 타입이 숫자라면 매개변수로 전달된 숫자를 length값으로 가짐

const arr = new Array(2);  // 빈 배열이 2개

그 외의 경우, 매개변수로 전달된 값들을 요소로 가지는 배열을 생성

const arr = new Array(1, 2, 3);
console.log(arr);

배열의 추가

배열의 길이는 마지막 인덱스를 기준으로 산정

const arr = [];
console.log(arr[0]);   // undefined

arr[1] = 1;
arr[3] = 3;

console.log(arr.lenth);   // 4

배열의 삭제

배열을 삭제할 때는 delete 연산자를 사용할 수 있음. 이때 length에는 변함이 없으므로 해당 요소를 완전히 삭제하여 length에도 반영되게 하기 위해서는 splice 메소드 사용

const numbersArr = ['zero', 'one', 'two', 'three'];

// 요소의 값만 삭제된다
delete numbersArr[2]; // (4) ["zero", "one", empty, "three"]

// splice(시작 인덱스, 삭제할 요소수)
numbersArr.splice(2, 1); // (3) ["zero", "one", "three"]

배열의 순회

배열을 순회하여 출력할 때는 for문, forEach 메소드, for...of문을 사용하는 것이 좋음

forEach 메소드는 변수에 할당하는 것보다 반복문이나 조건문과 같이 바로 호출되는 것이 특징
forEach 메소드와 for...of문은 배열을 순회하며 주어진 함수를 모든 요소에 한 번씩 적용

arr.forEach((item, index) => console.log(index, item));

for (const item of arr) {
  console.log(item);
}

length 프로퍼티

length 프로퍼티는 배열의 길이를 나타냄.

만약 length 프로퍼티의 값을 현재보다 작게 변경하면 length 프로퍼티의 값보다 크거나 같은 인덱스에 해당하는 요소는 모두 삭제

항상 배열 요소의 갯수와 length 프로퍼티의 값이 일치하는 것은 아님. 배열 요소의 갯수와 length 프로퍼티의 값이 일치하지 않는 배열을 희소 배열이라고 함.

// 희소 배열 예제
var arr = new Array();
arr[99] = "Java Script";

// 빈 배열의 100번째에 "Java Script"를 삽입했기 때문에 배열의 길이는 100으로 늘어남
document.write("배열의 길이 : " + arr.length);

Array 메소드

isArray

주어진 인수가 배열이면 true, 아니면 false를 반환

// true
Array.isArray([]);
Array.isArray([1, 2]);
Array.isArray(new Array());

from

Array.from() 메소드는 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array 객체를 만듦

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

of

전달된 인수를 인자로 갖음. 배열의 생성과 다르게 전달된 인수가 1개이며 숫자라 하더라도 인수를 요소로 갖는 배열 생성

const arr1 = Array.of(1);   // 숫자 외에 문자도 전달 가능.
console.log(arr1);   //  [1]

indexOf

const arr = [1, 2, 2, 3];

// 배열 arr에서 요소 2를 검색하여 첫번째 인덱스를 반환
arr.indexOf(2);    // -> 1
// 배열 arr에서 요소 4가 없으므로 -1을 반환
arr.indexOf(4);    // -1
// 두번째 인수는 검색을 시작할 인덱스이다.
arr.indexOf(2, 2); // 2

includes

// foods 배열에 'orange' 요소가 존재하지 않으면 'orange' 요소를 추가
if (!foods.includes('orange')) {
  foods.push('orange');
}

concat

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

//  배열 arr2와 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
result = arr1.concat(arr2, 5);
console.log(result); // [1, 2, 3, 4, 5]

join

배열을 구분자로 연결하여 출력함. 구분자는 생략 가능하며 기본 구분자는 ,

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

let result = arr.join();
console.log(result); // '1,2,3,4';

result = arr.join('');
console.log(result); // '1234'

result = arr.join(':');
console.log(result); // '1:2:3:4'

push

인수로 전달받은 모든 값을 원본 배열의 마지막에 요소로 추가하고 변경된 length 값을 반환

const arr = [1, 2];

let result = arr.push(3, 4);
console.log(result); // 4

push 메소드는 원본 배열을 변경하지만, concat 메소드는 원본 배열을 변경하지 않고 새로운 배열을 반환

const arr1 = [1, 2];
arr1.push(3, 4);

const arr2 = [1, 2];
const result = arr2.concat(3, 4);

pop

원본 배열에서 마지막 요소를 제거하고 그 제거한 요소를 반환

const arr = [1, 2];

let result = arr.pop();
console.log(result); // 2

→ push + pop = LIFO

reverse

const a = ['a', 'b', 'c'];
a.reverse();

console.log(a); // [ 'c', 'b', 'a' ]

shift

배열에서 첫번째 요소를 제거하고 제거한 요소를 반환

const a = ['a', 'b', 'c'];
a. shift();

console.log(a);   // b, c

→ shift + push = FIFO

slice

배열의 각 요소를 얕은 복사하여 새로운 복사본을 생성

const items = ['a', 'b', 'c'];

// items[0]부터 items[1] 이전(items[1] 미포함)까지 반환
let res = items.slice(0, 1);

// items[1]부터 이후의 모든 요소 반환
res = items.slice(1);
console.log(res);  // [ 'b', 'c' ]

// 배열의 마지막 요소 2개를 반환
res = items.slice(-2);
console.log(res);  // [ 'b', 'c' ]

// 모든 요소를 반환
res = items.slice();

console.log(items === res);   // false
console.log(items[0] === res[0]);   // 배열의 요소는 같음 (얕은 복사가 되었다는 뜻)

splice

기존 배열의 요소를 제거하고 그 위치에 새로운 요소를 추가

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

// items[1]부터 2개의 요소를 제거하고 제거된 요소를 배열로 반환
const res1 = items1.splice(1, 2);

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

// items[1]부터 모든 요소를 제거하고 제거된 요소를 배열로 반환
const res2 = items2.splice(1);

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

// items[1]부터 2개의 요소를 제거하고 그자리에 새로운 요소를 추가. 제거된 요소가 반환.
const res = items.splice(1, 2, 20, 30);

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

// items[1]부터 0개의 요소를 제거하고 그자리(items[1])에 새로운 요소를 추가. 제거된 요소가 반환.
const res = items.splice(1, 0, 100);

// 원본 배열이 변경.
console.log(items); // [ 1, 100, 2, 3, 4 ]
// 제거한 요소가 배열로 반환.
console.log(res);   // [ ]

🎁 참조 및 출처

맹뿌

무엇이든 할 수 있고, 무엇이든 될 수 있는

이전 포스트

[자바스크립트] 객체

다음 포스트

[자바스크립트] 배열