JS 자바스크립트 배열(Array) + 배열을 다루는 내장 API들 소개

배열(Array)

배열(Array)은 순서가 있는 데이터 집합을 다루기 위한 데이터 구조입니다. JS에서 배열은 다른 프로그래밍 언어와 다른 점이 있습니다. 바로 JS에서 배열은 특수한 형태의 객체로 다룬다는 점입니다. 또한 JS는 변수의 타입이 런타임에 결정되는 동적 타입 언어이기 때문에 배열에 담기는 데이터타입이 동일하지 않아도됩니다.

var arr = [];

console.log(typeof arr);  // Object 출력

const mixedArr = [1, "two", true, {age: 4}, [5, 6, 7]];

   

 

배열 선언 방식: const

배열을 선언할 때 const 키워드를 사용하는 것이 일반적입니다. 배열을 const로 선언하는 이유는 배열 변수가 재할당되지 않도록 하기 위해서입니다. const로 선언된 변수는 한 번 초기화된 후 다시 재할당할 수 없습니다. const 키워드를 사용하여 배열을 선언하면 배열의 참조를 불변하게 만들게되기 때문에, 배열에 대한 재할당을 방지하지만, 배열 내부의 값을 추가하거나 삭제하는 것은 가능합니다.

const array = [];

 

const 키워드로 배열을 선언해주기 때문에 빈 배열로라도 반드시 초기화해주어야 합니다. 

 

배열 선언 및 초기화

// 방법1
const fruits = ["Apple", "Banana", "Orange"];

// 방법2
const fruits = [];
fruits[0] = "Apple";
fruits[1] = "Banana";
fruits[2] = "Orange";

// 방법3
const fruits = new Array("Apple", "Banana", "Orange");

 

 

배열 조작하기

인덱스를 사용한 배열 조작 

const fruits = [];
fruits[0] = "Apple";
fruits[1] = "Banana";
fruits[2] = "Orange";

console.log(fruits);  // ["Apple", "Banana", "Orange"]

fruits[0] = "Grape";
console.log(fruits);  // ["Grape", "Banana", "Orange"]

 

내장 API를 사용하여 배열 조작

JS에서 인덱스로 접근하여 배열을 조작하는 방식보다는 내장 API를 사용하여 배열을 조작하는 것을 권장하고 있습니다. 내장 API를 사용함으로 가독성 및 의도를 표현할 수 있고, 오류 예방 및 유지 보수가 좋아지기 때문입니다. 다음 메서드들은 가장 많이 쓰이는 배열 내장 API입니다.   

• push(): 배열에 데이터 추가 (마지막에 추가)
• pop(): 배열의 마지막 데이터 꺼냄
• slice(): 배열의 특정 인덱스에 있는 값 반환
• splice(): 배열의 특정 인덱스에 있는 값 변경 또는 삭제
• shift(): 배열의 첫번째 인덱스의 값을 꺼냄  

 

배열 요소 추가

• push(): 배열 마지막에 새 요소를 추가합니다.
• unshift(): 배열 처음에 새 요소를 추가합니다. 이때 새 배열 길이를 반환합니다.
• 인덱스 지정

const fruits = ["Apple", "Banana", "Orange"];
fruits.push("Grape");
// 길이 4   ["Apple", "Banana", "Orange", "Grape"]

fruits.unshift("Lime");
// 길이 5   ["Lime", "Apple", "Banana", "Orange", "Grape"]

fruits[9] = "Kiwi";
// 길이 10  ["Lime", "Apple", "Banana", "Orange", "Grape", undefined, undefined, ..., "Kiwi"]

JS에서 배열은 다른 프로그래밍 언어와 다르게 선언을 할 때 크기를 지정하지 않아도 됩니다. 또한 데이터를  추가할 때도 중간 인덱스를 스킵하고 9번째 인덱스에 접근하여 값을 추가할 수 있습니다.

위에 마지막 예제는 이해를 돕기 위해 배열 원소 표시를 저렇게 나타냈지만 사실은 배열 length 속성은 마지막 원소의 인덱스 값 + 1을 반환을 하기 때문에 저러한 값이 나오는 것입니다.

 

배열 요소 삭제

• pop(): 배열에서 마지막 요소를 제거합니다.
• shift(): 배열에서 첫 번째 요소를 제거합니다.
• delete: 지정 배열 원소를 삭제합니다. 하지만 이 방식은 삭제된 배열 원소 위치에 undefined를 남기기 때문에 pop()과 shift()를 사용하는 권장합니다.

const fruits = ["Apple", "Banana", "Orange"];

let fruit = fruits.pop();     // Orange  배열: ["Apple", "Banana"]  크기: 2

let fruit = fruits.shift();   // Apple   배열: ["Banana"]           크기: 1

delete fruits[0];             //         배열: [undefined]          크기: 1

 

배열 Loop

const fruits = ["Apple", "Banana", "Orange"];

// for문
let text = "<ul>";
for (let i = 0; i < fruits.length; i++) {
	text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

// forEach
let text = "<ul>";
fruits.forEach(fruit => {
	text += "<li>" + fruit + "</li>";
});
text += "</ul>";

 

배열 정렬

sort()는 기본적으로 사전순으로 정렬합니다. 이때 숫자인 경우 103이 18보다 크지만 사전순으로는 작기 때문에 정렬이 올바르게 되지 않음을 확인할 수 있습니다. 이를 해결하기 위해 compare 기능을 사용해야 합니다.

const ages = [26, 20 ,18, 15, 19, 36];

ages.sort();    // [103, 18, 25, 28, 36]
ages.reverse(); // [36, 28, 25, 18, 103]

ages.sort(function(a, b) {   //[18, 25, 28, 36, 103]
	return a - b;
});
ages.sort((a, b) => b - a);  //[103, 36, 28, 25, 18]

 

배열 원소 값 검색

• indexOf(element, index): 원소 값의 (첫 번째 항목)위치 반환, 찾을 수 없으면 -1 반환, index 생략 가능
• lastIndexOf(element, index): 원소 값의 (마지막 항목)위치 반환, 찾을 수 없으면 -1 반환, index 생략 가능

const fruits = ["Apple", "Orange", "Apple", "Banana"];
let position = fruits.indexOf("Apple") + 1;   // 1

 

• find(): 조건을 만족하는 첫 번째 배열 원소 값 반환

const ages = [15, 36, 103, 25, 18];

let person = ages.find(age => age > 19);

console.log(person);  // 36

 

• findIndex(): 조건을 만족하는 첫 번째 배열 원소의 인덱스 반환

 

• includes(): 원소가 배열에 있는지 확인

const fruits = ["Apple", "Banana", "Orange"];

fruits.includes("Banana"); // is true

 

객체에서 배열 만들기

• 길이 속성이 있는 객체이거나 반복 가능한 객체이어야 합니다.

const init = Array.from("HelloWorld");

console.log(init);  // ['H', 'e', 'l', 'l', 'o', 'W', 'o', 'r', 'l', 'd']

 

배열 합치기(Merging)

• 배열을 다른 배열과 합치는 것이 가능합니다.
• 이때 concat()에 배열이 아닌 원소를 지정해도 합치는 것이 가능합니다.

const fruits = ["Apple", "Banana", "Orange"];
const meats = ["pig", "cow", "chicken"];

const foods1 = meats.concat(fruits);
// ['pig', 'cow', 'chicken', 'Apple', 'Banana', 'Orange']

const foods2 = meats.concat(vegetable, fruits);
// ['pig', 'cow', 'chicken', 'carrot', 'cabbage', 'Apple', 'Banana', 'Orange']

console.log(foods);

 

배열 차원 줄이기

const twoDimensionalArr = [[1,2],[3,4],[5,6]];
const oneDimensionalArr = twoDimensionalArr.flat(); // [1, 2, 3, 4, 5, 6]

 

배열 splice / slice

• splice()
  • 배열에 새 항목을 추가할 수 있습니다.
  • 이를 응용하여 배열에 undefined를 남기지 않고 원소를 제거할 수 있습니다. (원소를 추가하지 않고 제거할 원소 수만 지정한 경우)
  • 첫 번째 매개변수: 원소가 추가될 위치
  • 두 번째 매개변수: 제거할 원소 수
  • 나머지 매개변수: 추가할 새 원소들
  • splice() 반환 값: 삭제된 원소 배열

const fruits = ["Apple", "Banana", "Orange"];
console.log(fruits.splice(2, 1, "Grape", "Lime"));       // ['Orange']

console.log(fruits);           // ['Apple', 'Banana', 'Grape', 'Lime']

 

• slice()
  • 배열을 잘라낼 수 있습니다.

const fruits = ["Apple", "Banana", "Orange", "Grape", "Lime"];
console.log(fruits.slice(1));    // ['Banana', 'Orange', 'Grape', 'Lime']
console.log(fruits.slice(1, 3)); // ['Banana', 'Orange']

 

배열 채우기

const fruits = ["Apple", "Banana", "Orange", "Grape", "Lime"];
console.log(fruits.fill("Lemon"));         // ['Lemon', 'Lemon', 'Lemon', 'Lemon', 'Lemon']
console.log(fruits.fill("Peach", 2, 4));   // ['Lemon', 'Lemon', 'Peach', 'Peach', 'Lemon']

 

배열 필터

const ages = [26, 20 ,18, 15, 19, 36];
      
const adults = ages.filter(age => age > 19);

console.log(adults); // [26, 20, 36]

 

매핑하여 새로운 배열 만들기

const ages = [28, 36, 103, 25, 18];

const doubleAges = ages.flatMap(age => age * 2);

console.log(doubleAges);  // [56, 72, 206, 50, 36]

 

배열의 값 유효성 확인

• every(): 배열의 모든 값이 조건에 유효한지 확인
• some(): 배열의 일부 값이 조건에 유효한지 확인

const ages = [28, 36, 103, 25, 18];

let allAgeOver17 = ages.every(age => age > 17);

console.log(allAgeOver17);  // true

 

연관 배열

const member = [];
member["name"] = "kim";
member["gender"] = "male";
member["age"] = 25;
member.length;             // 0
member[0];                 // undefined
member["name"]             // kim
Object.keys(fruits).length // 3

• 위 예제처럼 배열을 숫자 인덱스로 정의하지 않는다면 객체 형식으로 사용하는 거와 마찬가지입니다.
• 배열의 인덱스가 수가 아니기 때문에 iterable하지 않아서 배열의 길이를 구할 수 없게 됩니다.
• 만약 연관 배열의 길이를 구하고 싶다면 'Key' 길이를 구하는 방법을 사용하면 됩니다.