배열
배열(Array)은 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 자바스크립트에서 배열은 객체이며, 여러 내장 메소드를 포함하고 있다.
1. 배열 생성
1) 배열 리터럴
// syntax: 배열명 = [값1, 값2... 값n];
const numArr = [1,"two","삼",true, NaN];
console.log(numArr[0]); // 1
console.log(arr.length); // 5
console.log(numArr[5]) // undefined 리터럴 방식은 0개 이상의 값을 쉼표로 구분하여 대괄호로 묶는 방식이다. 다른 프로그래밍 언어와 달리, 자바스크립트 배열은 어떤 데이터 타입든 자유롭게 들어갈 수 있다.
첫번째 값의 인덱스는 1이 아닌 0으로 읽으며, 존재하지 않는 값에 접근하면 undefined가 반환된다. 이는 어떤 방식으로 배열을 생성하든 동일하게 적용되는 특징이다.
2) Array() 생성자 함수
// syntax: 배열명 = new Array(매개변수1, 매개변수2... 매개변수n);
const numArr = new Array(1,"two","삼",true, NaN)
console.log(numArr[0]); // 1
console.log(arr.length); // 5
console.log(numArr[5]) // undefined
const numArr2 = new Array(2);
console.log(numArr2); // 길이 2의 빈 배열 생성객체와 마찬가지로 리터럴 방식으로 배열을 선언하면, 자바스크립트 엔진이 Array() 생성자 함수로 배열을 생성한다.
매개변수가 1개이고, 숫자인 경우 매개변수로 전달되는 숫자를 length로 갖는 빈 배열을 생성한다. 그외의 경우에는 매개변수에 저장된 값들을 요소로 가지는 배열을 생성한다.
2. 배열의 요소 추가 및 삭제
객체에 프로퍼티를 추가할 수 있는 것처럼 배열도 요소를 추가할 수 있다.
배열의 인덱스를 활용해 배열의 요소를 추가하는 방법도 있고, 메소드를 활용해 요소를 추가하는 방법도 있다. 인덱스를 촬용해 배열의 요소를 추가할 때, 해당 인덱스에 이미 요소가 있을 경우 그 요소의 값이 새로운 값으로 재할당 된다.
//배열 크기
var arr = [1, 2, 3, 4, 5];
console.log("배열의 길이는: " + arr.length);
// 배열 추가
// Index 활용
var arr = [];
arr[1] = 2;
arr[3] = 3;
console.log(arr); // empty, 2, empty, 3
console.log(arr.length); // 4
// 배열 재할당
arr[3] = 4; // 해당 인덱스에 요소가 이미 있을 경우, 재할당
console.log(arr); // empty, 2, empty, 4
console.log(arr.length); // 4
// 배열 요소 삭제
delete arr[3];
console.log(arr); // empty, 2, empty, empty >> 완전 삭제되지 않고 자리는 그대로
console.log(arr.length); // 4
배열 추가 메소드
배열의 추가와 관련된 메소드로는 unshift, push, concat이 있다.
unshift, push를 사용하면 원본 배열이 변화하지만, concat은 원본 배열이 변화하지 않는다.
1) unshift
unshift는 배열의 맨 앞에 요소를 추가하는 메소드이다.
요소를 하나만 추가할 수도 있고, 여러 개를 추가할 수도 있다. 이 메소드를 사용할 경우 배열의 원본이 수정된다.
var arr = ["나", "다", "라", "마"];
arr.unshift("가");
console.log(arr); // 가,나,다,라,마
arr.unshift("A", "B", "C");
console.log(arr); // A,B,C,가,나,다,라,마2) push
push는 배열의 맨 뒤에 요소를 추가하는 메소드이다.
요소를 하나만 추가할 수도 있고, 여러 개를 추가할 수도 있다. 이 메소드를 사용할 경우 배열의 원본이 수정된다.
var arr = ["A", "B", "C", "D", "E"];
arr.push("F");
console.log(arr); // A,B,C,D,E,F
arr.push("G", "H", "I");
console.log(arr); // A,B,C,D,E,F,G,H,I3) concat
concat은 배열을 결합하는 메소드이다.
하나의 배열만 합칠 수도 있고, 여러 배열을 합칠 수도 있다. 이 메소드를 사용할 경우 배열의 원본은 수정되지 않는다. 원본 배열을 수정하기 위해서는 원본 배열명 = 원본 배열명.concat(추가할 배열) 으로 작성해주어야 한다.
var arr1 = [1, 2, 3, 4, 5];
var arr2 = [6, 7];
var arr3 = [8, 9, 10];
arrConcat = arr1.concat(arr2, arr3);
console.log(arrConcat); // 1,2,3,4,5,6,7,8,9,10
console.log(arr1); // 1,2,3,4,5 즉, 원본 배열은 그대로배열 삭제 메소드
배열의 추가와 관련된 메소드로는 shift, pop 이 있다.
1) shift
shift는 맨 앞의 값을 삭제하는 메소드이다. 배열을 추가하는 메소드와는 달리 한 번에 하나만 삭제할 수 있다.
var arr = ["가","가","나","다","라","마"];
arr.shift(); // 가
console.log(arr) // 가,나,다,라,마2) pop
pop은 맨 뒤의 값을 삭제하는 메소드이다.
var arr = ["A", "B", "C", "D", "E"];
arr.pop(); // E
console.log(arr); // A,B,C,D3. 배열 변경
splice 는 배열을 변경할 때 사용하는 메소드이다.
요소를 추가만 할 수도, 요소를 삭제만 할 수도, 요소 전체를 변경할수도 있다.
// syntax = 배열명.splice(시작위치, 제거할 요소 개수, 추가할 요소)
var arr = [1, 4, 5, 6];
arr.splice(1, 0, 2, 3) // 1번 인덱스부터 요소를 0개 제거하고 2,3 추가
console.log(arr); // 1,2,3,4,5,6
var arr = [1, 2, 3, 4, 5, 4, 5, 6, 7];
var del = arr.splice(3, 2); // 3번 인덱스부터 요소 2개 제거
console.log(del); // 4,5
console.log(arr); // 1,2,3,4,5,6,7
var arr = [1, 2, 3, 3, 4, 1, 6];
var del = arr.splice(3, 3, 4, 5); // 3번 인덱스부터 요소를 3개 제거하고 4, 5 추가
console.log(del); // 3,4,1
console.log(arr); // 1,2,3,4,5,64. 배열 자르기
배열을 자르는 메소드로는 slice 가 있다. 배열에서 요소를 꺼낸다는 점은 pop이나 shift와 같지만, 여러개의 요소를 꺼낼 수 있다는 점이 다르다. 또 pop이나 shift와 달리 원본 배열은 변경되지 않는다.
// syntax = 배열명.slice(시작 위치, 배열 길이)
var arr = ["서울", "대전", "대구", "부산", "울산", "광주"];
console.log(arr.slice(1)); // 대전, 대구, 부산, 울산, 광주 1번 인덱스 ~ 끝까지 자르기
console.log(arr.slice(1, 4)); // 대전, 대구, 부산 1번 인덱스 ~ 3번 인덱스
console.log(arr.slice(-2)); // 울산, 광주 배열의 마지막 요소 2개 반환
console.log(arr); // 원본 배열은 변경되지 않음5. 배열 정렬
배열을 정렬하는 방법에는 sort 와 reverse 가 있다.
1) sort
sort 메소드는 현재 배열을 직접 변경하여 정렬된 배열을 반환한다.
var arr = [1, 5, 2, 3, 7];
arr.sort();
console.log(arr); // 1,2,3,5,7-
기본 정렬 순서는 오름차순이다.
-
문자열을 비교할 때는 유니코드 값으로 한 글자씩 비교한다.
-
알파벳은 대문자 이후에 소문자가 오기 때문에 소문자가 더 크다.
-
ex) "10"과 "2" 비교
- 문자열 10의 Unicode 코드 포인트 U+0031U+0030
- 문자열 2의 Unicode 코드 포인트 U+0032
- 2가 더 큰 값으로 처리되어 10이 2보다 앞으로 정렬된다.
2) reverse
reverse 메소드는 현재 배열을 직접 변경하여 역순으로 정렬된 배열을 반환한다.
여기서 주의할 점은 reverse는 내림차순으로 정렬해주는 것이 아니라, 현재 배열을 역순 정렬해주는 메소드라는 것이다. 따라서 내림차순으로 정렬하기 위해서는 sort 메소드로 오름차순 정렬을 해준 뒤에 reverse 메소드를 사용해주어야 한다.
var arr = [1, 5, 2, 3, 7];
console.log(arr.reverse()); // 7,3,2,5,1
var arr2 = [1, 5, 2, 3, 7];
console.log(arr.sort().reverse()); // 7,5,3,2,1
6. 배열을 문자열로
배열을 문자열로 변경하는 메소드로는 join 이 있다.
join은 지정한 구분자로 배열을 연결하여, 하나의 문자열로 반환한다. 구분자는 생략 가능하며, 기본 구분자는 , 이다.
var arr = ["서울", "대전", "대구", "부산"];
console.log(arr.join("-")); // "서울,대전,대구,부산"
console.log(arr.join("")); // "서울대전대구부산"
console.log(arr.join("-")); // "서울-대전-대구-부산"
console.log(arr.join("에서 ")); // "서울에서 대전에서 대구에서 부산에서"
console.log(arr); // 서울, 대전, 대구, 부산 >> 원본 배열 그대로 7. 배열 순회
객체를 순회할 때는 for in 문을 사용한다. 배열 역시 객체이기 때문에 for in문을 사용할 수 있다. 하지만 for in을 사용할 경우 배열 요소 뿐만 아니라 불필요한 프로퍼티까지 함께 출력될 수 있고, 요소들의 순서를 보장하지 않기 때문에 for 문이나 forEach문, for of 문을 사용하는 것이 더 좋다.
const arr = ["가", "나", "다", "라"];
arr.foo = 10; // 불필요한 프로퍼티 생성
// for문
for(const index in arr){
console.log("index: " + index, "value:" + arr[index]);
}
/*
index: 0 value = "가"
index: 1 value = "나"
index: 2 value = "다"
index: 3 value = "라"
index: foo value = 10 >> 프로퍼티까지 함께 출력
*/
//forEach문
/*syntax: 배열명.forEach(function(value, index, array){});
arrow function: 배열명.forEach((value,index,array) => 실행문);
- value: 배열 요소
- index: 배열 인덱스
- array: 배열 자체
*/
arr.forEach((value, index) => console.log("index: " + index, "value: " + value));
/*
index: 0 value = "가"
index: 1 value = "나"
index: 2 value = "다"
index: 3 value = "라"
*/
// for of문
for(let index of arr){
console.log("index: " + index, "value:" + arr[index]);
}
/*
index: 0 value = "가"
index: 1 value = "나"
index: 2 value = "다"
index: 3 value = "라"
*/