자바스크립트.js #4 배열

김창회·2020년 12월 30일

JavaScript 배열 자바스크립트

자바스크립트.js

목록 보기

4/8

💻자바스크립트.js 시리즈는 자바스크립트에 대해 심플하게 훑어봅니다📖

배열

배열은 자바스크립트의 핵심적인 기능 중 하나입니다.
ES6 이후로 추가된 filter, map, forEach와 같은 배열 메서드들은 자바스크립트가 한층 업그레이드될 수 있었던 원동력이기도 합니다.

배열 선언

배열을 선언하는 방법은 대괄호 []를 사용하는 것입니다.
배열은 배열 내 위치 인덱스 값을 대괄호 안에 넣어 내부 값에 접근할 수 있습니다.

const newArr = [1, 2, 3];

console.log(newArr[1]) // 1
console.log(newArr[2]) // 2
console.log(newArr[3]) // 3

또한 객체가 obj.name = "chkim132"와 같이 동적으로 요소를 추가한 것과 같이
배열도 동적으로 추가가 가능합니다.
순차적으로 넣을 필요 없이 아무곳에 값을 동적으로 넣을 수 있습니다.
이와 더불어 모든 타입의 값을 배열 안에 넣을 수 있습니다!

const newArr = [];

newArr[1] = "chkim132";
newArr[2] = 2;"
newArr[6] = true;

console.log(newArr); // [empty, "chkim132", 2, empty x 3, true]

코드를 콘솔에 찍어보면
1과 2, 그리고 6의 인덱스에 값이 들어가있고,
값을 넣지 않은 인덱스에는 값이 비어있는 걸 볼 수 있습니다.
이런 이유는 자바스크립트에서는 배열의 크기를 가장 큰 인덱스 값을 기준으로 정하기 때문에 그렇습니다. 비어있는 인덱스 값을 그대로 출력하게 됩니다.

배열과 객체

배열 역시 객체입니다.

const newArr = [];

console.log(typeof newArr); // object

배열을 typeof로 타입을 체크해 보면 object라고 뜨는 걸 볼 수 있습니다.
또한 Array.prototype 위에 Object.prototype 이라는 프로토타입을 갖고 있습니다.

프로퍼티 동적 생성

객체이기 때문에 객체처럼 값을 동적 생성할 수 있습니다.

const newArr = [];
newArr.name = "chkim132";

console.log(newArr); // [name: "chkim132"]

이렇듯 배열 역시 객체처럼 'key' : 'value' 형식을 값으로 가질 수 있습니다.
단, length로는 체크가 되지 않는데요.
이는 배열 원소의 인덱스 값이 변했을 경우만 변경되기 때문입니다.

요소 삭제

요소를 삭제하는 방법은 delete도 존재하지만 splice 혹은 slice를 많이 사용합니다.

splice(start, deleteCount, item...)

const newArr = ["a", "b", "c"];
newArr.slice("a", 1);

console.log(newArr); // ["b", "c"]

splice 메서드는 시작부터, 마지막의 값에 따라 해당하는 배열의 값을 완전히 삭제합니다.
그러니까 복구가 불가능 합니다.

slice(begin, end)

const newArr = ["a", "b", "c"];
newArr.slice(0, 1);

console.log(newArr); // ["a"]

slice는 splice와 달리 추출한 요소를 새 배열로 반환합니다.
시작지점(첫 인자)부터 마지막 지점 -1까지만을 반환합니다.
slice의 장점은 원본 배열이 바뀌지 않는다는 것에 있습니다.
참조값을 복사해 새로운 배열로 반환하기 때문입니다.

splice는 삭제, slice는 추출이라고 생각하면 편하겠습니다.

Array() 생성자 함수

일반적으로 배열은 []와 같이 리터럴로 생성합니다.
가끔씩 new Array() 생성자 함수를 사용해 배열을 만들 경우도 생기니 가볍게 알아둡시다.

Array() 생성자 함수는 인자 개수에 따라 동작이 다르게 나타납니다.

호출할 시 인자가 1개이고, 숫자라면 인자를 length로 갖는 빈 배열이 생깁니다.
그외의 경우엔 인자를 요소로 갖는 배열을 생성합니다.

console.log(new Array(10)); // [undefined x 10]
console.log(new Array(10, 20)); // [10, 20]

유사 배열 객체

자바스크립트에서는 length라는 프로퍼티를 가진 객체를 보고 유사 배열 객체라고 부릅니다.
유사 배열 객체의 가장 큰 특징은 객체임에도 불구, 배열 메서드를 사용할 수 있다는 점입니다.

const arr = ['a'];
const obj = { name : 'chkim132', length : 1 };

arr.push('b');
console.log(arr); // ["a", "b"]

obj.push(arr); // error

다음과 같이 유사 배열 객체인 obj는 배열이 아니기 때문에 push 메서드를 호출하려 하면 에러가 납니다.
하지만 apply() 메서드를 사용하면 객체여도 배열 메서드를 사용할 수 있게 됩니다.

const obj = { name : 'chkim132', length : 1 };

Array.prototype.push.apply(obj, ['b']);
console.log(obj); // {1: "b", name: "chkim132", length: 2}

apply 및 call 메서드를 이용한 this 바인딩은 다음에 알아보도록 합시다🙂

마무리

지금까지 객체와 배열에 대해 알아봤습니다.
다음 시간엔 자바스크립트에서 아주 중요한 개념인 함수에 대해 살펴보겠습니다!

출처

인사이드 자바스크립트

김창회

프론트엔드 개발자

이전 포스트

자바스크립트.js #3 참조(객체) 타입

다음 포스트

자바스크립트.js #4 배열