[JavaScript] 자바스크립트 배열 (Array)

[JavaScript] 자바스크립트 배열 (Array)

---

배열은 많은 수의 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 좋도록 하는 데이터 타입인데요. 객체랑은 다르게, 속성은 가지고 있지 않고,  데이터들이 순서대로 저장하는데, 이 배열에 대해 한번 알아보도록 하겠습니다.

▶ 배열의 선언

const arr1 = new Array(1,2,3,4,5)
const arr2 = [1,2,3,4,5]

console.log(arr1)
console.log(arr2)

// 터미널 결과 출력
// [1,2,3,4,5]
// [1,2,3,4,5]

배열은 선언하는 방법은 2가지입니다. 하나는 객체를 선언하듯이 'new'키워드 작성한 다음 'Array(데이터1, 데이터2, ... )'를 작성해주시면 되며, 아니면 바로 [데이터1, 데이터2, ... ]를 작성해주셔도 됩니다. console.log를 통해 출력을 해보면 두개의 배열이 같은걸 확인할 수 있습니다.

▶ 배열 안의 데이터 [요소(Element)] 추출

const arr1 = new Array(1,2,3,4,5)
const arr2 = [1,2,3,4,5]

console.log(arr1[0])
console.log(arr2[1])

// 터미널 결과 출력
// 1
// 2

배열 안의 데이터를 요소 (element)라 부릅니다. 배열을 이용해 데이터를 모은건 좋은데, 배열안의 요소들을 다 쓸수도 있지만, 일부만 사용할 수도 있고, 하나를 사용할 수도 있습니다. 위의 코드는 배열의 요소들중 하나를 추출해서 결과를 출력했는데요. 'console.log'를 보면 'arr1[0]'을 작성한걸 볼 수 있습니다. 배열의 순서는 1부터 시작하는것이 아니라, 0부터시작을 하게 됩니다. 그리고 이 0을 '인덱스'라고 부릅니다.

인덱스란?
배열의 요소 위치를 '인덱스'라 부르는데, 객체에서 '속성'과 같은 역할을 하고 있습니다. 다만, '속성'은 이름을 지정해줄수 있지만, '인덱스'의 경우 0부터 시작을 해서 1씩 증가하는 방식으로 되어있습니다.

즉, 'arr1'배열안에 5개의 요소가 들어가있는데, 인덱스는 '0 ~ 4'까지 있다 생각하시면 됩니다. 좀 더 자세히 알아보죠.

const arr1 = new Array(1,2,3,4,5)

for (let i = 0; i < 5; i++) {
    console.log(arr1[i])
}

// 터미널에 결과 출력
// 1
// 2
// 3
// 4
// 5

배열을 사용하게 되면, 보통 'for문'을 많이 사용하게 될껍니다. 이 'for문'의 조건을 보면, 'i 변수를 0으로 초기화 한 다음, i의 값이 5미만일때까지 i를 증가해라'라고 적혀있습니다. 즉, 이 for문은 'i가 0,1,2,3,4'일때 작동을 하게 되고 'i가 5 이상'이 될 경우, 해당 값은 코드가 실행되지 않습니다. 위에서 설명드렸지만, '인덱스'는 0부터 시작을 하기 때문에, 에러없이 배열안의 요소를 하나하나 출력하는 모습을 볼 수 있습니다.

참고 - 또 다른 for문

const arr1 = new Array(1,2,3,4,5)

for (const num of arr1) {
    console.log(num)
}

// 터미널에 결과 출력
// 1
// 2
// 3
// 4
// 5

for문을 사용할때 위의 코드같이 사용을 해도 같은 결과를 확인할 수 있습니다. 다만, 특정범위를 지정해야될 경우에는 이 코드가 아닌 이전 코드를 사용해야됩니다.

const arr1 = new Array(1,2,3,4,5)

for (let i = 1; i < 6; i++) {
    console.log(arr1[i])
}

// 터미널에 결과 출력
// 2
// 3
// 4
// 5
// undefined

이번에는 for문의 조건을 'i 변수를 1로 초기화 한 다음, i의 값이 6미만일때까지 i를 증가해라'고 바꾸었습니다. '인덱스'는 0부터 시작한다고 했는데, 해당 코드는 1부터 시작하기 때문에 배열에서 2값이 먼저 출력되는걸 볼 수 있습니다. 그리고 배열에서 인덱스 6번 위치에는 아무런 값이 없기때문에 'undefined (할당된 변수가 없음)'을 보여주고 있습니다. 보통 에러를 발생할껀데, JS에서는 'undefined'로 출력해 에러없이 정상적으로 코드가 실행되니, 이 부분은 조심해야될꺼 같습니다.

▶ 배열의 요소 추가

const arr = [1,2,3,4,5]

arr.push(6)
console.log(arr)

// 터미널에 결과 출력
// [1,2,3,4,5,6]

배열을 선언하고 난 다음, 요소를 추가 하고 싶다면, 'push()'메소드를 사용하시면 됩니다.

배열을 선언한 다음 '배열명.push(데이터값)'을 작성하면, 해당 배열의 맨 마지막에 요소를 추가해줍니다. 그런데, 배열을 선언할때 'const'로 선언을 했음에도 배열에 값을 추가할 수 있습니다.

const arr = [1,2,3,4,5]

arr = [1,2,3] // 에러 발생
console.log(arr)

위의 코드를 보면 배열 자체를 변경할려고 시도하면 에러가 발생하는걸 확인할 수 있습니다. 즉, 배열안에 추가/삭제는 가능하지만, 새로운 배열을 작성해서 할당을 시도하는것은 불가능합니다.

참고 - 배열의 요소 변경방법

const arr = [1,2,3,4,5]

arr[0] = 10
arr[1] = 20
arr[2] = 30

console.log(arr)

// 터미널에 출력 결과
// [10,20,30,4,5]

그렇지만, 배열의 요소를 변경이 아예 불가능하지는 않습니다. 위의 코드같이 배열의 인덱스를 통해 값을 넣으면, 해당 배열의 요소들이 변경되는 모습을 확인할 수 있습니다.

▶ 배열의 요소 삭제

const arr = [1,2,3,4,5]

arr.pop()
console.log(arr)
arr.pop()
console.log(arr)

// 터미널에 결과 출력
// [ 1, 2, 3, 4 ]
// [ 1, 2, 3 ]

배열의 요소를 삭제하는 방법은, '배열명.pop()'메소드를 사용하면 해당 배열의 마지막 요소를 제거하는 모습을 확인할 수 있습니다.