Array

.esc·2021년 3월 6일

Arrays

배열은 key가 숫자로, 본질은 객체이다. 원시 자료형이 아닌 객체형에 속하여 객체처럼 동작한다.

배열 선언

let arr = [];
let arr = new Array();

// new Array()는 잘 쓰이지 않음
let arr = new Array(2);
alert( arr[0] ); // [2]가 아닌 undefined가 출력
alert( arr.length ); // 2

[index]: index 순서에 있는 요소를 반환
length: 배열 요소의 개수를 반환

요소 추가/제거 methods

splice(index [,deleteCount, elem1, ... , elemN): index 위치의 요소부터 deleteCount개의 요소를 제거하고, elem 요소들을 추가 (기존 배열이 변형된다.)
slice([start], [end]: start 위치부터 end 전까지의 요소를 복사한 새로운 배열을 반환. (따라서 기존 배열을 건드리지 않으면서 새로운 배열을 만들 때 자주 사용된다.)
concat(arg1, arg2...): 기존 배열에 요소를 추가해 새로운 배열을 만들 때 사용

push, pop, shift, unshift

push(...items): 맨 끝에 요소를 추가
pop: 맨 끝 요소를 추출하여 제거
shift: 맨 앞 요소를 추출하여 제거한 후 순서를 앞으로 당김
unshift(...items): 맨 앞에 요소를 추가

queue(큐)
(First-In-First-Out, FIFO)

push
shift

stack(스택)
(Last-In-First-Out, LIFO)

push
pop

성능

shift, unshift은 느리다.
index가 0인 요소를 제거하거나 추가하는 것은 나머지 모든 요소의 index 값도 변화하여, 처리 시간이 길고 메모리 관련 연산도 많아진다.

push, pop은 빠르다.
맨 끝 요소만 변화하여 나머지 요소는 그대로 유지된다.

반복문

for문

let arr = ["사과", "오렌지", "배"];

for (let i = 0; i < arr.length; i++) {
  alert( arr[i] );
}

for...of
요소의 index는 얻을 수 없고 값만 얻을 수 있다.

let arr = ["사과", "오렌지", "자두"];

for (let fruit of arr) {
  alert( fruit );
}

for...in
배열은 객체형이므로 for...in을 사용할 수 있지만, 객체에 최적화되어 있어서 속도가 느리므로 배열에는 사용을 추천하지 않는다.

let arr = ["사과", "오렌지", "배"];

for (let key in arr) {
  alert( arr[key] );
}

forEach method

let arr = ["사과", "오렌지", "배"];

arr.forEach(function(item, index, array) {
  alert; 
  // 요소 모두 alert 통해 출력
  
  alert(`${item} is at index ${index} in ${array}`); 
  // index 정보를 함께 출력
});

배열 탐색 methods

indexOf(item, index): index 위치부터 item(요소)을 찾아 발견하면 item의 index를 반환, 없으면 -1을 반환
includes(item, index): index 위치부터 item(요소) 포함 여부를 반환
find(fn)
조건에 맞는 요소를 찾아 true가 반환되면 반복이 멈추고 해당 요소를 반환하고, 조건에 해당하는 요소가 없으면 undefined를 반환한다.

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let user = users.find(item => item.id == 1);
alert(user.name); // John

filter(fn)
조건에 맞는 요소 전체를 담은 배열을 반환한다.

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let someUsers = users.filter(item => item.id < 3);
// 앞쪽 사용자 두 명을 반환합니다.
alert(someUsers.length); // 2