https://youtu.be/yOdAVDuHUKQ
드림코딩 by 엘리 님의 유튜브 강의를 보며 정리한 내용입니다.
Array
Array 는 자료 구조 중 하나이다.
자료구조란, 비슷한 종류의 데이터들을 묶어서 한데다 보관해 놓는것을 말한다. 자료구조에서는 어떤 방식으로, 어떤 형식으로 데이터를 담느냐에 따라 굉장히 다양한 타입들이 있다.
Array 배열
- index는 0부터 시작한다.
- 배열안에는 동일한 타입의 데이터들만 넣자!
(JavaScript은 dynamically typed language 즉, 타입이 동적으로 정의가 되기 때문에 다양한 종류의 데이터들을 한 곳에 담을 수는 있지만 그렇게 쓰는것은 피하자! 😇) - index로 배열에 접근 가능 .. 그래서 삽입과 삭제가 너무 편하다!
1. Declaration
배열을 선언하는 방법은 두가지가 있다.
① new
new 라는 키워드를 이용해서 Object를 만드는 것처럼 배열을 선언한다.
const arr1 = new Array();② [대괄호]
[대괄호] 를 이용해서 데이터를 넣어 배열을 만든다.
const arr2 = [1,2];2. Index position
배열안에 있는 item들은 Index 를 통해 접근할 수 있다.
const fruits = ['🍎', '🍌'];
console.log(fruits); // (2)["🍎", "🍌"]
console.log(fruits.length); //2
console.log(fruits[0]); //🍎
console.log(fruits[1]); //🍌
//만약 그 밖에 있는 index에 접근한다면?
console.log(fruits[2]); //undefined ..왜냐면 아무것도 들어있지 않기 때문이다.- object 에서는
fruits['key']이렇게 key라는 string을 이용하면
→ 그 key에 상응하는 value 들을 받아올 수 있었다. - 그것처럼 array 에서는
fruits[index]이렇게 index(숫자)를 전달하게되면
→ 그 index에 해당하는 value 들을 받아올 수 있다.
🤔 밖에 있는 index를 호출하면 undefined라고 나오는데, 그럼 마지막 인덱스에는 어떻게 접근할 수 있을까?
→ 배열의 length에 -1을 해줘서 마지막 데이터에 접근한다.
console.log(fruits[fruits.length - 1]); //🍌3. Looping over an array
배열안에 들어있는 전체적인 데이터를 빙글빙글 돌면서 출력해보기!
① for
for (let i = 0; i < fruits.length-1; i++) {
console.log(fruits[i]);
}
//🍎
//🍌② for of
for (let fruit of fruits) {
console.log(fruit);
}
//🍎
//🍌③ forEach
배열 안에 들어있는 value들마다 내가 전달한 함수를 출력한다.
fruits.forEach(function(fruit) {
console.log(fruit);
});
//🍎
//🍌✨ 이렇게 이름이 없는(annonymous) 함수는 arrow function 으로 더 간단하게 만들 수 있다.
fruits.forEach((fruit) => console.log(fruit));4. Addition, deletion, copy
① push
push : add an item to the end
fruits.push('🍓','🍑');
console.log(fruits); //(4)["🍎","🍌","🍓","🍑"]② pop
pop : remove an item from the end
fruits.pop(); //뒤에서부터 하나가 없어진다.
fruits.pop(); //또 하나가 뒤에서부터 없어진다.
console.log(fruits); //(2)["🍎","🍌"]③ unshift
unshift : add an item to the begining
fruits.unshift('🍓','🍋');
console.log(fruits); //(4)["🍓","🍋","🍎","🍌"]④ shift
shift : remove an item from the begining
fruits.shift(); //앞에서부터 하나가 없어진다.
fruits.shift(); //또 하나가 앞에서부터 없어진다.
console.log(fruits); //(2)["🍎","🍌"]📒 NOTE! shift, unshift are much much slower than pop, push
→ 왜냐하면 앞에서부터 추가하거나, 앞에서부터 빼면 전체의 데이터들도 다 이동해야 하기 때문에 shift 와 unshift 는 더 느리고, 반대로 pop 과 push 처럼 제일 뒤에서 아이템에 접근하는 것은 빠르다!
⑤ splice
splice : remove an item by index position 지정된 위치(position)에서 데이터들을 삭제
splice ( 시작하는 index, 몇개나 지울지, 원하는 데이터를 더 추가 )
fruits.push("🍓","🍑","🍋"); //일단 배열에 과일을 좀 더 추가해보자
console.log(fruits); //(5)["🍎","🍌","🍓","🍑","🍋"]
fruits.splice(1,1); //1번 index(🍌) 부터 하나만 지우기
console.log(fruits); //(4)["🍎","🍓","🍑","🍋"]
fruits.splice(1,1,'🍏','🍉'); //1번 index(🍓) 부터 하나만 지우고나서, 그 자리에! 🍏,🍉을 넣어준다.
console.log(fruits); //(5)["🍎","🍏","🍉","🍑","🍋"]
fruits.splice(1,0,'🍐','🥥'); //1번 index(🍏) 부터 지우는건 하나도 하지않고, 🍐,🥥 만 추가한다.
console.log(fruits); //(7)["🍎","🍏","🍐","🥥","🍉","🍑","🍋"]
fruits.splice(1); //몇개 지울건지 안써주면 1번 index 부터 뒤로 싹 지워진다.
console.log(fruits); //(2)["🍎","🍏"]⑥ concat
concat : combine two arrays 두 가지의 배열을 묶어서 만든다
const fruits2 = ['🍐','🥥'];
const newFruits = fruits.concat(fruits2);
// fruits에 fruits2를 합해서 묶은 배열이 return 되고, 이것을 newFruits로 받는다.
console.log(newFruits); //(4)["🍎","🍏","🍐","🥥"]5. Searching
find the index 검사, 검색할 수 있는 API
① indexOf
몇 번째 index 에 있는지 확인할 수 있다. 단, 앞에서부터 처음 만나는 것을 알려준다.
- 첫 번째로 만나는 해당 index 값을 알려준다.
- 만약 없는 값을 넣으면,
-1이 출력된다.
const fruits = ["🍎","🍏","🍉","🍑","🍋"]
console.log(fruits.indexOf('🍎')); //0
console.log(fruits.indexOf('🍉')); //2
console.log(fruits.indexOf('🥑')); //-1 ..이렇게 없는 값을 출력하면 -1이 출력된다.② lastIndexOf
몇 번째 index 에 있는지 확인할 수 있다. 단, 제일 마지막으로 들어있는 것을 알려준다.
- 마지막에 있는 해당 index 값을 알려준다.
console.log(fruits); //(5)["🍎","🍏","🍉","🍑","🍋"]
fruits.push('🍎'); // 만약 똑같은 🍎가 뒤에 또 있다면?
console.log(fruits.lastIndexOf('🍎')); //5③ includes
배열 안에 포함되어 있는지 아닌지 확인 할 수 있다.
- 있으면
true - 없으면
false
console.log(fruits.includes('🍑')); //true
console.log(fruits.includes('🥑')); //false