배열 개념과 APIs

Object
- 서로 연관된 특징과 행동들을 묶어놓는 것

자료구조
- 비슷한 type의 object들을 묶어놓는 것(dynamically typed language)
- 다른 언어의 경우에는 동일한 type의 object만을 묶을 수 있다.

 

1. Declaration

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

 

2. Index position

const fruits = ['🍎', '🍌'];
console.log(fruits); // ['🍎', '🍌']
console.log(fruits.length); // 2
console.log(fruits[0]); // 🍎
console.log(fruits[1]); // 🍌
console.log(fruits[2]); // undefined
console.log(fruits[fruits.length - 1]); // 배열의 마지막 item 접근, 🍌

 

3. Looping over an array

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

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

// c. forEach
// 배열 안의 value들 마다 전달한 함수를 출력
fruits.forEach((fruit) => console.log(fruit));

 

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(); // ['🍎', '🍌', '🍓']
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);

// splice: remove an item by index position
fruits.push('🍓', '🍑', '🍋');
console.log(fruits); // ['🍎', '🍌', '🍓', '🍑', '🍋']
// splice(시작 index, 지울 item 개수(option))
fruits.splice(1);
console.log(fruits); // ['🍎'], 지정한 index부터 모든 item 삭제
fruits.splice(1, 1);
console.log(fruits); // ['🍎', '🍓', '🍑', '🍋']
fruits.splice(1, 1, '🍏', '🍉');
console.log(fruits); // ['🍎', '🍏', '🍉', '🍑', '🍋']
fruits.splice(1, 0, '🍏', '🍉'); // item 지우지 않고 해당 자리에 item 삽입
console.log(fruits); // ['🍎', '🍏', '🍉', '🍓', '🍑', '🍋']

// combine two arrays
const fruits2 = ['🍐','🥥'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits); // ['🍎', '🍏', '🍉', '🍑', '🍋', '🍐','🥥']

• shift, unshift는 push, pop보다 훨씬 느리다.
• 맨 앞에서 add, remove가 일어나기 때문에 기존에 있던 item들의 위치를 계속해서 옮겨야 하기 때문!

 

5. Searching

// indexOf: find the index
console.log(fruits); // ['🍎', '🍏', '🍉', '🍑', '🍋']
console.log(fruits.indexOf('🍎')); // 0
console.log(fruits.indexOf('🍉')); // 2
console.log(fruits.indexOf('🥥')); // -1

// includes
console.log(fruits.includes('🍉')); // true
console.log(fruits.includes('🥥')); // false

// lastIndexOf
fruits.push('🍎');
console.log(fruits); // ['🍎', '🍏', '🍉', '🍑', '🍋', '🍎']
console.log(fruits.indexOf('🍎')); // 0
console.log(fruits.lastIndexOf('🍎')); // 5

 

 

 

참고

youtube 드림코딩 by 엘리

https://www.youtube.com/watch?v=yOdAVDuHUKQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=8