JS 배열 Array

배열 (Array) 이란?

 

JavaScript 에서 배열은 크기 조정이 가능하고, 다양한 데이터 형식을 혼합하여 저장할 수 있는 array 객체

let arr = ['Apple', 1, 3.14, true, function sayHI() {console.log('HI')}];

 

배열에 항목 추가/삭제하기

 

let arr = ['apple', 'banana', 'lemon', 'orange'];

 

shift() : 배열의 첫 요소 삭제

arr.shift();
console.log(arr); // ['banana', 'lemon', 'orange']

 

pop() : 배열의 마지막 요소 삭제

arr.pop();
console.log(arr); // ['apple', 'banana', 'lemon']

 

unshift(value) : 배열의 첫 요소로 값 추가

arr.unshift(value);
console.log(arr); // ['cherry', 'apple', 'banana', 'lemon', 'orange']

 

push(value) : 배열의 마지막 요소로 값 추가

arr.push(value);
console.log(arr); // ['apple', 'banana', 'lemon', 'orange', 'mango']

 

성능🔎

push/pop 은 빠르고, shift, unshift 는 느림

 

• push 와 pop 은 배열의 맨 뒤에 값을 추가하거나 지움 -> 다른 요소들의 인덱스는 그대로 두고 맨 뒤의 인덱스만 건드리면 됨
  
• shift 와 unshift 는 배열의 맨 앞에 값을 추가하거나 지우기 때문에 다른 요소들의 인덱스를 한 칸 씩 앞/뒤로 이동시켜줘야 함 -> 배열에 요소가 많을 수록 이동에 걸리는 시간이 길고 메모리 관련 연산도 많아짐
  

splice(index [, 삭제할 요소 개수, 추가할 요소])

let arr = ['apple', 'banana', 'lemon', 'orange'];

// splice(index): index 부터 끝까지 다 삭제
arr.splice(1);
console.log(arr); // ['apple']

// splice(index, n): index 부터 n개의 요소 삭제
arr.splice(1, 2);
console.log(arr); // ['apple', 'orange']

// splice(index, n, 추가할 요소): index 부터 n개의 요소 삭제하고 그 자리에 추가할 요소 집어넣음
arr.splice(1, 2, 'cherry', 'mango');
console.log(arr); // ['apple', 'cherry', 'mango', 'orange']

 

• 삭제하지 않고 요소만 추가하기

arr.splice(1, 0, 'watermelon');
console.log(arr); // ['apple', 'watermelon', 'banana', 'lemon', 'orange']

 

• 값 교체하기

arr.splice(1, 1, 'watermelon');
console.log(arr); // ['apple', 'watermelon', 'lemon', 'orange']

 

배열에서 특정 값 찾기/확인하기

 

indexOf(value)/lastIndexOf(value)

• indexOf 는 앞에서부터 배열을 탐색해서 값이 있다면 index 를 리턴, 값이 없다면 -1 을 리턴

let arr = ['apple', 'banana', 'lemon', 'orange'];

console.log(arr.indexOf('lemon')); // 2

• lastIndexOf 는 뒤에서부터 배열을 탐색해서 값이 있다면 index 를 리턴, 값이 없다면 -1 을 리턴

let arr = ['apple', 'banana', 'lemon', 'orange'];

console.log(arr.lastIndexOf('lemon')); // 2

 

includes(value)

• indexOf/lastIndexOf 가 특정 값을 찾아서 값의 index 를 알려준다면, includes 는 배열 안에 값이 있는지의 여부만 궁금할 때 사용

let arr = ['apple', 'banana', 'lemon', 'orange'];

console.log(arr.includes('starawberry')); // false

 

배열 복사

JavaScript 의 배열 복사는 얕은 복사
객체의 얕은 복사는 복사본의 속성이 복사본이 만들어진 원본 객체와 같은 참조 (메모리 내의 같은 값을 가리킴)를 공유하는 복사

let arr = ['apple', 'banana', 'lemon', 'orange'];

// 전개 구문 사용
let copyArr = [...arr];

// from() 메서드 사용
let copyArr = Array.from(arr);

// slice() 메서드 사용
let copyArr = arr.slice();

 

배열 병합

 

concat(array)

let arr1 = ['apple', 'banana', 'lemon', 'orange'];
let arr2 = ['cherry', 'mango'];
let mergeArr = arr1.concat(arr2); 

console.log(mergeArr); // ['apple', 'banana', 'lemon', 'orange', 'cherry', 'mango']

// 원본 배열은 변경 x
console.log(arr1); // ['apple', 'banana', 'lemon', 'orange']
console.log(arr2); // ['cherry', 'mango']

 

 

 

📖 References 📖

https://ko.javascript.info/array

배열

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Glossary/Shallow_copy

얕은 복사 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

https://velog.io/@minw0_o/%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC-vs-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC

얕은 복사 vs 깊은 복사