배열

[Chapter 5] 배열

- 자바스크립트에서 배열은 연속적인 메모리 할당이되는 진짜 배열이 아니고  배열같은 특성을 지닌 객체를 제공해 주는 것이다.

- 실제 배열보다 속도는 느리지만 사용하기 편리함에는 변함이 없다.

- 배열 전용 유용한 메소드들이 있다. (sort, 값 추가제거, 인덱스 찾기 등..)

1] 배열 리터럴

- 배열 리터럴은 타 언어 배열 선언과 마찬가지로 [] 를 사용하여 선언한다. ( var arr = []; )

- 타 언어에서의 배열은 한 배열의 구성요소가 같은 데이터타입 이여야 하지만

  자바스크립트 에서는 어떠한 데이터 타입의 조합도 가능하다. [1, 'string', NaN, undefined, true, false, 10.1]...

- 객체와 배열은 유사해 보이지만, 생성시 상속받는 prototype이 다르다.

//객체
var test = {
  'test_1' : '111',
  'test_2' : '222',
  'test_3' : 333,
  'test_4' : 444
};

//배열
var arr = [
  'test_5', 'test_6', 777, 888
];

02] length 속성

- 모든 배열은 length 속성이 있다.

- length속성은 사실 실제 배열의 개수를 새는것이 아니라 배열의 가장 큰 속성값보다 하나 더 큰 값으로 되어있기 때문에

  length의 값이 배열에 있는 속성의 수와 반드시 일치하는 것은 아니다.

//length의 값은 실제 속성의 수와 일치하지 않는다.
var test_arr = [];
console.log(test_arr.length);  // <-- length: 0 출력

test_arr[1000] = true;
console.log(test_arr.length);  // <-- length: 1001 출력

03] 삭제

- 자바스크립트의 배열은 실제론 객체이기 때문에 delete 연산자로 배열의 요소를 삭제할수 있다.

var arr = [
  'string_1', 'string_2', 333, 444
];

//배열의 요소를 delete로 삭제
delete arr[0];
console.log(arr); // <-- [undefined, "string_2", 333, 444] 로 출력된다.

- 하지만 배열을 delete 연산자로 삭제를 하게 되는 경우 값이 undefined로 될 뿐 값이 완전히 사라지지 않는다. (length 속성의 변화가 없다)

- 완전한 배열 요소 삭제를 위해선 splice() 메소드로 배열을 변경할수 있다.

var arr = [
  'string_1', 'string_2', 333, 444
];

//배열의 요소를 splice를 사용하여 배열 일부를 삭제
arr.splice( 0 , 1 );
console.log(arr); // <-- ["string_2", 333, 444] 출력

04] 열거

- 일반 객체를 열거할때 for in 문으로 열거를 하였지만  배열을 for in 문으로 열거하게 되면 프로토타입 체인에 있는 

예상치 못한 속성을 열거 할 수도 있어서 배열은 일반 for문으로 열거한다. (배열의 length 속성으로 반복 횟수의 조건을 준다)

//객체
var arr = {
  'lunch_menu_1' : '김치찌개',
  'lunch_menu_2' : '라면',
  'lunch_menu_3' : '빵',
  'lunch_menu_4' : '고기'
}

//객체의 열거는 for in 으로 열거
for ( value in arr ){
 
  console.log( arr[value] );
 
};

//배열
var arr = ['김치찌개', '라면', '빵', '고기'];

//배열은 for문으로 열거
for( var i = 0; i < arr.length; i++ ){
  
  //console.log( arr[i] );
  
}

05] 객체와 배열의 혼동

- 객체는 {} 로 감싸여있고 키(Key)와 값(Value)로 이루어진 속성들로 구성되어있고 

배열은 [] 로 감싸여있으며 배열 안에 들어간 것들은 요소(item) 이라고 한다.

- 배열이 객체와의 차이점은 키(Key)가 없다는 점이다. 

- 일반적으로 코드를 작성할때 속성 이름이 작은 크기의 연속된 정수이면 배열을 사용하고 그렇지 않은 경우에 객체를 사용하는 규칙을 이용한다.

06] 배열의 메소드

- 배열에 동작하는 메소드들중 자주쓰는 몇가지를 알아보자.

var arr = ['aaa', 'ddd', 'ccc', 'bbb'];

//join() 메서드는 배열의 모든 요소를 문자열로 변환하고 이어 붙여서 반환한다
var join = arr.join();
console.log(join);   // <-- aaa,ddd,ccc,bbb 출력

//sort() 메서드는 배열 안의 원소들을 정렬하여 반환한다.
var sort = arr.sort();
console.log(sort);  // <-- ["aaa", "bbb", "ccc", "ddd"] 출력

//push() 배열 끝에 요소 추가
arr.push('eee');
console.log(arr);  // <-- ["aaa", "bbb", "ccc", "ddd", "eee"] 출력

//pop() 배열 끝에있는 요소 삭제
arr.pop();
console.log(arr);  // <-- ["aaa", "bbb", "ccc"] 출력

// concat() 배열의 값을 합쳐서 반환
var add_arr = [ 1111, 2222, 3333 ];
console.log( arr.concat(add_arr) );  // <-- ["aaa", "bbb", "ccc", "ddd", 1111, 2222, 3333] 출력

- 또한 배열은 객체이기 때문에 Array.prototype 에 원하는 메소드를 추가 할 수도 있다.

07] 배열의 크기와 차원

- 타 언어에서는 1차원배열, 2차배열, 3차배열...다차원 배열을 사용 할 수 있지만

  자바스크립트에서는 배열이 객체이기 때문에 다차원 배열을 지원해주진 않는다.

  떄문에 요소 안에서 다시 배열을 선언해 주는 방법으로 다차원 배열을 구현한다. (배열안의 배열 형태)

var arr = new Array();

arr[0] = new Array();    // <-- 배열 안에서 2차배열 선언
arr[1] = new Array(); 

arr[0][0] = " string 111";
arr[0][1] = 111;

arr[1][0] = "string 222";
arr[1][1] = 222;

console.log(arr);

// console.log(arr); 의 출력결과

- 위 방법 또는 배열 리터럴로 2차배열을 쉽게 생성할 수 있다.

var arr = [
  [ 0, 1, 2 ],
  [ 3, 4, 5 ],
  [ 6, 7, 8 ]
];

console.log( arr[2][0] ); // <-- 2차원 배열의 요소 읽기, 6 출력

- 2차원 배열을 이해하기 쉬운방법중 하나로 구구단을 출력해 볼 수 있다.

var gugu = [
  [ 2, 3, 4, 5, 6, 7, 8, 9 ],
  [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
];

for(var i = 0; i < gugu[0].length; i++){
  
  document.write( '구구단 ' + gugu[0][i] + '단 : ' );
  
  for(var k = 0; k < gugu[0].length; k++){
    
    document.write( (gugu[0][i] * gugu[1][k]) + ' , ');
    
  }
  
  document.write( '<br />' );
  
}

// 출력결과