[JS-엘리] JS 8강 - 배열 개념과 APIs 총정리 | (JavaScript ES6 )

동영상 수강 전 본문 내용 스캔.

동영상 수강 후 본문 내용 스캔. 

목차 

 

00:49 배열 개념. (※ 객체 vs 자료구조)

06:07 1. Array declaration

07:00 2. Index position

09:46 3. Looping over an array

16:51 4. Addition, Deletion, Copy 

26:22 5. Searching

 

00:49

1. 객체 vs 배열

 

[객체]

토끼 (귀 2개, 먹는다, 뛴다)

당근 (비타민, 주황색)

 

 

[배열] ≒ 자료 구조의 일종.

토끼 종류끼리 묶음.  

당근 종류끼지 묶음. 

※ 토끼, 당근 함께 묶을 수 있으나, 비권장.

 

PS1. (검색・삽입・삭제・정렬)할 때, 속도 효율성 좋은 알고리즘 선택이 중요.

PS2. 배열 index (= 색인번호)는 0부터 시작. 마지막 index는 arr.length - 1

06:07

1. Array declaration

 

'use strict';

// Array 

// 1. Declaration

const arr1 = new Array();

const arr2 = [1, 2]; // 더 흔한 방법

07:00

2. Index position

 

// 2. Index position

const fruits = ['사과', '바나나'];

console.log(fruits); // (2) ['사과', '바나나']

console.log(fruits.length); // 2

console.log(fruits[0]); // 사과

console.log(fruits[1]); // 바나나

console.log(fruits[2]); // undefined

console.log(fruits[fruits.length - 1]; // 바나나

 

결과보기

09:46

3. Looping over an array

 

// 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 (let fruit of fruits) {

    console.log(fruit);

}

// c. forEach (※ 3가지 방법 존재)

// c-1. 일반함수

fruits.forEach(function(fruit, index, array) {

    console.log('he');

    console.log(fruit);

    console.log(fruit, index);

    console.log(fruit, index, array); // 가능하긴 하나, 거의 안 씀.    

});

// c-2. 화살표함수

fruits.forEach((fruit, index) => {

    console.log(fruit, index);

});

// c-3. 화살표함수 축약형

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

 

fruits.forEach((fruit) => console.log(fruit));

 

결과보기

16:51

4. Addition, Deletion, Copy

 

console.clear();

// 4. Addition, Deletion, Copy

 

// [뒤]

// push : add an item to the end

fruits.push('딸기', '복숭아');

console.log(fruits); // ['사과', '바나나', '딸기', ' 복숭아']

// pop : remove an item from the end and return it.

// const popped = fruits.pop(); 

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();

console.log(fruits);  // ['레몬', '사과', '바나나']

fruits.shift();

console.log(fruits);  // ['사과', '바나나']

// note!! shift, unshift are slower than pop, push

// ∵ 기존 아이템의 자리 이동 작업까지 발생

// [색인번호]

// splice : remove an item by index position

fruits.push('딸기', '복숭아', '레몬'); 

console.log(fruits); // ['사과', '바나나', '딸기', '복숭아', '레몬']

/*

fruits.splice(1); // index 1부터 그 뒤는 모두 제거. 

console.log(fruits); // ['사과']

*/

fruits.splice(1,1); // index 1부터 그 뒤는 모두 제거. 

console.log(fruits); // ['사과', '딸기', '복숭아', '레몬']

fruits.splice(1,1,'청사과', '수박'); // 딸기 제거하고, 청사과・수박 추가.

console.log(fruits); // ['사과', '청사과', '수박', '복숭아', '레몬']

 

/*

fruits.splice(1,0,'청사과', '수박'); // 딸기 그대로 두고, 청사과・수박 추가.

console.log(fruits); // ['사과', '딸기', '청사과', '수박', '복숭아', '레몬']

*/

 

// [결합]

// concat : combine two arrays

const fruits2 = ['망고', '코코넛'];

const newFruits = fruits.concat(fruits2);

console.log(newFruits); // ['사과', '청사과', '수박', '복숭아', '레몬', '망고', '코코넛']

결과보기

PS. 이모지도 문자이므로, 배열값으로 사용 시, 작은따옴표로 묶어줘야 함.

26:22

5. Searching

 

// 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

console.clear();

fruits.push('사과');

console.log(fruits);

console.log(fruits.indexOf('사과')); // 0

console.log(fruits.lastIndexOf('사과')); // 5

 

결과보기