배열은 자바스크립트의 비원시타입의 자료형이다.
순서가 있는 요소들의 집합으로, 순서가 있는 컬렉션이 필요할 때 사용한다.
배열을 선언하는 방법은 생성자를 사용하거나, 배열 리터럴을 사용하는 두 가지 방법이 있다.
아래와 같이 만들면 빈 배열을 만들 수 있다.
// (1) 생성자
let arr = new Array[];
// (2) 배열 리터럴
let arr = [];
각 배열 요소에는 배열 내 순서를 나타내는 숫자, 인덱스가 매겨져있다.
배열 내에서 특정 요소에 접근하고 싶다면 대괄호 안에 인덱스를 넣어주면 된다.
let students = ["성희","지운","상아"];
console.log( students[0] ); // 성희
이 방법으로 요소를 수정하거나 추가하는 것도 가능하다.
// 수정
students[0] = "민지";
console.log(students[0]); // 성희에서 민지로 변경됨.
// 추가
students[3] = "민지";
console.log(students); // [object Array] (4) ["민지","지운","상아","지연"]
length
를 사용하면 배열에 담긴 요소가 몇 개인지 알 수 있다.
let students = ["성희","지운","상아"];
console.log(students.length); // 3
배열 요소의 자료형에는 제약이 없기 때문에 객체, 함수 등 여러가지 값이 들어갈 수 있다.
let students = ["성희", { name: "지운", age: 18, height: 174,},
"상아", function(){alert("출석 끝!")}];
console.log(students[1].age); // 18
console.log(students[3]()); // 함수 실행, "출석 끝!"
pop
배열 끝 요소를 제거하고, 제거한 요소를 반환한다.
let students = ["성희","지운","상아"];
console.log(students.pop()); // 배열에서 "상아" 제거하고 "상아" 콘솔창에 출력
console.log(students); // [object Array] (2) ["성희","지운"]
push
배열 끝에 요소를 추가한다.
let students = ["성희","지운","상아"];
console.log(students.push("은서")); // 4
console.log(students); // [object Array] (4) ["성희","지운","상아","은서"]
여기서 students.push("...")
를 호출하는 것은 fruits[fruits.length] = ...
와 같은 효과를 보인다.
shift
배열 앞 요소를 제거하고, 제거한 요소를 반환한다.
let students = ["성희","지운","상아"];
console.log(students.shift()); // "성희"
console.log(students); // [object Array] (2) ["지운","상아"]
unshift
배열 앞에 요소를 추가한다.
let students = ["성희","지운","상아"];
console.log(students.unshift("민지")); // 4
console.log(students); // [object Array] (4) ["민지","성희","지운","상아"]
push
와 unshift
는 요소를 한 번에 여러 개 추가할 수 있다.성능
push
와pop
은 빠르지만shift
와unshift
는 느리다.
shift
와unshift
는 3가지 동작을 수행해야 이뤄진다.
(1) 인덱스 0인 요소를 제거
(2) 모든 요소를 왼쪽으로 이동시킨다. (인덱스 1은 0으로, 2는 1로)
(3)length
값을 갱신한다.
배열에 요소가 많으면 요소를 이동시키는데 걸리는 시간이 길고 메모리 관련 연산도 많아진다.
반대로push
와pop
은 요소 이동이 필요하지 않기 때문에 실행 속도가 빠르다.
배열은 특별한 종류의 객체이다. 배열 arr
의 요소를 arr[0]
처럼 접근하는 방식은 객체 문법에서 온 것이다. 하지만 객체의 키가 배열에서는 숫자라는 점이 다르다.
배열의 본질을 객체이기 때문에 원시 자료형이 아닌 비원시자료형인 객체형에 속하기 때문에 객체처럼 동작한다.
객체와 마찬가지로 주소(참조)를 통해 복사된다.
let student = ["성희"];
let friend = student;
console.log(friend === student); // true, 같은 주소를 가리킴(두 변수가 같은 객체 참조)
friend.push("민지");
console.log(student); // [object Array] (2)["성희","민지"]