배열 생성하는 방법
자바스크립트에서 배열을 생성하는 방법은 두 가지가 있습니다.
1. 배열 리터럴로 생성하는 방법
var abc = ["a", "b", "c"];
[] 안에 각 원소를 , 로 구분해서 값을 직접 명시해주어 생성하는 방법입니다. abc 배열은 "a", "b", "c" 원소를 각각 0, 1, 2번 인덱스에 가지게 됩니다.
2. Array() 생성자 함수로 생성하는 방법
// ex1
var abc = new Array(3);
// ex2
var abc = new Array("a", "b", "c");
ex1처럼 배열을 선언하면 배열의 각 원소들의 값은 undefined입니다. Array() 안에 쓰인 숫자 3은 배열의 길이를 나타냅니다. 즉, abc는 길이가 3인 빈 배열이 됩니다.
ex2처럼 배열을 선언하면 () 안에 작성한 값들이 배열의 각 인덱스에 각 원소 값으로 저장됩니다.
배열에 원소 추가하기
원소를 추가하는 메소드는 push, concat, unshift 등이 있습니다.
push() : 배열의 끝에 원소를 하나 추가합니다.
var arr = ["a","b","c"];
arr.push("d");
console.log(arr); // ["a","b","c","d"]
unshift() : 배열의 첫번째 인덱스에 원소를 넣고 나머지 원소들을 한 자리씩 뒤로 밉니다.
var arr = ["a", "b", "c"];
arr.unshift("d");
console.log(arr); // ["d", "a", "b", "c"]
인덱스를 사용해서 추가해줄 수도 있습니다. 단, 이렇게 사용하는 것은 좋지 못합니다. 해당 인덱스에 이미 값을 가지고 있는 경우에는 추가가 아니라 수정이 발생하기 때문입니다.
var arr = [1,2,3];
arr[3] = 4; // arr = [1,2,3,4]
배열도 참조 데이터 타입이기에 지난 포스팅에서 작성한 참조 데이터 타입의 특성을 그대로 따릅니다.
배열을 값으로 가지는 변수 A를 생성하고 변수 B에 변수 A를 할당하면 변수 A와 변수 B는 같은 데이터를 참조하게 됩니다. 그래서 둘 중 하나만 수정해도 변수 A, B 둘 다 변경이 발생합니다.
* 배열 B에 배열 A를 할당하면 둘은 같은 데이터를 참조한다.
// 배열 A 생성
var arrA = [1,2,3];
// 배열 B는 배열 A를 참조
var arrB = arrA;
// 배열 A를 수정하면 배열 B도 수정된다.
arrA.push(4);
console.log(arrA); // [1,2,3,4]
console.log(arrB); // [1,2,3,4]
// 배열 B를 수정하면 배열 A도 수정된다.
arrB.unshift("a");
console.log(arrA); // ["a",1,2,3,4]
console.log(arrB); // ["a",1,2,3,4]
배열의 내장메소드 중에는 사용하면 push, unshift처럼 해당 배열이 참조하고 있는 데이터 값이 변경되는 메소드들이 있는 반면 concat처럼 해당 배열이 참조하는 데이터는 변경하지 않고 새로운 메모리에 값을 가진 배열을 생성하여 반환하는 메소드들도 있습니다.
concat() : 배열의 끝에 복수 개의 원소를 추가합니다. 복수 개의 원소는 배열에 담아서 전달합니다.
var arrA = ["a", "b"];
var arrC = arrA.concat(["c", "d"]);
console.log(arrA); // ["a","b"]
console.log(arrC); // ["a","b","c","d"]
arrA.concat()을 실행한 결과 arrA에는 원소가 추가되지 않았습니다. 하지만 concat을 실행하고 반환한 값을 할당한 arrC는 arrA에 "c", "d"가 추가된 배열을 가지고 있습니다.
배열의 내장메소드들을 사용할 때에는 해당 메소드가 배열이 참조하고 있는 값을 변경하는 메소드인지, 아니면 변경하지 않고 새로운 메모리에 값을 가진 배열을 반환하는지 알고 사용해야 합니다.
배열의 원소 수정하기
splice(인덱스, 삭제할 개수, 그 자리에 넣을 값들)
var arr = [1, 2, 3];
arr.splice(0, 1, "a");
console.log(arr); // ["a", 2, 3]
arr.splice(1, 2, "b", "c");
console.log(arr); // ["a", "b", "c"]
첫 번째 splice()를 사용할 때, 0번째 인덱스의 원소인 1을 지워주고 그 자리에 'a'를 넣어서 ['a', 2, 3] 이 되었습니다.
두 번째 splice()를 사용할 때, 1번째 인덱스부터 원소 2개를 지워서 2와 3이 지워지고 그 자리에 'b'와 'c'를 넣어서 ['a', 'b', 'c']가 되었습니다.
두 번째 파라미터의 값으로 0을 넣어주고 세 번째 파라미터의 값으로 어떤 값들을 넣어주면, 첫번째 파라미터 값인 인덱스부터 새로운 원소들을 넣어주고 그 뒤로 원래 원소들은 밀려나게 만듭니다. 즉, 중간에 새 원소를 삽입하는 효과가 생깁니다.
* 두번째 파라미터에 0을 넣어 원소 삭제 없이 배열의 중간에 새 원소 삽입하기
var arr = [1, 2, 3, 4];
arr.splice(2, 0, "a", "b");
console.log(arr); // [1, 2, "a", "b", 3, 4]
배열의 원소 삭제하기
splice()는 세번째 파라미터의 값을 넣어주지 않는 방법으로 삭제 기능만 수행할 수도 있습니다.
var arr = [1, 2, 3, 4, 5];
arr.splice(0, 1);
console.log(arr); // [2, 3, 4, 5]
arr.splice(1, 2);
console.log(arr); // [2, 5]
다른 메소드로도 제거 기능을 수행할 수 있습니다.
shift() : 첫 번째 원소를 제거하고 그 원소 값을 반환합니다.
var arr = [1, 2, 3];
var result = arr.shift();
console.log(result); // 1
console.log(arr); // [2, 3]
pop() : 마지막 원소를 제거하고 그 원소 값을 반환합니다.
var arr = [1, 2, 3];
var result = arr.pop();
console.log(result); // 3
console.log(arr); // [1, 2]
slice(start, end) : start 인덱스부터 end -1 인덱스까지 원소를 추출한 새로운 배열을 반환합니다.
참조하고 있는 값을 변경하지 않고 새 배열을 반환하는 경우입니다.
var arrA = [1, 2, 3, 4];
var arrB = arrA.slice(1, 3);
console.log(arrA); // [1, 2, 3, 4]
console.log(arrB); // [2, 3]
최근댓글