모던 자바스크립트 (자료구조와 자료형) 3-7. 배열

배열

: 순서가 있는 컬렉션을 저장하는 자료형

let fruits = ["사과", "오렌지", "자두"];

alert( fruits[0] ); // 사과
alert( fruits[1] ); // 오렌지
alert( fruits[2] ); // 자두

: 배열의 요소에는 제약이 없음

// 요소에 여러 가지 자료형이 섞여 있습니다.
let arr = [ '사과', { name: '이보라' }, true, function() { alert('안녕하세요.'); } ];

// 인덱스가 1인 요소(객체)의 name 프로퍼티를 출력합니다.
alert( arr[1].name ); // 이보라

// 인덱스가 3인 요소(함수)를 실행합니다.
arr[3](); // 안녕하세요.

 

 

 

 

배열을 다루는 메서드

- pop

: 배열 끝 요소를 제거하고 제거한 요소를 반환

let fruits = ["사과", "오렌지", "배"];

alert( fruits.pop() ); // 배열에서 "배"를 제거하고 제거된 요소를 얼럿창에 띄웁니다.

alert( fruits ); // 사과,오렌지

 

- push

: 배열 끝에 요소를 추가

let fruits = ["사과", "오렌지"];

fruits.push("배");

alert( fruits ); // 사과,오렌지,배

 

- shift

: 배열 앞 요소를 제거하고 제거한 요소를 반환

let fruits = ["사과", "오렌지", "배"];

alert( fruits.shift() ); // 배열에서 "사과"를 제거하고 제거된 요소를 얼럿창에 띄웁니다.

alert( fruits ); // 오렌지,배

 

- unshift

: 배열 앞에 요소를 추가

let fruits = ["오렌지", "배"];

fruits.unshift('사과');

alert( fruits ); // 사과,오렌지,배

 

 

 

 

배열의 내부 동작 원리

: 배열은 원시 자료형에 속하지 않으며 객체와 같이 키, 값으로 작동

: 배열은 객체와 달리 인덱스를 키로 사용

: 배열을 배열답게 만들어주는 것은 특수 내부 표현방식

: 자바스크립트 엔진은 배열의 요소를 인접한 메모리 공간에 차례로 저장해 연산 속도를 높임

: 이 방법 이외에도 배열 관련 연산을 더 빠르게 해주는 최적화 기법은 다양함
: 그러나 개발자가 배열을 '순서가 있는 자료의 컬렉션’처럼 다루지 않고

  일반 객체처럼 다루면 이런 기법들이 제대로 동작하지 않습니다.

let fruits = ["바나나"]

let arr = fruits; // 참조를 복사함(두 변수가 같은 객체를 참조)

alert( arr === fruits ); // true

arr.push("배"); // 참조를 이용해 배열을 수정합니다.

alert( fruits ); // 바나나,배 - 요소가 두 개가 되었습니다.

 

 

 

 

성능

: push와 pop은 빠르지만 shift와 unshift는 느림

: 임의의 키를 사용한다면 배열 보다는 객체가 더 좋은 선택

 

- 잘못된 배열 선언의 예

: arr.test = 5 같이 숫자가 아닌 값을 프로퍼티 키로 사용하는 경우
: arr[0]과 arr[1000]만 추가하고 그사이에 아무런 요소도 없는 경우
: arr[1000], arr[999]같이 요소를 역순으로 채우는 경우

 

 

 

 

 

배열을 순회하는 반복문

- for

: 배열을 순회하기 위한 방법 중 가장 오래된 방법

: 순회 시에는 인덱스를 사용

let arr = ["사과", "오렌지", "배"];

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

 

- for of

: 인덱스가 아닌 값을 사용하는 순회 방법

: 코드가 짧아지기 때문에 배열을 순회할 때는 되도록 for of 를 사용하는 것을 권장

let fruits = ["사과", "오렌지", "자두"];

// 배열 요소를 대상으로 반복 작업을 수행합니다.
for (let fruit of fruits) {
  alert( fruit );
}

 

- for in

: 모든 프로퍼티를 대상으로 순회하기 때문에 키가 숫자가 아닌 프로퍼티도 순회 대상에 포함됨

: 유사배열 객체를 사용하는 경우 필요없는 프로퍼티들이 문제를 일으킬 수 있음

: for in은 배열이 아닌 객체에 최적화 된 반복문임

: for in 반복문의 속도가 대체로 빠른편이나 적절한 곳에 사용이 필요

 

 

 

 

length 프로퍼티

: 배열내 요소의 갯수가 아닌 배열 최대 인덱스의 +1을 반환

: length는 줄이는 것은 가능하기 때문에 줄이면 값이 잘림

let fruits = [];
fruits[123] = "사과";

alert( fruits.length ); // 124


let arr = [1, 2, 3, 4, 5];

arr.length = 2; // 요소 2개만 남기고 잘라봅시다.
alert( arr ); // [1, 2]

arr.length = 5; // 본래 길이로 되돌려 봅시다.
alert( arr[3] ); // undefined: 삭제된 기존 요소들이 복구되지 않습니다.

 

 

 

 

 

new Array()

: 배열을 생성하는 방법이지만 대괄호 []를 사용하면 더 짧은 코드로 작성 가능

let arr = new Array(2); // 이렇게 하면 배열 [2]가 만들어질까요?

alert( arr[0] ); // undefined가 출력됩니다. 요소가 하나도 없는 배열이 만들어졌네요.

alert( arr.length ); // 길이는 2입니다.

 

 

 

 

다차원 배열

: 배열 내에 배열을 요소로 저장할 경우 다차원 배열이 됨

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

alert( matrix[1][1] ); // 5, 중심에 있는 요소

 

 

 

 

 

toString()

: 배열에는 toString 메서드가 구현되어 있어 이를 호출하면 쉼표로 구분한 문자열이 반환

: 배열에는 Symbol.toPrimtive나 values 메서드가 없기 때문에 아래와 같은 결과를 반환

let arr = [1, 2, 3];

alert( arr ); // 1,2,3
alert( String(arr) === '1,2,3' ); // true


alert( "" + 1 ); // "1"
alert( "1" + 1 ); // "11"
alert( "1,2" + 1 ); // "1,21"

 

 

 

 

 

Refference

https://ko.javascript.info/array