'자바스크립트 배열'에 해당되는 글 1건

■ 자바스크립트 배열 초기화하기

안녕하세요. 제임스 입니다. 

이번에는 자바스크립트에서 배열 초기화 하는 방법에 대해 알아 보겠습니다. 

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

위와 같은 배열이 있을때 이 배열을 console log 로 찍어보면 아래와 같이 나옵니다. 

console.log('array = '+arr);

결과 값 : array = [1, 2, 3, 4, 5]

이제 이 값을 어떻게 초기화 하는가 하는 것에 대해 알아 보겠습니다. 

■ 첫번째 방법

Array.prototype.pop() 함수를 사용하여 for loop 을 돌리면서 배열안의 값들을 빼내는 방법입니다. 

var arr = [1, 2, 3, 4, 5];
for (var i = arr.length; i > 0; i--){
    arr.pop();
}
console.log('array = '+arr);

이렇게 했을때 결과 값은 아래와 같습니다. 

array = []

■ 두번째 방법

배열의 length 값을 0 으로 설정하는 방법입니다. 

var arr = [1, 2, 3, 4, 5];
arr.length = 0;
console.log('array = '+arr);

이경우도 결과 값은 아래와 같이 초기화 됩니다. 

array = []

■ 세번째 방법

세번째 방법은 배열을 빈 배열로 재선언 하는 방법입니다. 

var arr = [1, 2, 3, 4, 5];
arr = [];
console.log('array = '+arr);

이 경우도 결과 값은 처음 둘과 동일하게 아래와 같은 값을 보여 줍니다. 

array = []

이렇게만 보면 세가지 방법 모두 제대로 배열을 초기화 한것 처럼 보입니다. 

하지만 해당 배열을 다른 배열로 참조한 상태에서 위와 같은 방식으로 초기화 한다고 생각 해보면 문제가 발생하는 경우가 있습니다. 

바로 세번째 방식인데요. 

무엇이 문제 인지 지금부터 살펴 보겠습니다. 

■ 첫번째 방법 (정상 적용)

var arr = [1, 2, 3, 4, 5];
var arr2 = arr;
for (var i = arr.length; i > 0; i--){
    arr.pop();
}
console.log('array = '+arr);
console.log('array2 = '+arr);

이 경우 우리가 예상한데로 아래와 같은 결과를 확인 할 수 있습니다. 

array = []

array2 = []

■ 두번째 방법 (정상 적용)

var arr = [1, 2, 3, 4, 5];
var arr2 = arr;
arr.length = 0;
console.log('array = '+arr);
console.log('array2 = '+arr);

이 경우도 첫번째 방법과 동일하게 우리가 예상한데로 아래와 같은 결과를 확인 할 수 있습니다. 

array = []

array2 = []

■ 세번째 방법 (문제점 확인!!!)

var arr = [1, 2, 3, 4, 5];
var arr2 = arr;
arr = [];
console.log('array = '+arr);
console.log('array2 = '+arr);

위와 같이 arr2 값을 arr을 참조 하도록 선언한 후 arr 만 재선언 할 경우 결과 값은 아래와 같습니다. 

array = []

array2 = [1, 2, 3, 4, 5]

이는 arr2 값을 이미 [1, 2, 3, 4, 5] 로 선언한 상태에서 arr 만 새로 빈배열로 선언함으로 기존 arr 배열은 초기화가 잘 되었으나 arr 을 참조했던 arr2 배열은 초기화 하지 못해 발생한 문제 입니다.  

개발 중 배열을 초기화 하는 경우가 있을때 참조하고 있는 배열도 모두 초기화를 해야 하는 경우라면 처음과 두번째 방식대로 배열 초기화를 진행하면 됩니다. 

그렇지 않고 참조를 한 배열이지만 어느 것이던 하나만 초기화를 해야 하는 경우라면 세번째 방법을 사용하면 됩니다. 

잘 숙지하시고 경우에 잘 맞게 배열 초기화 진행 해보세요 :)