[JavaScript] 배열

배열

• 여러 자료를 묶어서 활용할 수 있는 특수한 자료
• 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형
• 대괄호 [ ] 를 사용해 생성, 내부의 값은 쉼표로 구분해 입력 → 배열 내부에 들어있는 값 (요소)
  • [요소, 요소, 요소, 요소, …, 요소]

  > const array = [273, 'String', true, function () { }, {}, [273, 103]]
  undefined

  > array
    (6) [273, 'String', true, f, {...}, Array(2)] 

 

배열 요소에 접근

• 요소의 순서 → 인덱스
  • 배열[인덱스]

  > const numbers = [273, 52, 103, 32]
  undefined

  > numbers[0]
  273
  > numbers[1]
  52

  > numbers[1+1]
  103
  > numbers[1 * 3]
  32

 

배열 요소 개수 확인

• length 속성 사용
  • 배열.length

  > const fruits = ['배', '사과', '키위', '바나나']
  undefined

  > fruits.length
  4

  > fruits[fruits.length - 1]
  "바나나"

 

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

배열.push(요소)

• • push 사용

> const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
undefined

> todos
(3) ["우유 구매", "업무 메일 확인하기", "필라테스 수업"]

> todos.push('저녁 식사 준비하기')
4

> todos.push('피아노 연습하기')
5

> todos
(5) ["우유 구매", "업무 메일 확인하기", "필라테스 수업", "저녁 식사 준비하기", "피아노 연습하기"]

 

인덱스 사용

• 특정 인덱스에 요소를 강제 추가하는 것으로 특정 인덱스 전에 빈 인덱스가 생길 경우 empty가 됨

> const fruitsA = ['사과', '배', '바나나']
undefined

> fruitsA[10] = '귤'
"귤"

> fruitsA
(11) ["사과", "배", "바나나", empty x 7, "귤"]

• 빈 인덱스 생성 방지

> const fruitsB = ['사과', '배', '바나나']
undefined

> fruitsB[fruitsB.length] = '귤'
"귤"

> fruitsB
(4) ["사과", "배", "바나나", "귤"]

 

배열 요소 제거

인덱스 사용

• 배열.splice(인덱스, 제거할 요소의 개수)

> const itemsA = ['사과', '배', '바나나']
undefined

> itemsA.splice(2, 1)
["바나나"]

> itemsA
(2) ["사과", "배"]

값 사용

• const 인덱스 = 배열.indexOf(요소)
• 배열.splice(인덱스, 1)

> const itemsB = ['사과', '배', '바나나']
undefined

> const index = itemsB.indexOf('바나나')
undefined

> index
2

> itemsB.splice(index, 1)
["바나나"]

> itemsB
(2) ["사과", "배"]

> itemsB.indexOf('바나나')
-1

 

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

• 배열.splice(인덱스, 0, 요소)

> const itemsD = ["사과", "귤", "바나나", "오렌지"]
undefined

> itemsD.splice(1, 0, "양파")
[]

> itemsD
(5) ["사과", "양파", "귤", "바나나", "오렌지"]