📂 배열

💡 배열 만들기

📍 배열 리터럴

var arr = ["e1", "e2", "e3"];

 

다양한 데이터 타입을 배열에 저장할 수 있다.

var arr = ["beomsic", 26, [0, 1, 2]];

 

 

📍 배열 생성자

var arr = new Array(1, 2, 3);
console.log(arr) // [ 1, 2, 3 ]

var arr2 = new Array(10);
console.log(arr2); // [ <10 empty items> ]
console.log(arr2.length); // 10

• 배열 생성자에 인수를 하나만 넘겨주는 경우에는 그 인수의 값이 배열의 길이가 된다.

 

배열 길이

• length 속성을 이용해 배열의 길이를 알아낼 수 있다.

var arr = ["test1", "test2"]
arr.length; // 2

 

📒 배열 메서드

 

메서드	설명
Array.isArray(arg) : boolean	정적 메소드 - 주어진 인수가 배열이라면 true, 아니라면 false 를 반환
Array.from	특정 객체를 반환하여 새로운 배열 생성
Array.of	전달된 인수를 요소로 갖는 배열을 생성
Array.fill(value, start, end)	배열의 시작 인덱스 부터 끝 인덱스 이전까지 하나의 값으로 채워주는 메서드

 

Array.from

반환할 수 있는 특정 객체는 2가지 이다.

• 유사배열 객체 (array-like objects)
  • length 프로퍼티와 인덱스 된 요소를 가지고 있는 객체
• 이터러블 객체 (iterable objects)
  • Map과 Set 객체 및 문자열과 같이 해당 요소를 개별적으로 선택할 수 있는 객체

 

const arr1 = Array.from('Hello');
console.log(arr1) // [ 'H', 'e', 'l', 'l', 'o' ]

const arr2 = Array.from({ length: 2, 0: "a", 1: "b" }); // **유사배열 객체**
console.log(arr2); // [ 'a', 'b' ]

const arr3 = Array.from({ length: 5 }, function (v, i) { return i; })
console.log(arr3); // [ 0, 1, 2, 3, 4 ]

 

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]

 

Array.fill(value, start, end)

원본 배열을 직접 변경해, 리턴값은 변형한 배열이다.

• value : 배열을 채울 값
• start : 시작 인덱스, default = 0
• end : 끝 인덱스, default = arr.length

const zeroArray = Array(6).fill(0);
console.log(zeroArray); // [0, 0, 0, 0, 0, 0]

 

이차원 배열 만들기

const arr = new Array(4);

for (let i = 0; i < arr.length; i++) {
    arr[i] = new Array(5).fill(1);
}

console.log(arr[0][0]); // 1
console.log(arr[1][0]); // 1
console.log(arr[2][2]); // 1
console.log(arr[3][3]); // 1
console.log(arr[3][4]); // 1

 

💡 프로토타입 메서드

 

프로토타입 메서드	설명
push()	하나 이상의 요소를 배열의 가장 마지막에 추가, 배열의 총 길이 반환
pop()	배열의 가장 마지막 요소 제거, 제거된 요소 반환
shift()	배열의 가장 첫 요소 제거, 제거된 요소 반환
unshift()	하나 이상의 요소를 배열의 가장 앞에 추가, 배열의 총 길이 반환
reverse()	배열의 요소 순서를 전부 반대로 교체
sort()	해당 배열의 배열 요소들을 알파벳 순서에 따라 정렬
splice()	기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가해 배열의 내용을 변경
indexOf()	전달 받은 값과 동일한 배열 요소가 처음 등장하는 위치의 인덱스 반환
map()	해당 배열의 모든 요소에 대해 반복적으로 명시된 콜백 함수 실행 후, 실행 결과를 새로운 배열로 반환
filter()	해당 배열의 모든 요소에 대해 반복적으로 명시된 콜백 함수 실행 후, 결과값이 true인 요소들만을 새로운 배열에 담아 반환
includes()	배열의 항목에 특정 값이 있는지 판단하여 true 또는 false 를 반환

 

🔄 문자열 ←→ 배열

 

문자열을 배열로 변환하는데는 split() 메서드를 이용한다.

배열을 문자열로 변환하는데는 join(), toString() 메서드를 이용한다.

var str = "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle";
var arr = str.split(",");

arr.length // 6
arr[0] // Manchester

var newStr = arr.join(",");
newStr // "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle"

var dogs = ["dog", "rocket", "Bella"];
dogs.toString(); // dog,rocket,Bella

 

➕ 추가 및 제거

 

배열의 맨 끝에 원소를 추가하거나 제거하기 위해서는 push(), pop() 메서드를 이용한다.

var arr = ["beomsic", "beom"];
arr.push("sic");
console.log(arr); // [ 'beomsic', 'beom', 'sic' ]

var remove = arr.pop();
console.log(arr); // [ 'beomsic', 'beom' ]
console.log(remove); // sic

 

unshift() 와 shift()는 push()와 pop()과 같이 동작한다.

하지만, 배열의 맨 끝이 아닌 제일 처음 부분에 원소를 추가하거나 제거한다.

var arr = ["beomsic", "beom"];
arr.unshift("sic");

console.log(arr); // [ 'sic', 'beomsic', 'beom' ]

var remove = arr.shift();
console.log(arr); // [ 'beomsic', 'beom' ]
console.log(remove); // sic

 

💡 splice(start, deleteCount, …items)

• start : 시작 위치 인덱스
  • start만을 지정시, start부터 모든 요소를 제거
• deleteCount : 시작 위치로부터 제거할 요소의 수
  • 0 인 경우 아무런 요소도 제거되지 않는다.
• items : 삭제한 위치에 추가될 요소
  • 아무런 요소도 지정하지 않는다면, 삭제만 진행
• 반환 값 : 삭제한 요소들을 가진 배열

 

 

총 3가지의 기능으로 사용된다.

 

1. 배열 요소 추가
2. 배열 요소 교체
3. 배열 요소 삭제

 

1️⃣ 배열 요소 삭제

const items = [1, 2, 3, 4];

// items[1]부터 2개의 요소를 제거하고 제거된 요소를 배열로 반환
const res = items.splice(1, 2);

console.log(res); // [ 2, 3 ]
console.log(items); // [ 1, 4 ]

const items2 = [1, 2, 3, 4];
const res2 = items.splice(1);

console.log(items2); // [ 1 ]
console.log(res2); // [ 2, 3, 4 ]

 

2️⃣ 배열 요소 교체

const items = [1, 2, 3, 4];

const res = items.splice(1, 2, 20, 30);

console.log(items); // [ 1, 20, 30, 4 ]
console.log(res);   // [ 2, 3 ]

 

3️⃣ 배열 요소 추가

const items = [1, 2, 3, 4];

// items[1] 부터 0개의 요소를 삭제, 그 자리에 새로운 요소 100을 추가
const res = items.splice(1, 0, 100);

console.log(items); // [ 1, 100, 2, 3, 4 ]
console.log(res);   // [ ]

 

📕 참고자료

배열(Arrays) - Web 개발 학습하기 | MDN

[JS] 📚 자바스크립트 Array 메소드 💯 총정리