자바스크립트 - 배열

배열

• 객체가 한 번에 여래개의 데이터 값들을 저장할 수 있는 자료형 이었다면, 배열은 순서가 있는 요소들의 집합, 여러개의 항목들이 모여 있는 리스트라고 할 수 있습니다. 

 

배열생성

• 배열생성은 배열 생성자,배열리터럴로 생성할 수 있다.

 

배열생성자

• 배열 또한 생성자를 통해 배열을 생성할 수 있습니다, new라는 키워드를 사용해야합니다. 

let arr = new Array();

 

console로 확인해보면 배열은 []가 출력되는 것을 확인할 수 있습니다.(객체는 {})

 

 

이번에는 배열에 값을 넣어보겠습니다.

 

이렇게 배열 생성자에 값을 할당할 때에는, 특정 요소를 넣으려면 여러개의 값을 넣고, 원하는 크기의 공간을 할당하려면, 원하는 공간의 크기를 괄호 안에 작성해주면 됩니다.

 

 

 

배열 리터럴

• 두번째 방법은 배열 리터럴[]을 이용하는 방법입니다. 

let arr = [];

 

마찬가지로 값을 넣어보겠습니다.

 

 

arr1은 배열 생성자에 값을 넣은 결과와 동일하지만 array2 배열은 undefined 값이 3개가 담겨있지 않고, 3이라는 값이 담겨있는 것을 볼 수 있습니다.

 

이렇게 배열 리터럴을 통해 배열을 생성하고 배열에 값을 넣게 되면 그 값이 순서대로 배열의 요소로 지정됩니다.

 

 

배열특징

• 배열의 요소들은 객체 프로퍼티의 값과 마찬가지로, 타입에 상관없이 모든 요소를 넣어줄 수 있습니다.

 

배열 다루기

• 이번에는 배열의 요소에 접근하는 방법이 무엇인지, 요소를 추가 삭제 수정하는 방법은 무엇인지를 알아보겠습니다.

 

배열 요소 접근

• 배열은 순서가 있는 요소들의 집합으로, 객체와는 다르게 데이터를 구분하는 key값이 존재하지 않습니다. 대신에 배열은 데이터가 위치한 순서인 index를 통해 배열의 요소에 접근할 수 있습니다.  

let arr = [1, "hello", null];

console.log(arr[0]); // 1
console.log(arr[1]); // hello
console.log(arr[2]); // null

 

주의해야 할 점은, 배열의 인덱스는 0번부터 시작입니다.

 

 

배열 요소 추가

push

• 배열에 새로운 요소를 추가할 때에는 push라는 배열 내장함수(메서드)를 사용합니다. 

let arr = [1, "hello", null];
arr.push(4);

console.log(arr); // [1, "hello", null, 4]

 

 

unshift

• unshift를 사용하면 맨 앞에 요소를 추가할 수 있습니다. 

let arr = [1, "hello", null];
arr.unshift(0);

console.log(arr);  // [0, 1, "hello", null]

 

 

 

배열 요소 수정

• 배열의 인덱스로 배열 요소에 접근해 수정할 수 있습니다.

let arr = [1, "hello", null];
arr[0] = 5;
arr[2] = undefined;

console.log(arr);  // [5, "hello", undefined]

 

객체처럼 마찬가지로 배열도 const로 선언한 배열도 변경가능합니다.

 

const arr = [1, "hello", null];
arr[0] = 5;
arr[2] = undefined;

console.log(arr);  // [5, "hello", undefined]

자바스크립트에서 배열은 객체로 분류되는 자료형으로, 객체라고 볼 수 있기 대문에, 객체와 동일하게 const로 선언된 배열의 요소를 수정하더라도 배열 자체를 수정하는 것이 아니여서, const로 선언된 배열의 요소 또한 수정 가능합니다.

 

 

배열 요소 삭제

 

pop

• 맨 마지막 요소가 삭제됩니다.

let arr = [1, "hello", null];
arr.pop();

console.log(arr); // [1, "hello"]

 

 

shift

• 맨 앞 요소가 삭제됩니다ㅣ. 

let arr = [1, "hello", null];
arr.shift();

console.log(arr); // ["hello", null]

 

 

 

배열의 길이 알아내기

• 배열은 length라는 프로퍼티에 자신의 크기를 가지고 있습니다.

let arr = [1, "hello", null];

console.log(arr.length); // 3

 

이번에는 중간에 arr배열의 크기를 변경 후 length 프로퍼티로 배열의 크기를 출력해보겠습니다.

 

let arr = [1, "hello", null];
arr.pop();

console.log(arr.length); //2

 

이렇게 배열의 요소가 바뀌면 길이를 나타내는 length 프로퍼티가 자동으로 갱신됩니다.