[JS] 자바스크립트의 배열

다른 프로그래밍 언어와 마찬가지로 자바스크립트에도 Array가 존재한다. 배열은 데이터를 그룹으로 묶는 방법이다. 이 때 배열은 원시 타입이 아니고 객체 타입이다.

배열이란?
배열은 값의 순서 있는 집합이다!

배열 생성

let array = [];
let colors = ['red','orange', 'yellow'];
let colors = [true,'hello', 1];

자바스크립트의 배열의 경우, 여러 타입의 데이터들을 하나의 배열에 저장할 수 있다.

---

배열의 인덱스

Array 객체는 문자열처럼 인덱스를 사용해 배열의 각 요소에 접근할 수 있다. 이 때 인덱스의 범위는 0 ~ 배열 크기 - 1이다.

let colors = ['red','orange', 'yellow'];

/* read */
console.log(colors[1]); // orange

/* write */
colors[1] = 'light purple';
console.log(colors[1]); // light purple

---

배열의 속성

length

배열의 속성 중에는 length가 있고, 이는 배열의 길이를 나타낸다. length의 값은 배열의 크기가 커지면 자동으로 갱신된다.

const fruits = ["banana", "apple", "peach"];
console.log(fruits.length); // 3

const fruits[5] = "cherry";
console.log(fruits); // ["banana", "apple", "peach", empty x 2, "cherry"]
console.log(fruits.length); // 6

---

배열의 메서드

Push

push는 배열의 끝에 항목을 추가하고 배열의 새로운 길이를 반환하는 메서드이다.

문법

let newLength = 배열.push(element1, element2, ..., elementN);

앞에서 배운 인덱스를 통해서도 배열에 요소를 추가할 수 있지만, 이렇게 하려면 직접 배열의 length를 알고 있어야 했다.

let movies = ['Eternal Sunshine', 'notebook'];
movies[2] = 'elemental'; //배열의 현재 length인 2를 알고 있어야 저장 가능

Push를 사용하면 알아서 맨 끝에 추가해준다.

let movies = ['Eternal Sunshine', 'notebook'];
movies.push('elemental');

Pop

pop은 배열의 끝에 있는 항목을 삭제하고 삭제한 항목을 반환하는 메서드이다.

문법

let lastItem = 배열.pop();

let movies = ['Eternal Sunshine', 'notebook'];
let movie = movies.pop(); // 'notebook'

Shift

shift는 배열에서 첫 번째 요소를 제거한 후 반환하는 메서드이다. 빈 배열일 경우 undefined를 반환한다.

문법

let firstItem = 배열.shift();

예제

let movies = ['Eternal Sunshine', 'notebook'];
let movie = movies.shift(); // 'Eternal Sunshine'

Unshift

unshift 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환하는 메서드이다.

문법

let newLength = 배열.unshift(element1, element2, ..., elementN);

예제

let movieLine = ['하은', '모리'];
movieLine.unshift('VIP');
console.log(movieLine); // ['VIP', '하은', '모리'];

Concat

concat은 비파괴적 메서드로, 두 개 이상의 배열을 병합하는 데 사용된다. 이 메서드는 기존 배열을 변경하지 않고 새로운 배열을 반환하는 메서드이다.

문법

concat(value0, value1, /* …, */ valueN)

예제

const cat = ['나비', '야옹이'];
const dog = ['모리', '제리'];
const newArray = cat.concat(dog);
console.log(newArray); // ['나비', '야옹이', '모리', '제리'];

includes

includes 메서드는 배열의 항목에 특정 값이 포함되어 있는지를 판단하여 true 또는 false를 반환하는 메서드이다.

문법

배열.includes(searchElement); // 찾을 값만 주는 경우
배열.includes(searchElement, fromIndex); // 찾을 값과 찾기 시작할 인덱스를 주는 경우

예제

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat')); // true

console.log(pets.includes('at')); // false

indexOf

indexOf 메서드는 배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환한다.

문법

배열.indexOf(searchElement); // 찾을 값만 주는 경우
배열.indexOf(searchElement, fromIndex); // 찾을 값과 찾기 시작할 인덱스를 주는 경우

예제

const array = [2, 9, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1

reverse

reverse 메서드는 배열의 순서를 반전시키는 파괴적 메서드이다.호출한 배열을 반전시킨 뒤, 그 참조를 반환한다.

문법

배열.reverse();

예시

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

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

slice

slice 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환하는 비파괴적 메서드이다. 원본 배열은 바뀌지 않는다.

문법

배열.slice(); //처음부터 끝까지 추출
배열.slice(begin); // begin부터 끝까지 추출
배열.slice(begin, end); //begin부터 end - 1까지 추출

예제

let numbers = ['zero', 'one', 'two', 'three', 'four'];
let sliceNumbers = numbers.slice(); // ['zero', 'one', 'two', 'three', 'four']
let oneToThree = numbers.slice(1, 4);  // ['one', 'two', 'three']

splice

splice 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경하는 파괴적 메서드이다. 제거한 요소를 담은 배열을 반환한다.

문법

배열.splice(start,deleteCount, item1 ~ itemN); // start 지점부터 deleteCount의 개수만큼 제거하고, item1~itemN을 start 인덱스 위치에 삽입한다.

예제

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
/*추가만 하기*/
var removed = myFish.splice(2, 0, "drum"); // 2번 인덱스부터 0개를 제거하고 그 위치에 'drum'추가
console.log(myFish); // ["angel", "clown", "drum","mandarin", "sturgeon"]
console.log(removed); //삭제한 게 없으니 []

/*삭제만 하기*/
myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 2); // 2번 인덱스부터 2개를 제거하고 아무것도 추가하지 않기
console.log(myFish); // ["angel", "clown"];
console.log(removed); //삭제한 데이터: ["mandarin", "sturgeon"]

/*교체(삭제 후 추가) 하기*/
myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 1, "drum"); // 2번 인덱스부터 0개를 제거하고 그 위치에 'drum'추가
console.log(myFish); // ["angel", "clown", "drum", "sturgeon"]
console.log(removed); //삭제한 데이터: ["mandarin"]

※ 배열 중간에 값을 삽입할 때 splice를 사용하는 일은 드물다!

sort

sort 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환하는 파괴적 메서드이다.

문법

배열.sort();

sort메서드를 호출하면, 일단 배열의 모든 값을 문자열로 변경한다. 그 다음 각 문자열의 UTF 16 코드 유닛 값을 비교하여 정렬한다.

예제

let scores = [1, 70, 100, 2500, 9, -12, 0, 34];
scores.sort(); // [-12, 0, 1, 100, 2500, 34, 70, 9]

예상과 다르게 정렬된 것을 확인할 수 있다. 이는 sort가 기본적으로 문자열로 변경한 다음에 비교하기 때문이다. 따라서 첫 번째 자리의 숫자만 보고 정렬됐음을 확인할 수 있다.