JS 기초_3.1(배열)

항해99 온보딩 커리큘럼 3일차

 

배열

> const str = '안녕하세요'

> str[2]
하

> str[str.length-1]
요

안	녕	하	세	요
[0]	[1]	[2]	[3]	[4]

※배열 요소의 순서(인덱스)와 개수(length) 헷갈리지 말기

 

배열만들기

[요소, 요소, 요소, ... ,요소]

 

배열 요소 접근하기

array[인덱스]

> const numbers = [89, 10, 22, 27]
> numbers[0]   // 자바스크립트는 순서를 0부터 센다
89
> numbers[1]
10
> numbers[1+1]    //괄호안에서 연산 가능
22

 

배열 요소 개수 확인하기

array.length

> const fruits = ['배', '사과', '딸기', '바나나']
> fruits.length
4    //요소의 개수

 

배열 뒷부분에 요소 추가하기

push()

array.push(요소)

>const todos = ['7시 기상하기', '운동하기', '간헐적 단식하기']

>todos
(3)['7시 기상하기', '운동하기', '간헐적 단식하기']

>todos.push('공부하기') // 배열의 마지막에 요소추가
4

>todos
(4)['7시 기상하기', '운동하기', '간헐적 단식하기','공부하기'] // 결과

인덱스로 추가하기

> const fruits = ['배', '사과', '딸기', '바나나']

> fruits[10] = '귤'    // 배열의 10번째에 귤 추가
"귤"

fruits
(11)["배", "사과", "딸기", "바나나", empty x 7, "귤"]
// 자바스크립트에서 배열 길이는 고정이 아니기 때문에 인덱스를 이용하여
// 요소를 추가하면 중간은 비게된다

 

배열 요소 제거하기

인덱스 기반 제거

array.splice(인덱스, 제거할 요소 개수)

>const items = ['사과', '딸기', '감']

>items.splice(0, 1)  //0번째 요소부터 1개 제거
['사과']   //해당하는 요소

>items
(2)['딸기', '감']

값을 기반으로 제거

const 인덱스 = array.indexOf(요소)
array.splice(인덱스, 1)

> const items = ['사과', '배', '감']

> const index = items.indexOf('배')   //배열에서 배의 위치를 찾는다
1   // 자바스크립트는 0번부터 시작하므로 배는 위의 배열에서 1번이다

> items.splice(index, 1)   //index는 1이므로 배열의 1번째 요소부터 1개 삭제
["배"]   //삭제된 요소

> items
(2)['사과', '감']    //결과

 

배열의 특정 위치에 요소 추가

array.splice(인덱스, 0, 요소)  
// 위의 2번째 매개변수에 0을 입력하면 splice 메소드는 아무 것도 제거하지 않는다

> const items = ["사과", "감", "귤", "오렌지"]

> items.splice(1, 0, "포도")  // 배열의 1번째에 아무것도 제거하지 않고 포도 추가
[]

> items
(5)["사과", "포도", "감", "귤", "오렌지"]

 

키워드 정리

• 여러 개의 변수를 한 번에 선언해 다룰 수 잇는 자료형을 배열이라고 한다
• 배열 내부에 있는 값을 요소라고 한다
• 비파괴적 처리란 처리 후에 원본 내용이 변경되지 않는 처리를 의미한다
• 파괴적 처리란 처리 후에 원본 내용이 변경되는 처리를 의미한다