배열

추가, 삭제

배열 추가 : Array.push(), Array.unshift(), Array.splice()
배열 삭제 : Array.pop(), Array.shift(), Array.splice()

array.splice("시작위치", "제거건수")
splice 함수는 원하는 위치에서 하나 이상의 요소를 제거 할 수 있다.

array.splice("시작위치", "제거건수", ["요소1", "요소2" ... ])
splice 함수는 요소를 제거 후 해당 위치에 새로운 요소를 추가할 수 있다

배열추가

var arr = ['a', 'b', 'c'];

// arr = ['a', 'b', 'c', 'd']
arr.push('d'); // 배열의 끝에 요소를 추가


var arr = ['a', 'b', 'c'];

// arr = ['d', 'a', 'b', 'c']
arr.unshift('d'); // 배열의 앞쪽에 요소를 추가

var arr = ['a', 'b', 'c'];

// arr = ['a', 'b', 'd', 'c']
arr.splice(2, 0, 'd'); // index 2 ('c')의 위치에 요소를 추가

// arr = ['a', 'b', 'd', 'c', 'e', 'f']
arr.splice(4, 0, 'e', 'f'); // index 4의 위치에 2개의 요소를 추가

배열 삭제

var arr = ['a', 'b', 'c', 'e', 'f'];

// arr = ['a', 'b', 'c', 'e']
arr.pop(); // 배열의 마지막 요소를 제거

// arr = ['a', 'b', 'c']
var popped = arr.pop(); // 제거한 요소를 반환 받을 수 있음

// popped = 'e'

var arr = ['a', 'b', 'c', 'e', 'f'];

// arr = ['b', 'c', 'e', 'f']
arr.shift(); // 배열의 첫번째 요소를 제거

// arr = ['c', 'e', 'f']
var shifted = arr.shift(); // 제거한 요소를 반환 받을 수 있음

// shifted = 'b'

var arr = ['a', 'b', 'c', 'e', 'f'];

// arr = ['a', 'b', 'e', 'f']
arr.splice(2, 1); // index 2 부터 1개의 요소('c')를 제거

// arr = ['a', 'f']
arr.splice(1, 2); // index 1 부터 2개의 요소('b', 'e')를 제거

// arr = ['a']
removed = arr.splice(1, 1); // 제거한 요소를 반환 받을 수 있음

// removed = 'f'


var arr = ['a', 'b', 'c', 'e', 'f'];

// arr = ["a", undefined, "c", "e", "f"]
delete arr[1]; // delete로 배열을 삭제할 경우 요소는 그대로 존재하며 값만 삭제 됨

함수 사용하지 않고 배열 추가, 삭제

var arr = ['a', 'b', 'c'];

// arr = ['a', 'b', 'c', 'e'];
arr[arr.length] = 'e'; // 배열의 끝에 요소를 추가 

// arr = ['a', 'b', 'c']
arr.length = arr.length - 1; // 배열의 크기를 하나 줄인다

// arr = ["a", "b", "c", undefined, undefined, "g"]
arr[5] = 'g'; // index 5 에 요소를 추가, 빈요소([3],[4])는 undefined

자바스크립트에서 배열을 만드는 방법 2가지

• 자바스크립트에서는 배열을 사용 시 배열 리터럴([])을 사용할 것을 권장 한다.

배열 리터럴 대괄호([ ])를 사용하여 만드는 방법

// 배열 생성 (빈 배열)
var arr = []; 

arr[0] = 'zero';
arr[1] = 'one';
arr[2] = 'tow';

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}    

// 배열 생성 (초기 값 할당)
var arr = ['zero', 'one', 'tow']; 

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

// 배열 생성 (배열 크기 지정)
// 쉼표 개수만큼 크기가 지정됨
var arr = [,,,]; 

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
        
// 값이 할당되지 않아서 undefined 3번 출력    

Array() 생성자 함수로 배열을 생성하는 방법

// 배열 생성 (빈 배열)
var arr = new Array(); 

arr[0] = 'zero';
arr[1] = 'one';
arr[2] = 'tow';

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}     

// 배열 생성 (초기 값 할당)
var arr = new Array('zero', 'one', 'tow'); 

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
} 

// 배열 생성 (배열 크기 지정)
// 원소가 1개이고 숫자인 경우 배열 크기로 사용됨
var arr = new Array(3); 
        
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
        
// 값이 할당되지 않아서 undefined 3번 출력        

자바스크립트 배열이 다른 언어와 다른 점 2가지

• 배열 내부의 데이터 타입이 서로 다를 수 있다
• 배열의 크기는 동적으로 변경될 수 있다
• 자바스크립트의 배열은 변수 외에도 객체와 함수도 담을 수 있고, 배열이 생성되면 배열의 크기는 임의로 변경이 가능하며 이미 할당된 값은 사라지지 않는다.
• 자바스크립트의 배열은 제약사항이 적어서 자유롭게 사용할 수 있지만 사용 시 많은 주의를 기울여야 한다.

// 서로 다른 데이터 타입을 담을 수 있다
var arr = [1234, 'test', true]; 

var arr = [1234, 'test', true];

// 배열의 크기를 임의로 변경( 3 -> 5 )
// arr[3], arr[4]는 값이 할당 되지 않았기 때문에 undefined
arr.length = 5; 

// 새로운 배열을 추가하면 크기는 자동으로 변경 ( 5 -> 6 )      
arr[5] = 'apple'; 

// 새로운 배열 추가로 크기 변경 ( 6 -> 7 )       
arr.push('banana');  

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

//////////////////////////////////
// 출력 결과
//////////////////////////////////
1234
test
true
undefined
undefined
apple
banana