TIL17 - JavaScript 배열 관련 함수

📥 push

아이템을 배열의 끝으로 삽입한다.

console.log(foods);
foods.push('🍝', '🌮');
console.log(foods);

결과 :
["🍗", "🍕"]
["🍗", "🍕", "🍝", "🌮"]

push 함수 안의 두 가지 값이 끝에 삽입되었다.

📤 pop

아이템을 배열의 끝에서부터 빼낸다.

foods.pop();
foods.pop();
console.log(foods);

결과 :
["🍗", "🍕"]

pop을 두 번 적었더니 끝의 두 아이템이 하나씩 빠졌다.

📥 unshift

아이템을 배열의 앞으로 삽입한다.

foods. unshift('🍝', '🌮');
console.log(foods);

결과 :
["🍝", "🌮", "🍗", "🍕"]

📤 shift

아이템을 배열의 앞에서부터 빼낸다.

foods.shift();
foods.shift();
console.log(foods);

결과 :
["🍗", "🍕"]

🎮 splice

인덱스를 이용하여 아이템을 제거한다.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• start : 배열 시작 인덱스
• deleteCount : 제거할 요소의 수
• item1, item2... : 배열에 추가할 값(없으면 값을 추가하지 않고 삭제만 이루어진다.)

foods.push('🍝', '🌮', '🥮');
console.log(foods);

// 배열 인덱스의 1에 있는 값부터 끝까지 전부 없앤다.
foods.splice(1);
console.log(foods);

결과 :
["🍗", "🍕", "🍝", "🌮", "🥮"]
["🍗"]

foods.push('🍝', '🌮', '🥮');
console.log(foods);

// 배열 인덱스 1에 있는 값을 포함하여 3개의 값을 없앤다.
foods.splice(1, 3);
console.log(foods);

결과 :
["🍗", "🍕", "🍝", "🌮", "🥮"]
["🍗", "🥮"]

foods.push('🍝', '🌮', '🥮');
console.log(foods);

// 배열 인덱스 1의 자리에 있는 값을 없애고 '🥐', '🥘'을 추가한다.
foods.splice(1, 1, '🥐', '🥘');
console.log(foods);

결과 :
["🍗", "🍕", "🍝", "🌮", "🥮"]
["🍗", "🥐", "🥘", "🍝", "🌮", "🥮"]

🤝 concat

인자로 주어진 배열이나 값들을 병합하여 새로운 배열을 만든다.

console.log(foods);
const foods2 = ['🥗', '🍔'];
const newFoods = foods.concat(foods2);
console.log(newFoods);

 결과 :
 ["🍗", "🥐", "🥘", "🍝", "🌮", "🥮"]
 ["🍗", "🥐", "🥘", "🍝", "🌮", "🥮", "🥗", "🍔"]

👆🏻 indexOf

배열에 들어가있는 값의 인덱스를 찾아서 알려준다.

console.log(foods);
console.log(foods.indexOf('🌮'));

 결과 :
 ["🍗", "🥐", "🥘", "🍝", "🌮", "🥮"]
 4

🤔 includes

배열에 값이 들어가있는지 없는지 확인한 뒤 있으면 true, 없으면 false를 반환한다.

console.log(foods.includes('🥐'));
console.log(foods.includes('🍅'));

 결과 :
 true
 false

👇🏻 lastIndexOf

indexOf과 기능이 같지만 찾는 방향이 다르다.

indexOf이 앞에서부터 차례로 값이 있는지 없는지 검사한다면 lastIndexOf은 뒤에서부터 검사한다.

foods.push('🍗');
console.log(foods);
console.log(foods.indexOf('🍗'));
console.log(foods.lastIndexOf('🍗'));

 결과 :
 ["🍗", "🥐", "🥘", "🍝", "🌮", "🥮", "🍗"]
 0
 6

push,pop과 shift,unshift는 무슨 차이가 있을까?

push와 pop, shift와 unshift.
이 4가지 함수는 모두 배열에 값을 삽입하거나 삭제하는 함수이다. 두 함수는 똑같은 기능을 하고 있지만 성능적으로 차이가 존재한다.

push와 pop은 배열의 끝에서 값을 넣고 빼고있고 shift와 unshift는 배열 앞에서 값을 넣고 빼고 있다.

배열의 끝에서 넣고 빼는 작업은 나머지 값을 이동시켜 공간을 확보할 필요없이 자유롭게 삽입과 삭제가 가능하다. 하지만 배열의 앞에서 값을 넣고 빼는 과정은 앞에서 아이템을 삭제하고 뒤의 아이템을 앞 칸으로 이동시키거나 앞에서 아이템을 넣기 위해 기존에 있던 아이템을 뒤로 일정 칸 이동시켜야한다.

결국 함수를 사용했을 때 배열의 작동 단계가 복잡한 shift와 unshift를 사용하면 push와 pop을 사용하는 것보다 상대적으로 느리고 비효율적이다.

그래서 많은 개발자들이 성능상의 이유로 push와 pop 함수를 위주로 사용하는 것이다.