🌎 Web/JavaScript

[JavaScript] 자바스크립트의 배열(Array)

오늘 ONEUL 2022. 4. 11. 17:46

배열이란?

자바스크립트에서 배열(Array)은 이름과 인덱스로 참조되는 정렬된 값의 집합이다. 각각의 값인 요소(element)와 위치를 가리키는 인덱스(index)로 구성되어 있다.

 

 

 

 

배열의 특징

  • 주로 const로 선언한다.
  • 배열 이름은 보통 복수형으로 작성한다.
  • 객체와는 다르게 index 번호로 구분되기 때문에 순서가 중요하다.
  • 같은 배열에 있는 배열 요소끼리의 타입이 다를 수도 있다.
  • 배열 요소의 인덱스가 연속적이지 않아도 되고, 따라서 특정 배열 요소가 비어 있을 수도 있다. (undefined)
  • 자바스크립트에서 배열은 Array 객체로 다뤄진다.
  • 하나의 이름으로 다양한 데이터를 다룰 수 있기 때문에 활용도가 높다.
  • 배열의 마지막 인덱스는 배열.length - 1 이다.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];

 

 

 

 

배열의 생성

자바스크립트에서 배열은 만드는 방식은 크게 3가지가 있다.

  1. 배열 리터럴을 이용하는 방법
  2. Array의 객체 생성자를 이용하는 방법
  3. new 연산자를 이용한 Array 객체 생성 방법
const arr = [배열요소1, 배열요소2,...];          // 배열 리터럴을 이용하는 방법
const arr = Array(배열요소1, 배열요소2,...);     // Array 객체의 생성자를 이용하는 방법
const arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법
※ new 연산자를 이용한 방법은 가독성, 실행 속도를 위해 추천하지 않는다.

 

 

 

 

배열의 참조

인덱스 번호를 참조하여 배열에 접근할 수 있다.

배열이름[인덱스]
const arr = ["JavaScript"]; // 요소가 하나뿐인 배열을 생성함.
const element = arr[0];     // 배열의 첫 번째 요소를 읽어서 대입함.

arr[1] = 10;      // 배열의 두 번째 요소에 숫자 10을 대입함. 배열의 길이는 1에서 2로 늘어남.
arr[2] = element; // 배열의 세 번째 요소에 변수 element의 값을 대입함. 배열의 길이는 2에서 3으로 늘어남.
console.log(arr.length); // 배열의 길이는 3
console.log(arr); // 전체 배열 출력

 

 

 

 

배열 요소 추가

자바스크립트에서 배열에 새로운 배열 요소를 추가하는 방식은 크게 3가지가 있다.

  1. push() 메서드를 이용하는 방법 (배열의 마지막에 추가)
  2. length 프로퍼티를 이용하는 방법 (배열의 마지막에 추가)
  3. 특정 인덱스를 지정하여 추가하는 방법
arr.push(추가할 요소);         // push() 메소드를 이용하는 방법
arr[arr.length] = 추가할 요소; // length 프로퍼티를 이용하는 방법
arr[특정인덱스] = 추가할 요소; // 특정 인덱스를 지정하여 추가하는 방법

 

 

 

 

Array.prototype 메서드

  1. 원본 배열을 변경하는 메서드
  2. 원본 배열은 변경하지 않고 참조만 하는 메서드
  3. 원본 배열을 반복적으로 참조하는 메서드

 

 

1. 원본 배열을 변경하는 메서드

  • push() - 배열의 마지막에 요소를 추가하고, 배열의 총길이를 반환 (arr[arr.length] = value와 같음)
  • pop() - 배열의 마지막 요소를 제거하고, 제거된 요소를 반환
  • shift() - 배열의 첫 요소를 제거하고, 제거된 요소를 반환 (pop()과 위치가 반대)
  • unshift() - 배열의 가장 앞 쪽에 요소를 추가하고, 배열의 총길이를 반환
  • reverse() - 배열의 순서를 전부 반대로 교체
  • sort() - 배열 요소를 모두 문자열로 보고, 알파벳 순서에 따라 정렬 (숫자나 불리언 타입은 잘못 정렬될 수 있음)
// sort() 메서드로 숫자를 정렬하려면?
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); // 역정렬은 b -a

 

  • splice() - 기존 배열 요소를 제거하거나 새로운 배열 요소 추가하여 배열 내용 변경 후 제거된 요소를 배열의 형태로 반환
const arr = [1, true, "JavaScript", "자바스크립트"];

// 인덱스 1의 요소부터 2개의 요소를 제거한 후, false와 "C언어"를 그 자리에 삽입함.
let removedElement = arr.splice(1, 2, false, "C언어");

console.log(arr);            // [1,false,C언어,자바스크립트]
console.log(removedElement); // [true,JavaScript]

 

  • delete - 배열 요소를 삭제(배열의 길이는 변하지 않음)

 

 

2. 원본 배열은 변경하지 않고 참조만 하는 메서드

  • join() - 전달받은 인수를 구분자로 사용하여 배열의 모든 요소를 하나의 문자열로 반환
  • slice() - 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지를 새로운 배열로 반환(종료 인덱스가 없으면 끝까지)
  • concat() - 인수로 전달받은 배열에 기존 배열을 연결하여 새로운 배열을 반환
const arr = [1, true, "JavaScript"];
arr.concat([2, false, "문자열"]); // [1,true,JavaScript,2,false,문자열]
arr.concat([2], [3, 4]);          // [1,true,JavaScript,2,3,4] -> 2개 이상의 배열도 한 번에 합칠 수 있음.
arr.concat("다섯", [6, 7]);       // [1,true,JavaScript,다섯,6,7] -> 값과 배열도 한 번에 합칠 수 있음.

 

  • toString() - 모든 요소를 쉼표(,)로 구분하여 하나의 문자열로 반환
  • indexOf() - 전달받은 값과 동일한 배열 요소가 처음으로 등장하는 위치의 인덱스를 반환, 항목을 찾을 수 없으면 -1 반환 (문자의 indexOf() 메서드와 비슷)
  • lastIndexOf() - 전달받은 값과 동일한 배열 요소가 마지막으로 등장하는 위치의 인덱스를 반환

 

 

3. 원본 배열을 반복적으로 참조하는 메서드

  • forEach() - 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

// 3개의 arguments를 받음
function myFunction(value, index, array) {
  txt += value + "<br>";
}

 

  • map() - 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 새로운 배열에 담아 반환
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

// 3개의 arguments를 받음
function myFunction(value, index, array) {
  return value * 2;
}

 

  • filter() - 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 결괏값이 true인 요소들만을 새로운 배열에 담아 반환
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

// 3개의 arguments를 받음
function myFunction(value, index, array) {
  return value > 18;
}

 

  • reduce() - 해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행
    • 콜백 함수에 배열의 첫 번째 요소와 두 번째 요소를 인수로 전달하고 실행, 반환된 결괏값과 세 번째 요소를 다시 인수로 전달하고 실행 → 이러한 동작을 반복하고 마지막 결괏값을 반환
    • 두 번째로 들어오는 인수는 초기값을 세팅 [init value]
    • 기본적으로 왼쪽에서 오른쪽으로 작동하고, reduceRight() 메서드는 그 반대로 작동
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, [init value]); // 99

function myFunction(total, value, index, array) {
  return total + value;
}

 

  • every() - 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 모두 true일 때에만 true를 반환
    • filter() 메서드와 다른 점은? filter() 메서드는 true인 값을 반환하고 every() 메서드는 모든 배열을 순환 후 true of false를 반환
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction); // false

// 모든 배열 값이 18보다 큰 지 확인
function myFunction(value, index, array) {
  return value > 18;
}

 

  • some() - 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 하나라도 true이면 true를 반환
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction); // true

// 일부 배열 값이 18보다 큰 지 확인
function myFunction(value, index, array) {
  return value > 18;
}

 

  • find() - 테스트 함수를 통과하는 첫 번째 배열 요소의 값을 반환, 만족하는 값이 없으면 undefined 반환
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction); // 25

// 18보다 큰 첫번째 요소 확인
function myFunction(value, index, array) {
  return value > 18;
}

 

  • findIndex() - 테스트 함수를 통과하는 첫 번째 배열 요소의 인덱스를 반환, 만족하는 값이 없으면-1 반환
    • indexOf() 메서드와 다른 점은? indexOf() 메서드는 이퀄 연산, findIndex()는 조건 연산
  • from() - 길이 속성이 있거나 반복 가능한 객체에서 Array 객체를 반환(ex. 문자열을 배열로, 맵을 배열로)
const myArr = Array.from("ABCDEFG"); // 문자열을 배열로

 

  • entries() - 배열 요소별로 키(key)와 값(value)의 한 쌍으로 이루어진 새로운 배열 반복자 객체(Array Iterator Object)를 배열 형태로 반환
    • 이때 키에는 인덱스가 저장되고, 값에는 배열 요소의 값이 저장된다
  • keys() - 배열 요소별로 키(key)만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환
  • values() - 배열 요소별로 값(value)만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환
  • includes() - 해당 배열에 전달받은 값과 동일한 배열 요소의 존재 여부를 true or fasle로 반환
    • indexOf() 메서드와 다른 점은? NaN값을 확인할 수 있다
const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.includes("Mango"); // true

 

 

 

 

 

※ 참고자료

http://www.tcpschool.com/javascript/js_array_basic

https://www.w3schools.com/js/js_arrays.asp

저작자표시