[JavaScript] 그림으로 이해하는 자바스크립트 Array

 

Array 선언

 

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]

 

길이 얻기 (length)

 

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
console.log(animal.length) // 7

 

Element 얻기 ([idx])

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
console.log(animal[3]) // "dog"

 

Index 얻기 (indexOf)

만약 배열안에 찾는 값이 없다면 -1을 반환.

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
const index = animal.indexOf(”dog”)
console.log(index) // 3

 

앞에 Element 추가/제거 (unshift, shift)

const animal = ["beer", "cat", "dog", "eagle", "fox", "giraffe"]
const len = animal.unshift(”ant”)
console.log(len) // 7
console.log(animal) // ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]

 

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
const element = animal.shift()
console.log(element) // "ant"
console.log(animal) // ["beer", "cat", "dog", "eagle", "fox", "giraffe"]

 

뒤에 Element 추가/제거 (push, pop)

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox"]
animal.push("giraffe")
console.log(animal) // ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]

 
push 함수는 arr[arr.length]='value' 형태로 처리할 수도 있다.
다만, 추가하려는 index값이 전체 배열 길이보다 크다면 index 위치까지 undefined로 채우게 된다.
 

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox"]
animal[6] = "giraffe"
console.log(animal) // ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox"]
animal[7] = "giraffe"
console.log(animal) // ["ant", "beer", "cat", "dog", "eagle", "fox", undefined, "giraffe"]

 

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
animal.pop()
console.log(animal) // ["ant", "beer", "cat", "dog", "eagle", "fox"]



N번째에 Element 추가/제거 (splice, delete)

splice(idx, len, ...rest) // return []

idx의 위치부터 len만큼 제거하고 ...rest 요소를 삽입한다. 그리고 제거된 배열을 반환한다.
 

const animal = ["ant", "beer", "cat", "eagle", "fox", "giraffe"]
animal.splice(3, 0, "dog")
console.log(animal) // ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]

 

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
const removeAnimal = animal.splice(3, 1)
console.log(removeAnimal) // ["dog"]
console.log(animal) // ["ant", "beer", "cat", "eagle", "fox", "giraffe"]

 
delete를 통해 N번째 element를 제거할 수도 있다.
하지만 index 위치에서 element 빠지는 게 아닌 element가 undefined로 변경된다는 게 다르다.
 

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
delete animal[3]
console.log(animal) // ["ant", "beer", "cat", undefined, "eagle", "fox", "giraffe"]

 

Element 범위 얻기 (slice)

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
console.log(animal.slice(3)) // ["dog", "eagle", "fox", "giraffe"]
console.log(animal.slice(0, 4)) // ["ant", "beer", "cat", "dog"] 
console.log(animal.slice(3, 6)) // ["dog", "eagle", "fox"]

 

Element 변경하기 (1)

const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"]
animal[3] = "deer"
console.log(animal) // ["ant", "beer", "cat", "deer", "eagle", "fox", "giraffe"]

 

Element 변경하기 (2) - 범위 (splice)

const animal = ["ant", "beer", "cat", "apple", "banana", "cherry", "fox"]
const removeAnimal = animal.splice(3, 3, "dog", "eagle")
console.log(removeAnimal) // ["apple", "banana", "cherry"]
console.log(animal) // ["ant", "beer", "cat", "dog", "eagle", "fox"]

 

합치기 (concat)

 

const animalGroupA = ["ant", "beer", "cat", "dog"]
const animalGroupB = ["eagle", "fox", "garaffe"]
const animalGroupC = animalGroupA.concat(animalGroupB)
console.log(animalGroupC) // ["ant", "beer", "cat", "dog", "eagle", "fox", "garaffe"]

 

초기화

JavaScript는 배열을 초기화하는 함수를 지원하지 않지만, 아래와 같이 다양한 방법으로 초기화할 수 있다.

animal = []
animal.length = 0
animal.splice(0, animal.length)