Javascript Array 객체 Object

---

Array 객체

자바스크립트에서 배열(array)은 정렬된 값들의 집합으로 정의되며, Array 객체로 다룸

 

Array.isArray() : 전달받은 값이 Array 객체인지 아닌지를 검사

Array.isArray([]);          // true
Array.isArray(new Array()); // true
Array.isArray(123);         // false
Array.isArray("Array");     // false
Array.isArray(true);        // false

Array.from() : ECMAScript 6부터 추가된 Array.from() 메서드는 객체들을 배열처럼 변환

function arrayFrom() {
    return Array.from(arguments);
}

Array.from(arrayFrom(1, 2, 3));        // [1, 2, 3]
var myMap = new Map([[1, 2], [3, 4]]);
Array.from(myMap);                     // [1, 2, 3, 4]
Array.from("JavaScript");              // [J,a,v,a,S,c,r,i,p,t]

Array.of()

• 인수의 수나 타입에 상관없이 인수로 전달받은 값을 가지고 새로운 Array 인스턴스를 생성
• 이때 Array.of() 메서드와 Array 객체 생성자와의 차이로는 정수로 전달된 인수의 처리 방식에 있음
• 아래에서 Array 객체 생성자에 인수로 정수 10을 전달하면, 생성자는 길이가 10인 빈 배열 생성
• 하지만 Array.of() 메서드에 인수로 정수 10을 전달하면, 정수 10을 배열 요소로 가지는 길이가 1인 배열 생성
• Array.of() 메서드는 익스플로러, 오페라, 사파리에서 지원 X

new Array(10); // [,,,,,,,,,] -> 10개의 배열 요소를 가지는 빈 배열을 생성함.
Array.of(10);  // [10] -> 한 개(숫자 10)의 배열 요소를 가지는 배열을 생성함.

Array 메서드

Array.prototype 메서드

• 모든 Array 인스턴스는 Array.prototype으로부터 메서드와 프로퍼티를 상속
• 원본 배열을 변경하는 메서드
• 원본 배열은 변경하지 않고 참조만 하는 메서드
• 원본 배열을 반복적으로 참조하는 메서드

push()

• 하나 이상의 요소를 배열의 가장 마지막에 추가
• 원본 배열은 추가한 요소의 수만큼 길이(length)가 늘어나게 되며, 요소를 성공적으로 추가하면 배열의 총길이를 반환

var arr = [1, true, "JavaScript"];
arr.length;               // 3
arr.push("자바스크립트");
arr.length;               // 4
arr;                      // [1,true,JavaScript,자바스크립트]
arr.push(2, "거짓");
arr.length;               // 6
arr;                      // [1,true,JavaScript,자바스크립트,2,거짓]

pop()

• 배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환
• pop() 메서드를 실행할 때마다 배열의 길이는 1씩 줄어듦

var arr = [1, true, "JavaScript", "자바스크립트"];
arr.length;  // 4
arr.pop();   // 자바스크립트
arr.length;  // 3
arr.pop();   // JavaScript
arr.length; // 2
arr;         // [1,true]

shift()

• pop() 메서드와는 달리 배열의 가장 마지막 요소가 아닌 첫 요소를 제거하고, 그 제거된 요소를 반환
• 따라서 shift() 메서드도 실행할 때마다 배열의 길이가 1씩 줄어듦

var arr = [1, true, "JavaScript", "자바스크립트"];
arr.length;  // 4
arr.shift(); // 1
arr.length;  // 3
arr.shift(); // true
arr.length;  // 2
arr;         // [JavaScript,자바스크립트]

unshift()

• 하나 이상의 요소를 배열의 가장 앞에 추가
• 원본 배열은 추가한 요소의 수만큼 길이(length)가 늘어나게 되며, 요소를 성공적으로 추가하면 배열의 총 길이를 반환

var arr = [1, true, "JavaScript"];
arr.length;                  // 3
arr.unshift("자바스크립트");
arr.length;                  // 4
arr;                         // [자바스크립트,1,true,JavaScript]
arr.unshift(2, "거짓");
arr.length;                  // 6
arr;                         // [2,거짓,자바스크립트,1,true,JavaScript]

• pop()과 push() 메서드를 사용하면 배열을 스택(stack)이라는 데이터 구조처럼 사용할 수 있으며(LIFO),
• shift()와 push() 메서드를 사용하면 배열을 큐(queue)라는 데이터 구조처럼 사용 가능(FIFO)

reverse()

• 배열 요소의 순서를 전부 반대로 교체
• 즉, 가장 앞에 있던 요소가 가장 뒤에 위치하며, 가장 뒤에 있던 요소는 가장 앞에 위치!

var arr = [1, true, "JavaScript", "자바스크립트"];
arr.reverse(); // [자바스크립트,JavaScript,true,1]]

sort()

• 해당 배열의 배열 요소들을 알파벳 순서에 따라 정렬
• 이 메서드는 배열 요소를 모두 문자열로 보고 정렬하므로, 숫자나 불리언과 같은 타입의 요소들은 잘못 정렬 될 수도 있음.

var strArr = ["로마", "나라", "감자", "다람쥐"]; // 한글은 ㄱ,ㄴ,ㄷ순으로 정렬됨.
var numArr = [10, 21, 1, 2, 3];                  // 숫자는 각 자릿수 별로 비교된 후 정렬됨.
strArr.sort(); // [감자,나라,다람쥐,로마]
numArr.sort(); // [1,10,2,21,3]

splice()

• 기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경
• 첫 번째 인수는 새로운 요소가 삽입될 위치의 인덱스, 두 번째 인수는 제거할 요소의 개수
• 그 이후의 인수들은 모두 배열 요소로서 지정된 인덱스부터 차례대로 삽입
• 이 메서드는 배열에서 제거된 요소를 배열의 형태로 반환하며, 아무 요소도 제거되지 않았으면 빈 배열을 반환

var arr = [1, true, "JavaScript", "자바스크립트"];
// 인덱스 1의 요소부터 2개의 요소를 제거한 후, false와 "C언어"를 그 자리에 삽입함.
var removedElement = arr.splice(1, 2, false, "C언어");
arr;            // [1,false,C언어,자바스크립트]
removedElement; // [true,JavaScript]

 

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

join()

• 배열의 모든 요소를 문자열로 반환
• 인수로 전달받은 문자열은 배열 요소 사이를 구분 짓는 구분자로 사용
• 만약 인수를 전달받지 않으면 기본값으로 쉼표(,)를 구분자로 사용

var arr = [1, true, "JavaScript"];

arr.join();      // 1,true,JavaScript
arr.join(' + '); // 1 + true + JavaScript
arr.join(' ');   // 1 true JavaScript
arr.join('');    // 1trueJavaScript

slice()

• 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 추출하여 새로운 배열을 반환
• 인수로 종료 인덱스가 전달되지 않으면 마지막 배열 요소까지 모두 추출

var arr = [1, true, "JavaScript", "자바스크립트"];
arr.slice(1, 3); // [true,JavaScript]
arr.slice(1);    // [true,JavaScript,자바스크립트 ]

concat() : 해당 배열의 뒤에 인수로 전달받은 배열을 합쳐서 만든 새로운 배열을 반환

var 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() : 해당 배열의 모든 요소를 문자열로 반환, 이때 배열 요소 사이에는 자동으로 쉼표(,)가 삽입

var arr = [1, true, "JavaScript"];
arr.toString(); // '1,true,JavaScript'

기타 메서드

• toLocaleString() : 해당 배열의 모든 요소를 문자열로 반환
• indexOf() : 전달받은 값과 동일한 배열 요소가 처음으로 등장하는 위치의 인덱스를 반환
• lastIndexOf() : 전달받은 값과 동일한 배열 요소가 마지막으로 등장하는 위치의 인덱스를 반환

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

forEach() : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행

var arr = [1, true, "JavaScript"];

function printArr(value, index, array) {
    document.write("arr[" + index + "] = " + value + "<br>");
}

arr.forEach(printArr); // 배열 arr의 각 요소마다 printArr() 함수가 호출됨.

map() : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 실행 결과를 새로운 배열에 담아 반환

var arr = [1, -2, 3, -4];

// 배열 arr의 각 요소마다 Math.abs() 함수가 호출되고 그 결괏값이 배열로 저장됨.
var absoluteValues = arr.map(Math.abs);
absoluteValues; // [1,2,3,4]

filter() : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 true인 요소들만을 새로운 배열에 담아 반환

var arr = [-10, 5, 100, -20, 40];
function compareValue(value) {
    return value < 10;
}

var lessTen = arr.filter(compareValue);
lessTen; // [-10,5,-20]

every() : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 모두 true일 때에만 true를 반환

var arr = [-10, 5, -20, 4];

function compareValue(value) {
    return value < 10; // 배열의 모든 요소가 10보다 작음.
}
arr.every(compareValue); // true

some() : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 하나라도 true이면 true를 반환

var arr = [10, 25, -20, 14];

function compareValue(value) {
    return value < 10; // 배열 요소 중 -20만이 10보다 작음.
}
arr.some(compareValue); // true

reduce()

• 해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행
• 이때 명시된 콜백 함수에 배열의 첫 번째 요소와 두 번째 요소를 인수로 전달하고 실행
• 그 결과 반환된 결괏값과 세 번째 요소를 다시 인수로 전달하고 실행
• 이러한 동작을 반복하여 모든 배열 요소를 인수로 전달하고, 마지막으로 반환된 결괏값을 반환

var arr = [1, 2, 3, 4, 5];

function sumOfValues(x, y) {
    return x - y;
}
arr.reduce(sumOfValues); // 1 - 2 - 3 - 4 - 5 = -13

reduceRight() : reduce() 메서드와 같은 방식으로 실행되며, 배열의 마지막 요소부터 줄이기 시작

var arr = [1, 2, 3, 4, 5];

function sumOfValues(x, y) {
    return x - y;
}

arr.reduceRight(sumOfValues); // 5 - 4 - 3 - 2 - 1 = -5

entries()

• 배열 요소별로 키(key)와 값(value)의 한 쌍으로 이루어진 새로운 배열 반복자 객체(Array Iterator Object)를 배열 형태로 반환
• 이때 키에는 인덱스가 저장되며, 값에는 배열 요소의 값이 저장

var arr = [1, true, "JavaScript"];
var arrEntries = arr.entries();

for (var entry of arrEntries) {
    document.write(entry + "<br>"); // 배열의 인덱스별로 키(key)와 값(value)의 한 쌍을 출력함.
}

기타 메서드

• keys() : 배열 요소별로 키(key)만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환
• values() : 배열 요소별로 값(value)만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환
• find() : 검사를 위해 전달받은 함수를 충족하는 배열 요소의 값을 반환, 충족하는 값이 없으면 undefined를 반환
• findIndex() : 검사를 위해 전달받은 함수를 충족하는 배열 요소의 인덱스를 반환, 충족하는 값이 없으면 -1을 반환

Reference

https://www.tcpschool.com/javascript/js_standard_array

코딩교육 티씨피스쿨