[JAVASCRIPT] 데이터타입-배열(2)

배열의 프로퍼티 동적 생성

배열도 자바스크립트의 객체이므로 배열 원소 이외에 객체처럼 동적으로 프로퍼티를 추가할 수 있다.

단, 프로퍼티는 배열의 length 프로퍼티로 추가되지 않는다.

//배열 생성
var arr =['zero','one','two'];
console.log(arr.length); // 3
 
//프로퍼티 동적 추가
arr.name ='number_array';
arr.color='blue';
console.log(arr.length); // 3
 
//배열 원소 추가
arr[3] = 'red';
console.log(arr.length); // 4
 
//배열 객체 출력
console.dir(arr);
 

배열 객체 출력 결과 :

배열의 프로퍼티 열거

for in 문과 for문을 이용하여 배열내 프로퍼티를 열거할 수 있다.

하지만 for in문을 사용하면 불필요한 프로퍼티가 출력될 수 있으므로 for문을 사용하는게 좋다.

var arr =['zero','one','two'];
arr.name ='number_array';
arr.color='blue';
//for in 문
for(var prop in arr){
    console.log(prop, arr[prop]);
}
 
//for문으로 출력
for(var i=0; i<arr.length; i++){
    console.log(i, arr[i]);
}

배열 요소 삭제

배열의 삭제는 delete 연산자와 splice() 배열 메소드를 사용하는 방법이 있다.

delete 연산자를 사용한 경우 요소는 삭제되지만 length 값은 변하지 않는 특징이 있다.

splice () 배열 메소드는 요소를 완전히 삭제해준다.

//delete 연산자를 이용한 배열 요소 삭제
var arr = ['zero','one','two','three'];
delete arr[2];
console.log(arr);//['zero','one', undefined, 'three']
console.log(arr.length); //4
 
//splice() 메소드를 활용한 배열 요소 삭제
var arr2 = ['zero','one','two','three'];
arr2.splice(2,1); // 2번째 요소를 시작점으로 1개 요소 삭제
console.log(arr2);//['zero','one','three']
console.log(arr2.length); //3

Array() 생성자 함수

배열은 일반적으로 배열 리터널로 생성하지만, 배열 리터널도 자바스크립트의 기본 제공 Array() 함수로 배열을 생성하는 과정을 단순화시킨 것이다.

생성자 함수로 배열과 같은 객체를 생성할시 반드시 new 연산자를 같이 써야한다.

생성자 안에 인자가 1개이고 숫자일 경우엔 해당 숫자를 length로 갖는 빈 배열을 생성한다.

1개 이상일 경우 해당 인자들을 요소로 갖는 배열이 생성된다.

//인자가 1개인 Array() 생성자 함수 
var foo = new Array(3);
console.log(foo); // [undefined,undefined,undefined]
console.log(foo.length)//3
 
//인자가 1개 이상인 Array() 생성자 함수 
var foo1 = new Array(1,2,3);
console.log(foo1); // [1,2,3]
console.log(foo1.length)//3