Array

shorry·2022년 1월 26일

JavaScript

목록 보기

5/9

✔️Array

📌Array?

여러 개의 값을 순차적으로 나열한 자료구조

자바스크립트의 배열은 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며 연속적으로 이어져 있지 않을 수도 있는 ‘희소 배열’ 이다. ( 일반적인 배열인 ‘밀집 배열’ 과는 다르다. )

자바스크립트에서 사용할 수 있는 모든 값은 객체의 프로퍼티 값이 될 수 있으므로 어떤 타입의 값이라도 배열의 요소가 될 수 있다.

const arr = [0, 1, 'good', true];
// 0, 1, 'good', true를 배열의 요소(element) 라고 부른다.

const nestedArr = [0, 1, [2, 3, 4], 5];
console.log(nestedArr[2][0]);  // 2
// 배열안에 배열이 있는것을 중첩된 배열(nested array)라고 부른다.

📌Why should we use?

모든 타입의 값들이 배열의 요소가 될 수 있으므로, 하나의 배열에 여러 타입의 값들을 담을 수 있다.

연관있는 데이터를 함께 저장하므로 코드의 가독성이 높아지고, 데이터를 찾는데 용이하다.

📌How to use?

Delclaration

Literal

0개 이상의 값을 쉼표로 구분하여 대괄호( [ ] ) 로 묶는다.

첫번째 값은 인덱스 '0'으로 읽을 수 있고, 존재하지 않는 요소에 접근하면 undefined를 반환한다.

const arr1 = [];
console.log(arr1[1]);  // undefined

const arr2 = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']
console.log(arr.length);  // 7
console.log(typeof arr);  // object

Constructor function

배열은 일반적으로 배열 리터럴 방식으로 생성하지만 배열 리터럴 방식도 결국 내장 함수 Array() 생성자 함수로 배열을 생성하는 것을 단순화시킨 것이다.

Array() 생성자 함수는 Array.prototype.constructor 프로퍼티로 접근할 수 있다.

const arr = new Array(1, 2, 3);
console.log(arr);  // [1 ,2 ,3]

📌Add, Delete, Change, Circuit

method 나 higher order function 을 이용한 다양한 배열 요소의 추가, 수정, 삭제는 뒤에 다룰 예정.

1. Add

const arr = [];
arr[1] = 1;
arr[2] = 2;

console.log(arr);  // [empty, 1, 2]

2. Delete

delete 연산자를 사용하면 length 에는 변함이 없다.

해당 요소를 완전히 삭제하여 length 에도 반영되게 하기 위해서는 Array.prototype.splice 메소드를 사용해야한다.

const newWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];

// 요소의 값만 삭제
delete newWeek[1];
console.log(newWeek);  // ['mon', empty, 'wed', 'thu', 'fri', 'sat', 'sun']
// length: 7

// 요소를 완전히 삭제
newWeek.splice(1, 1);
console.log(newWeek);// ['mon', 'wed', 'thu', 'fri', 'sat', 'sun']
// length: 6

3. Change

const newArr = [0, 1, 2, 3];
newArr[0] = 4;
console.log(newArr);  // [4, 1, 2, 3]

4. Circuit

객체의 프로퍼티를 순회할 때 for…in 문을 사용한다. 배열 역시 객체이므로 for…in 문을 사용할 수 있다.
그러나 배열은 객체이기 때문에 프로퍼티를 가질 수 있다. for…in 문을 사용하면 배열 요소뿐만 아니라 불필요한 프로퍼티까지 출력될 수 있고 요소들의 순서를 보장하지 않으므로 배열을 순회하는데 적합하지 않다.
따라서 배열의 순회에는 forEach 메소드, for 문, for…of 문을 사용하는 것이 좋다.

const arr = [0, 1, 2, 3]

arr.forEach((item, index) => console.log(index, item));

for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]);
}

for (const item of arr) {
  console.log(item);
}