(JS) 배열과 배열 메소드

1. 배열 (array)

자바스크립트에서 배열이란 하나의 변수에 여러 값을 저장하는 집합이다. 배열 안에 있는 각각의 값을 요소라고 하고, 요소의 위치를 나타내는 것을 인덱스라고 한다. (0부터 시작)

• 보통 다른 언어들은 배열의 요소들이 같은 데이터 타입이어야 하지만 자바스크립트는 여러 타입의 요소가 들어갈 수 있다.
• 자바스크립트에서 배열은 Array 객체이다.

배열 생성

배열 리터럴을 이용하거나 Array() 생성자 함수를 이용하여 배열을 만들 수 있다.

const car = ['sonata', 'avante', 'morning', 'xm3']; // 리터럴을 이용한 방식
const car = new Array('sonata', 'avante', 'morning', 'xm3'); // Array()생성자 함수

어떤 방식으로 객체를 생성해도 console.log (car)에 대해 ['sonata', 'avante', 'morning', 'xm3'] 라는 같은 결과가 나온다.

2. 배열 요소의 추가와 삭제

배열 인덱스 참조

배열의 요소를 참조하기 위해서는 []를 이용한다.
배열의 길이를 알기 위해서는 length 프로퍼티를 이용한다.

const car = ['sonata', 'avante', 'morning', 'xm3'];
console.log (car[0]); // sonata
console.log (car[2]); // morning
console.log (car.length) // 4

[]안에 숫자를 넣어 해당 인덱스 요소의 값을 참조할 수 있다.

배열 요소 추가

자바스크립트에서 배열은 object이기때문에, 동적으로 요소를 추가할 수 있다. => 인덱스를 이용

let car = []; // 빈 배열
car[0] = 'sonata';
console.log (car) // ['sonata']

car = ['sonata', 'avante', 'morning', 'xm3'];
car[car.length] = 'seltos'; // length 프로퍼티를 이용하여 배열의 마지막에 요소 추가
console.log (car) // ['sonata', 'avante', 'morning', 'xm3', 'seltos']

배열 요소 삭제

delete 연산자를 이용하여 삭제할 수 있다. 이 때, 배열의 길이에는 변함이 없다. 즉, 삭제된 배열의 인덱스는 빈 칸이 된다.
→ 삭제된 인덱스를 빈칸으로 두는 것이 아닌 아예 삭제하려면 메소드를 이용한다.

let car = ['sonata', 'avante', 'morning', 'xm3'];
delete car[1];
console.log (car); // ['sonata', empty, 'morning', 'xm3']

3. 배열 메소드

배열 메소드를 다룰 때, 알아야 할 중요한 점은 메소드가 원본 배열 자체를 수정하는지, 아니면 원본 배열은 유지되고 아예 새로운 배열을 생성하는지를 알고 사용해야한다.

Array.isArray()

배열이면 true를 반환하고 배열이 아니면 false를 반환한다. (정적 메소드)

const car = ['sonata', 'avante', 'morning', 'xm3'];
console.log (Array.isArray(car)); // true
console.log(Array.isArray(3)); // false

Array.prototype.indexOf ()

인수로 전달된 요소의 위치를 찾는다. 배열에 해당 요소를 찾아 인덱스를 반환한다.

const car = ['sonata', 'avante', 'morning', 'xm3'];
console.log (car.indexOf('xm3')); // 3
console.log (car.indexOf('seltos') // -1 

배열에 해당 요소가 없으면 -1을 반환한다.

Array.prototype.includes()

인수로 전달된 요소가 배열에 존재하는지 확인한다. 존재하면 true, 존재하지 않으면 false를 반환한다.

const car = ['sonata', 'avante', 'morning', 'xm3'];
console.log (car.includes('xm3')); // true
console.log (car.indexOf('seltos'); // false

Array.prototype.concat()

여러 배열이나 값을 붙여 하나의 배열로 반환한다. (원본 배열은 그대로)

const a = [0,1];
const b = [2,3];
let result = a.concat(b);
console.log (result); // [0, 1, 2, 3]
console.log (b.concat(5)) // [2, 3, 4]

Array.prototype.join()

배열을 문자열로 변환하고, 인수로 전달하는 값으로 연결하여 반환한다. 기본은 ,로 연결 (원본 배열 그대로)

const a = [0,1,2,3];
consol.log(a.join()) // '0,1,2,3'
consol.log(a.join('')) // '0123'

Array.prototype.push()

배열의 마지막에 요소를 추가하고 변경된 length 값을 반환한다. (원본 배열 수정)

const a = [0,1];
let result = a.push(2);
console.log(a); // [0, 1, 2]

Array.prototype.pop()

배열의 마지막 요소를 제거하고 제거된 요소를 반환한다. (원본 배열 수정)

const a = [0,1,2,3];
let result = a.pop();
console.log(result); // 3
console.log(a); // [0, 1, 2]

Array.prototype.shift()

배열의 첫 요소를 제거하고, 제거된 요소를 반환한다. (원본 배열 수정)

const a = [0,1,2,3];
let result = a.shift();
console.log(result); // 0
console.log(a); // [1,2,3]

Array.prototype.unshift()

배열의 맨 앞에 요소를 추가하고 변경된 length 값을 반환한다. (원본 배열 수정)

const a = [0,1,2,3];
let result = a.unshift(-1);
console.log(result); // 5
console.log(a); // [-1,0,1,2,3]

Array.prototype.splice ()

배열의 요소를 제거하고, 그 인덱스에 다른 요소를 추가할 수 있다. 중간에 요소를 추가할 때도 사용할 수 있다.
(원본 배열 수정)

const a = [0,1,2,3];
const del = a.splice(1,2,100,200);
console.log(a); // [0, 100, 200, 3]
// 1번째 인덱스부터 2개의 요소를 제거하고 그 인덱스에 100,200 추가 

const b = [10,11,12,13];
const add = b.splice(1,0,100);
console.log (b); // [10, 100, 11, 12, 13]
// 1번째 요소부터 0개의 요소를 삭제하고 그 인덱스(첫번째)에 100 추가.
// 배열 중간에 요소 추가하는 방법

Array.prototype.slice()

잘라진 새로운 배열을 반환한다. (원본 배열 그대로)

→ 첫번째 인자부터(포함) 두번째 인자까지(포함x) 복사.
arr.slice(a,b)이면 arr[a]부터 arr[b-1]까지 복사 후 반환한다.

const city = ['Seoul', 'Daejeon', 'Daegu', 'Busan'];
const result = city.slice(1,3);
console.log (result); // ['Daejeon', 'Daegu']

Array.prototype.reverse()

배열 요소의 순서를 뒤집어서 반환한다. (원본 배열 수정)

let city = ['Seoul', 'Daejeon', 'Daegu', 'Busan'];
const rev = city.reverse();
console.log (rev); // ['Busan', 'Daegu', 'Daejeon', 'Seoul']
console.log (city); // ['Busan', 'Daegu', 'Daejeon', 'Seoul']

Array.prototype.flat()

중첩 배열의 중첩을 평탄화하여 새로운 배열을 반환한다. (원본 배열 그대로)
지정한 숫자만큼 중첩을 풀어준다.

let arr = [1,2,3,4,[5,6,7,[8,9]]];
let arr2 = arr.flat(2); // 2번 평탄화
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]