[자바스크립트 기초] 배열의 개념과 APIs

드림코딩 자바스크립트 기초 강의를 들으며 학습한 내용을 정리해보았다.
⭐️ 재생목록 바로가기

1️⃣ 자료 구조

• 자료 구조는 비슷한 타입의 오브젝트들을 묶어놓은 것
• 타입이 있는 언어에서는, 동일한 타입의 오브젝트들만 한 자료구조에 담을 수 있다. 하지만 자바스크립트는 타입이 동적으로 정의되는 언어!
  한 자료 구조안에 다양한 타입의 데이터를 담을 수 있지만 지양해야함

2️⃣ 자료 구조 - Array

1. 배열 선언

const arr1 = new Array();
const arr2 = [1, 2];

2. 인덱스를 통해 배열에 접근하기

const fruits = ['🍎','🍌'];
console.log(fruits);
console.log(fruits[0]);
console.log(fruits[fruits.length - 1]);//배열 마지막 데이터 출력

3. 배열 루프

//print all fruits

///1) for 루프

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

///2) for of 
for(let fruit of fruits){
    console.log(fruit);
}

///3) forEach

fruits.forEach((fruit,index) => console.log(fruit,index))

4. add, delete, copy

///4-1) push: 맨 끝에 item 추가
fruits.push('🍉','🍋');
console.log(fruits);
///4-1) pop: 맨 끝의 item 제거
fruits.pop();
console.log(fruits);

///4-2) unshift: 맨 앞에서 item 추가
fruits.unshift('🍇');
console.log(fruits);
///4-2) shift: 맨 앞에서 item 제거
fruits.shift();//'🍇' 제거
fruits.shift();//'🍎' 제거
console.log(fruits);//['🍌', '🍉']

///4-3)splice : 특정 인덱스의 item 제거
fruits.push('🍓','🥝','🍊');
console.log(fruits);//['🍌', '🍉', '🍓', '🥝', '🍊']

fruits.splice(0,1);//0번째 인덱스에서부터 1개 삭제(자기 자신)
console.log(fruits);//['🍉', '🍓', '🥝', '🍊']
fruits.splice(1,2,'🍇','🍑')//1번째 인덱스에서부터 2개 삭제후, 그 자리를 '🍇','🍑'로 대체
console.log(fruits);//['🍉', '🍇', '🍑', '🍊']
fruits.splice(1);//1번째 인덱스에서부터 전부
console.log(fruits);//['🍉']


///4-4) concat : 두 개의 배열 합치기
const fruits2 = ['🍋','🫐'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits); //['🍉', '🍋', '🫐']

💡 맨 뒤에서 데이터를 추가, 삭제하는 push, pop 는 맨 앞에서 데이터를 추가, 삭제하는 unshift,shift보다 처리가 빠르다.
why? -> 맨 뒤에서 데이터를 변경하는 것은 기존 데이터를 건드릴 필요가 없는 반면,
앞에서 데이터를 변경하려면 기존 데이터를 순차적으로 옮겨가면서 처리해야한다.
따라서 처리 속도 빠른 pop, push 권장됨!

5. 인덱스 검색하기

console.log(newFruits);//['🍉', '🍋', '🫐']

///5-1) indexOf
console.log(newFruits.indexOf('🍋'));//1
console.log(newFruits.indexOf('🍉'));//0
console.log(newFruits.indexOf('🍒'))//-1, 배열 내에 없는 것을 출력할 때는 -1

///5-2) includes
console.log(newFruits.includes('🍒'))//false
console.log(newFruits.includes('🫐'))//true

///5-3) lastIndexOf
console.clear();
newFruits.push('🍋')//똑같은 데이터를 맨 끝에 추가
console.log(newFruits);//
console.log(newFruits.indexOf('🍋'));//1, indexOf는 같은 데이터 중 맨 첫번째 데이터의 인덱스번호를 가져온다
console.log(newFruits.lastIndexOf('🍋'));//3, lastIndexOf는 같은 데이터 중 맨 마지막 데이터의 인덱스번호를 가져온다