JavaScript 배열은 길이도, 각 요소의 자료형도 고정되어 있지 않다. 배열의 길이가 변하며 데이터의 자료형이 일관적이지 않을 수 있으므로 Javascript의 배열은 밀집성을 보장하지 않는다. 이런 성질은 편리하지만 사용하려는 목적에 맞지 않으면 형식화 배열 (typed array)를 고려한다.
자주 사용하는 연산
○ 배열 만들기
let fruits = ['사과', '바나나']
console.log(fruits.length)
// 2
.length
- 인덱스로 배열에 요소를 추가할 때, 그 인덱스가 현재 배열의 경계 바깥에 있는 경우 length는 그에 맞춰 늘어난다.
- length를 직접 늘려도 요소에 변화는 없다.
- length를 감소시키면 요소가 지워진다.
○ 인덱스로 배열에 접근하기
let first = fruits[0]
// 사과
let last = fruits[fruits.length - 1]
// 바나나
배열은 인덱스로 정수만을 허용하며, 문자열은 사용할 수 없다. 대괄호 구문 또는 속성 접근자를 사용해 정수가 아닌 키에 접근할 경우 배열의 요소가 아니라 배열의 객체 속성 컬렉션에 연결된 변수를 바라보게 된다.
모든 JavaScript 속성은 이름이 숫자로 시작할 경우 마침표 표기법으로 접근할 수 없고, 대괄호 표기법을 사용해야 한다.
○ 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 배열 안 항목의 인덱스 찾기
없으면 -1 반환
fruits.push('망고')
// ["딸기", "바나나", "망고"]
let pos = fruits.indexOf("바나나")
// 1
○ splice 인덱스에 있는 항목 제거하기
let removedItem = fruits.splice(pos, 1) // 항목을 제거하는 방법
// ["딸기", "망고"]
○ splice 인덱스에 있는 여러 항목 제거하기
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]
// ["Strawberry", "Mango"]
Arrays.slice()
let shallowCopySlice = fruits.slice()
// ["Strawberry", "Mango"]
Arrays.from()
let shallowCopyFrom = Array.from(fruits)
// ["Strawberry", "Mango"]
위의 세 코드는 '얕은 복사'를 생성한다. 배열의 최상위 요소가 원시 값일 경우 복사하지만 중첩 배열이나 객체 요소일 경우에는 원본 배열의 요소를 참조하게 된다.
'깊은 복사'를 하는 방법 중 하나는 JSON.stringify()를 사용해 배열을 JSON 문자열로 변환한 후, JSON.parse()로 다시 배열을 구성하는 것이다.
let deepCopy = JSON.parse(JSON.stringify(fruits));
// ["Strawberry", "Mango"]
○ concat() 이어붙이기
배열과 배열/값 매개변수를 이어붙인 새로운 배열을 반환한다.
var myArray2 = myArray.concat([2, 4, 8]);
console.log(myArray2);
myArray = myArray.concat(myArray2);
console.log(myArray);
○ filter()
지정한 필터 함수의 반환 결과가 true인 요소만 모아서 새로운 배열을 반환한다.
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
○ toString()
지정된 배열 및 그 요소를 나타내는 문자열을 반환한다.
const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());
// expected output: "1,2,a,1a"