코딩동강

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

760

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

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

 

목차 

 

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

 

결과보기



분류 제목
JS-바위 JS 80~82강 - 자바스크립트 객체 클래스
JS-바위 JS 77~79강 - 자바스크립트 모듈 활용 (Javascript Module)
JS-바위 JS 73~76강 - 테이블 페이지네이션 (Table Pagination)
JS-바위 JS 72강 - AOS 라이브러리 - 슝슝 나타나는 스크롤 애니메이션
JS-바위 JS 69~71강 - 숫자 그래프 애니메이션 (Number Animation)
JS-바위 JS 68강 - animate.css 라이브러리 - 스크롤이벤트 적용
JS-바위 JS 64~67강 - tailwindcss (node js - CSS framework) - CSS 없이 스…
JS-바위 JS 61~63강 - 최신 JS 문법 (ECMA SCRIPT 6) - 변수선언 키워드 let, const, …
JS-바위 JS 60강 - 인스타그램 (instagram) API - 인스타그램 피드를 웹사이트에 출력
JS-바위 JS 56~59강 - 쿠키 (Cookie) 이용해 「오늘 하루 안보기 팝업창 띄우기」 생성
JS-바위 JS 52~55강 - 멀티플 슬라이드 (Multiple Slideshow)
JS-바위 JS 51강 - 스크롤트리거 (scrollTrigger) - 스크롤 애니메이션 구현
JS-바위 JS 46~50강 - 필터링 반응형 갤러리 (Fitered Gallery)
JS-바위 JS 45강 - 하이라이트 무빙 탭 애니메이션 (Highlight Moving Tab animation)
JS-바위 JS 42~44강 - 풀스크린 슬라이드 (FullScreen Slide) 1 - CSS로만 구현
1/47
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰
Q&A 1
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인