Javascript Array

참조

자주 사용하는 연산

배열 만들기

let fruits = ['사과', '바나나']; 
console.log(fruits.length)
// 2

인덱스로 배열의 항목에 접근하기

let first = fruits[0] // 사과

let last = fruits[fruits.length - 1] // 바나나

forEach

배열의 항목들을 순환하며 처리하기

fruits.forEach(function (item, index, array) {
  console.log(item, index)
})
// 사과 0
// 바나나 1

push

배열 끝에 항목 추가하기

let newLength = fruits.push('오렌지')
// ["사과", "바나나", "오렌지"]

pop

배열 끝에서부터 항목 제거하기

let last = fruits.pop() // 끝에있던 '오렌지'를 제거
// ["사과", "바나나"]

shift

배열 앞에서부터 항목 제거하기

let first = fruits.shift() // 제일 앞의 '사과'를 제거
// ["바나나"]

unshift

배열 앞에 항목 추가하기

let newLength = fruits.unshift('딸기') // 앞에 추가
// ["딸기", "바나나"]

indexOf

배열 안 항목의 인덱스 찾기

fruits.push('망고') // ["딸기", "바나나", "망고"]
let pos = fruits.indexOf("바나나") // 1

splice

인덱스 위치에 있는 항목 제거하기

let removedItem = fruits.splice(pos, 1) // 항목을 제거하는 방법
// ["딸기", "망고"]

인덱스 위치에서부터 여러개의 항목 제거하기

let vegetables = ['양배추', '순무', '무', '당근']
console.log(vegetables)
// ["양배추", "순무", "무", "당근"]

let pos = 1
let n = 2

let removedItems = vegetables.splice(pos, n)
// 배열에서 항목을 제거하는 방법
// pos 인덱스부터 n개의 항목을 제거함
console.log(vegetables) // ["양배추", "당근"] (원 배열 vegetables의 값이 변함)
console.log(removedItems) // ["순무", "무"]

[...]

배열 복사하기

let shallowCopySpread = [...fruits] // ["딸기", "망고"]

위 코드는 전개 구문을 사용해 배열의 얕은 복사를 만드는 방법입니다. 배열을 복사하는 다른 방법은 아래의 배열 복사하기에서 논의합니다.

배열 요소에 접근하기

JavaScript 배열의 인덱스는 0부터 시작합니다. 즉, 배열 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 length 속성에서 1을 뺀 것과 같습니다.

잘못된 인덱스를 사용하면 undefined를 반환합니다.

let arr = ['첫 번째 요소입니다', '두 번째 요소입니다', '마지막 요소입니다']
console.log(arr[0])              // '첫 번째 요소입니다'를 기록
console.log(arr[1])              // '두 번째 요소입니다'를 기록
console.log(arr[arr.length - 1]) // '마지막 요소입니다'를 기록

toString이 속성인 것과 마찬가지로 (정확히 하자면, toString()은 메서드입니다) 배열의 요소도 속성입니다. 하지만 배열 요소에 아래 코드처럼 접근하려고 하면, 속성 이름이 유효하지 않기 때문에 구문 오류가 발생합니다.

console.log(arr.0) // 구문 오류

이 현상은 JavaScript 배열과 그 속성에 어떤 특별한 점이 있어서 그런 것이 아닙니다. 모든 JavaScript 속성은 이름이 숫자로 시작할 경우 마침표 표기법으로 접근할 수 없고, 대괄호 표기법을 사용해야 합니다.

예를 들면, 어떤 객체에 '3d'라는 이름의 속성이 있다면, 이 속성에 접근할 땐 대괄호 표기법을 사용해야만 합니다.

let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
console.log(years.0)   // 구문 오류
console.log(years[0])  // 정상 작동

renderer.3d.setTexture(model, 'character.png')     // 구문 오류
renderer['3d'].setTexture(model, 'character.png')  // 정상 작동

3d 예시에서 '3d'를 따옴표로 감싸야 함에 유의하세요. JavaScript 배열 인덱스도 years[2] 대신에 years['2']를 사용하듯 따옴표로 둘러쌀 수 있습니다. 그러나 굳이 그럴 필요는 없습니다.

years[2]의 2는 JavaScript 엔진이 암시적인 toString 변환을 사용해 문자열로 변환합니다. 그 결과로서 '2'와 '02'는 years 객체에서 서로 다른 칸을 가리키며, 다음 코드는 true가 될 수 있습니다.

console.log(years['2'] != years['02']);

배열 길이와 숫자형 속성의 관계

JavaScript 배열의 length 속성과 숫자형 속성은 연결되어 있습니다.

몇몇 배열 내장 메서드(join, slice, indexOf 등)은 호출했을 때 배열의 length 속성의 값을 참고합니다.

다른 메서드(push, splice 등) 또한 배열의 length 속성을 바꾸는 결과를 낳습니다.

const fruits = []
fruits.push('바나나', '사과', '복숭아')

console.log(fruits.length) // 3

배열 인덱스로 유효한 속성을 JavaScript 배열에 설정할 때, 그 인덱스가 현재 배열의 경계 바깥에 있는 경우, JavaScript 엔진은 배열의 length 속성을 그에 맞춰 업데이트 합니다.

fruits[5] = 'mango'
console.log(fruits[5])           // '망고'
console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
console.log(fruits.length)       // 6

length를 직접 늘려도 요소에 변화는 없습니다.

fruits.length = 10
console.log(fruits)              // ['바나나', '사과', '복숭아', 비어 있음 x 2, '망고', 비어 있음 x 4]
console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
console.log(fruits.length)       // 10
console.log(fruits[8])           // undefined

하지만, length 속성을 감소시키면 요소가 지워집니다.

fruits.length = 2
console.log(Object.keys(fruits)) // ['0', '1']
console.log(fruits.length)       // 2

정규표현식 일치 결과를 이용한 배열 생성

RegExp와 문자열 사이의 일치 결과는 JavaScript 배열을 반환합니다. 이 배열은 일치 결과에 대한 정보를 포함하는 속성과 요소가 담겨있습니다. RegExp.exec(), String.match()의 반환 값에서 이런 배열을 볼 수 있습니다.

다음 예제와 표에서 배열의 속성과 요소에 대한 설명을 확인하세요.

// 하나의 d와 하나 이상의 b에 하나의 d가 뒤따라 일치해야 함
// 일치한 b와 다음 d를 기억할 것
// 대소문자 구분 없음

const myRe = /d(b+)(d)/i
const myArray = myRe.exec('cdbBdbsbz')