jsNote 07: 배열 Array

Q. 자료구조란?

• 비슷한 타입의 데이터(object)를 묶어서 한 곳에 보관해 놓는 것이다.
• js는 동적타입언어이므로 동일한 타입의 객체만 담지 않아도 되지만 그렇게 하는 것이 중요하다.
• 어떤 자료구조를 선택해야 검색, 삽입, 정렬, 삭제를 효율적으로 할 수 있는지 고려한다.
• 자료 구조 중 하나가 배열이며 배열 안에 박스, 박스 별로 0부터 시작하는 index가 있다.
  
  
  

1. Array declaration 배열 선언

const arr1 = new Array();
const arr2 = [1, 2, 3]; //길이가 3개인 배열, 0번째 Index에 1이 들어있는 배열

2. Index position 인덱스 위치

const fruits = ['🍎', '🍌'];
console.log(fruits); //["🍎", "🍌"]
console.log(fruits.length); //2
console.log(fruits['0']); //🍎
console.log(fruits[3]); //undefined
console.log(fruits[fruits.length-1]); //마지막 index

3. Looping over an array

//a. for
for(let i=0; i<fruits.length; i++){
    console.log(fruits[i]);
}

//b. for of
for(let key of fruits){
    console.log(key);
}

//c. forEach
fruits.forEach((fruit, index) => console.log(fruit, index)); //forEach는 콜백함수를 받아옴

fruits.forEach(function(fruit, index){
    console.log(fruit, index);
}); //이름이 없는 함수는 위처럼 화살표 함수로 만들 수 있음

4. Addition, deletion, copy

//push: add an item to the end 뒤에서부터 아이템 추가하기
fruits.push('🥝','🥥');
console.log(fruits); //["🍎", "🍌", "🥝", "🥥"]

//pop: remove an item from the end 뒤에서부터 아이템 빼기
fruits.pop();
console.log(fruits); //["🍎", "🍌", "🥝"]

//unshift: add an item to the beginning 앞에서부터 아이템 넣기
fruits.unshift('🍑', '🍉');
console.log(fruits); //["🍑", "🍉", "🍎", "🍌", "🥝"]

//shift: remove an item from the beginning 앞에서부터 아이템 빼기
fruits.shift();
fruits.shift();
console.log(fruits); //["🍎", "🍌", "🥝"]

• shift와 unshift는 push와 pop보다 훨씬 느리다.
• 앞에서부터 넣을 때는 데이터를 뒤의 박스로 하나씩 옮겨야 하며(인덱스 이동) 뒤에서부터 넣을 때는 앞의 데이터들이 움직이지 않아도 되기 때문이다.
• 따라서 배열이 길면 길수록 shift와 unshift는 피하는 것이 좋다.

//splice: remove an item by index position
fruits.push('🍉', '🍊');
console.log(fruits); //["🍎", "🍌", "🥝", "🍉", "🍊"]
fruits.splice(1, 1); //1이라는 인덱스부터 1개 지우기. 설정하지 않으면 1이라는 인덱스부터 다 지워짐
console.log(fruits); //["🍎", "🥝", "🍉", "🍊"]
fruits.splice(1, 1, '🍒'); //지우고 새로운 아이템을 추가도 가능
console.log(fruits); // ["🍎", "🍒", "🍉", "🍊"]

//concat: combine two arrays 두 배열 합치기
const fruits2 = ['🍈', '🍇'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits); //["🍎", "🍒", "🍉", "🍊", "🍈", "🍇"]

5. Searching index 인덱스 찾기

//indexOf, includes
console.log(newFruits.indexOf('🍒')); //1
console.log(newFruits.includes('🍕')); //false 피자가 들어있는지 보는 방법
console.log(newFruits.indexOf('🍕')); //배열 안에 피자가 없으면 -1 출력

//lastIndexOf
newFruits.push('🍒');
console.log(newFruits); //["🍎", "🍒", "🍉", "🍊", "🍈", "🍇", "🍒"]
console.log(newFruits.indexOf('🍒')); //1
console.log(newFruits.lastIndexOf('🍒')); //6