배열은 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용합니다.
자바스크립트의 배열은 객체이며 유용한 내장 메소드를 포함하고 있어요.
Array 생성자로 생성된 Array 타입의 객체이며 프로토타입 객체는 Array.prototype입니다.
1. 배열의 생성
1-1. 배열 리터럴
- 0개 이상의 값을 쉼표로 구분하여 대괄호[]로 묶어요.
- 첫번쨰 값은 인덱스 0으로 읽을 수 있어요.
- 존재하지 않는 요소에 접근하면 undefined를 반환해요.
const emptyArr = [];
console.log(emptyArr[1]); //undefined
console.log(emptyArr.length); //0
const arr = [
'zero', 'one', 'two','three','four'
];
console.log(arr[1]); // 'one'
console.log(arr.length); // 5
console.log(typeof arr); // object위의 배열을 객체 리터럴로 유사하게 표현하면 다음과 같다.
const obj = {
'0' : 'zero', '1' : 'one', '2': 'two', '3' : 'three', '4' :'four'
};— 배열은 요소에 접근하기 위해 대괄호 표기법만을 사용하며, 대괄호 내에 접근하고자 하는 요소의 index를 넣어줘요. 시작은 0부터입니다.
— 객체와 배열의 근본적인 차이는 배열 리터럴 arr의 prototype 객체는 Array.prototype이지만 객체 리터럴 obj의 prototype의 객체는 object.prototype이라는 것입니다.
1-2. Array() 생성자 함수
- 배열은일반적으로 배열 리터럴 방식으로 생성하지만, 배열 리터럴 방식도 결국 내장함수 Array() 생성자 함수로 배열을 생성하는 것을 단순화시킨 것이에요. Array() 생성자 함수는 Array.prototype.constructor 프로퍼티로 접근할 수 있어요.
- Array() 생성자 함수는 매개변수의 갯수에 따라 다르게 동작해요.
- 매개변수가 1이고 숫자인 경우 매개변수로 전달된 숫자를 length 값으로 가지는 빈 배열을 생성해요.
const arr = new Array(2);
console.log(arra) //(2) [empty * 2]그 외의 경우는 매개변수로 전달된 값들을 요소로 가지는 배열을 생성해요.
const arr = new Array(1, 2, 3);
console.log(arra) //(2) [1, 2, 3]2. 배열 요소의 추가와 삭제
2-1. 배열 요소의 추가
객체가 동적으로 property를 추가할 수 있는 것처럼 배열도 동적으로 요소를 추가할 수 있어요.
이때 순서에 맞게 값을 할당할 필요는 없고, index를 사용하여 필요한 위치에 값을 할당해요.
const arr = [];
arr[1] = 1;
arr[3] = 3;
console.log(arr); // (4) [empty, 1, empty, 3]2-2. 배열 요소의 삭제
배열은 객체이기 때문에 배열의 요소를 삭제하기 위해 delete 연산자를 사용하며, 이때 length에는 변함이 없어요.
해당 요소를 완전히 삭제하여 length에도 반영되게 하기 위해서는 Array.prototype.splice 메소드를 사용해요.
const numberArr = ['zero','one','two','three'];
//요소의 값만 삭제된다.
delete numberArr[2]; // (4) ['zero','one',empty,'three']
// 요소 값만 아니라 요소를 완전히 삭제한다.
// splice(시작 인덱스, 삭제할 요소수)
numberArr.splice(2, 1); //(3) ['zero','one','three']3. 배열의 순회
객체의 프로퍼티를 순회할 때 for...in문을 사용한다. 배열도 객체이니 사용할 수 있지만 배열은 property를 가질 수 있어 불필요한 프로퍼티까지 출력될 수 있고 요소들의 순서를 보장하지 않아 적합하지 않다.
따라서 배열의 순회에는 forEach 메소드, for 문, for...of 문을 사용하는게 좋아요!
const arr = [0,1,2,3];
arr.foo = 10;
//for...in문
for (const key in arr) {
console.log('key' + key + 'value' + arr[key]);
}
/*결과
key0value0
key1value1
key2value2
key3value3
keyfoovalue10*/
//forEach문
arr.forEach((item, index) => console.log(index, item));
/*결과
0 0
1 1
2 2
3 3 */
//for문
for ( let i = 0; i < arr.length; i++) {
console.log(i, arr[i]);
}
/*결과
0 0
1 1
2 2
3 3 */
//for...of문
for (const item of arr){
console.log(item);
}
/*결과
0
1
2
3 */
// forEach와 for...of문에서는 item(가명)이 key 값인가보당4. Array Property
4-1. Array.length
length 프로퍼티는 요소의 개수(배열의 길이)를 나타내요.
5. Array Method (배열 함수들)
5-1. Array.isArray
정적 메소드 Array.isArray는 주어진 인수가 배열이면 true, 배열이 아니면 false를 반환해요.
5-2. Array.from
Array.from 메소드는 유사 배열 객체 또는 이터러블 객체를 반환하여 새로운 배열을 생성해요.
5-3. Array.of
Array.of 메소드는 전달된 인수를 요소로 갖는 배열을 생성해요.
Array.of 는 Array 생성사 함수와 다르게 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성해요.
const arr1 = Array.of(1);
console.log(arr1); // [1]
const arr2 = Array.of(1, 2, 3);
console.log(arr2); // [1, 2, 3]
const arr3 = Array.of('string');
console.log(arr3); // 'string'5-4. Array.prtotype.indexOf (원본배열 변경x)
배열에서 인수를 검색하여 그 값의 index를 반환해요.
— 중복되는 요소가 있는 겅우 ⇒ 첫번째 index를 반환해요.
— 해당요소가 없는 경우 ⇒ -1을 반환해요.
const arr = [1,2,2,3];
// 배열 arr에서 요소를 검색하여 첫번째 인덱스를 반환
arr.indexOf(1); // 0
arr.indexOf(2); // 1
// 배열 arr에서 요소 0이 없으므로 -1을 반환
arr.indexOf(0); // -1
// 두번째 인수는 검색을 시작할 인덱스이다. 두번째 인수를 생략하면 처음부터 검색
arr.indexOf(2, 2); // 2indexOf 메소드는 배열에 요소가 존재하는지 여부를 확인할 때 유용해요.
5-5. Array.prototype.concat (원본배열 변경x)
인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환해요. 인수로 전달한 값이 배열인 경우, 배열을 해체하여 새로운 배열의 요소로 추가해요. 원본 배열은 변경되지 않아요.
원본 배열 + 배열(or 값)
const arr1 = [1, 2];
const arr2 = [3, 4];
// 배열 arr2를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
// 인수로 전달한 값이 배열인 경우, 배열을 해체하여 새로운 배열의 요소로 추가해요.
let result = arr1.concat(arr);
console.log(result); //[1,2,3,4]
// 배열 arr와 숫자를 원본 배열 arr1와 합쳐 새로운 배열을 반환
result = arr1.concat(arr2, 5);
console.log(result); //[1, 2, 3, 4, 5]5-6. Array.prototype.join : string (원본배열 변경x)
원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 값, 즉 구분자(separator)로 연결한 문자열을 반환합니다. 구분자(separator)는 생략 가능하며 기본 구분자는 ,입니다.
const arr = [1, 2, 3, 4];
// 기본 구분자는 ','입니다.
let result = arr.join();
console.log(result); // '1,2,3,4'
// 모두 문자열로 변환한 후, 빈문자열로 연결한 문자열을 반환
result = arr.join('');
console.log(result); // '1,2,3,4'5-7. Array.prototype.push : number (원본배열 변경o)
인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가합니다.
push 메소드는 원본 배열을 직접 변경합니다.
const arr = [1,2];
let result = arr.push(3, 4);
console.log(result); // 4
console.log(arr); // [1,2,3,4]push와 concat 메소드는 유사하지만 미묘한 차이가 있어요.
push 메소드 = 원본 배열을 직접변경
concat 메소드 = 원본 배열을 변경하지 않고 새로운 배열을 반환해요.
//concat은 새로운 변수가 필요할 것 같다
push 메소드는 배열의 마지막에 요소를 추가하므로 length property를 사용하는 것이 더 빨라요.
const arr = [1, 2];
arr[arr.length] = 3;
console.log(arr); // [1, 2, 3]push 메소드는 원본 배열을 직접 변경하는 효과가 있어요.
따라서 push 메소드보다는 ES6의 spread 문법을 사용하는 편이 좋아요! 👍
const arr = [1, 2];
// ES6 spread 문법
const newArr = [...arr, 3];
// arr.push(3);
console.log(newArr); // [1, 2, 3]5-8. Array.prototype.pop(); | undefined (원본배열 변경o)
원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환해요.
const arr = [1, 2];
let result = arr.pop();
console.log(result); // 2
console.log(arr); // [1]pop 메소드와 push 메소드를 사용하면 스택을 쉽게 구현가능해요!
스택(stack)은 데이터를 마지막에 밀어 넣고, 마지막에 밀어 넣은 데이터를 먼저 꺼내는 후입선출 방식의 자료 구조에요. 언제나 가장 마지막에 밀어넣은 최신 데이터를 취득해요.
데이터를 밀어 넣는 것을 푸시(push), 데이터를 꺼내는 것을 팝(pop)이라고 해요.
// 스택 자료 구조를 구현하기 위한 배열
const stack = [];
// push
stack.push(1);
console.log(stack); // [1]
stack.push(2);
console.log(stack); // [1, 2]
//pop
let value = stack.pop();
console.log(value) //2
value = stack.pop();
console.log(value); // []5-9. Array.prototype.reverse() (원본배열 변경o)
배열 요소의 순서를 반대로 변경해요.
const a = ['a','b','c'];
const b = a.reverse();
console.log(a); // ['c','b','a']
console.log(b); // ['c','b','a'] 5-10. Array.prototype.shifh() | undefined (원본배열 변경o)
배열에서 첫요소를 제거하고 제거한 요소를 반환해요. 만약 빈 배열일 경우 undefined를 반환해요.
const a = ['a','b','c'];
const b = a.shift();
console.log(a); // ['b','c']
console.log(b); // 'a'복습 - Array.prototype.pop()은 마지막 요소를 제거하고 제거한 요소를 반환해요.
const a = ['a','b','c'];
const c = a.pop();
console.log(a); // ['a','b'];
console.log(c); // 'c'
5-11. Array.prototype.slice(start=0, end=this.length) (원본배열 변경x)
인자로 지정된 배열의 부분을 복사하여 반환해요.
첫번째 매개변수 start에 해당하는 인덱스를 갖는 요소부터 매개변수 end에 해당하는 인덱스를 가진 요소 전까지까지 복사돼요.
매개변수
- start : 복사를 시작할 index, 음수인 경우 배열의 끝에서의 index를 나타낸다.
ex) slice(-2)는 배열의 마지막 2개 요소를 resturn한다. - end : 옵션이며, 기본값은 length이다.
const items = ['a','b','c'];
let res = items.slice(0, 1); // items[0]부터 items[1]전까지 반환 = 즉 items[0]
console.log(res); // ['a']
res = items.slice(1, 2);
console.log(res); // ['b']
res = items.slice(1); // items[1]부터 모든 요소를 반환
console.log(res); // ['b','c']
res = items.slice(-1);
console.log(res); // ['c']
res = items.slice(-2);
console.log(res); // ['b','c']
res = items.slice(); // 모든 요소를 반환
console.log(res); // ['a','b','c'];
console.log(items); // ['a','b','c'];
5-12. Array.prototype.splice(start:number, deleteCount=this.length-start, ...items:T[]): T[] (원본배열 변경o)
기존 배열의 요소를 제거하고 그 위치에 새로운 요소를 추가해요.
배열 중간에 새로운 요소를 추가할 때도 사용돼요.
매개변수
- start : 배열에서의 시작위치, start만 지정할 경우 배열의 start부터 모든 요소를 제거
- deleteCount : start부터 제거할 요소의 수이다. deleteCount가 0인 경우, 아무런 요소도 제거되지 않는다.
- items : 삭제한 위치에 추가될 요소들이다. 만약 아무런 요소도 지정하지 않을 경우, 삭제만 한다.
가장 일반적인 배열에서 요소를 삭제할 때
const items1 = [1, 2, 3, 4];
const res1 = items1.splice(1, 2);
console.log(items1); // [1, 4]
console.log(res1); // [2, 3]
------------------------------
const items2 = [1, 2, 3, 4];
const res2 = items.splice(1);
console.log(items2); // [1]
console.log(res2); // [2, 3, 4]
배열에서 요소를 제거하고 제거한 위치에 다른 요소를 추가한다.
const items = [1,2,3,4];
const res = items.splice(1, 1, 100);
console.log(items); // [1, 100, 3, 4]
console.log(res); // 2배열 중간에 배열의 요소들을 해체하여 추가할 때도 사용된다.
const items = [1, 4];
Array.prototype.splice.apply(items, [1, 0].concat([2, 3]));
//ES6
// items.splice(1, 0, ...[2, 3]);
console.log(items); // [1, 2, 3, 4]slice는 배열의 일부분을 복사해서 반환
splice는 배열에서 요소를 제거하고 제거한 위치에 다른 요소를 추가 = 원본을 훼손해요.
