[JS] Array

2024-02-08 14 분 소요

Array 객체는 배열 객체이다.

인스턴스 생성

Array() 객체의 인스턴스 생성 시, 초기값이 없는 경우와 있는 경우로 나눠서 생각해볼 수 있다.

초기값이 없는 경우, 빈 괄호만 남겨 배열의 크기를 지정하지 않는 경우도 있고, 아니면 원하는 배열의 크기를 숫자로 빈 괄호 안에 대입하여 배열 크기를 지정할 수도 있다.

let arr = new Array(4); // 배열 크기가 4.
let arr2 = new Array();  // 배열 크기가 정해지지 않음.

위 두 변수를 출력해보면 다음의 결과를 얻는다.

let arr = new Array(4);
let arr2 = new Array();
console.log(arr);
console.log(arr2);

[ <4 empty items> ]
[]

배열 크기를 지정한 경우, 배열 크기만큼의 빈 요소가 배열 내에 존재한다. 즉, 배열 크기만 알려줬을 뿐, 배열 요소의 값을 초기화하지 않았으므로, undefined로 할당되어 있다.

let arr = new Array(4);
console.log(arr);
console.log(arr[0], arr[1]);
arr[0] = 111;
arr[1] = 123;
console.log(arr);

[ <4 empty items> ]
undefined undefined
[ 111, 123, <2 empty items> ]

인덱싱을 통해 배열 내 특정 요소에 접근해보면 undefined라 나온다. 이러한 빈 배열 요소에 값을 할당하고자 한다면 위 예제에서처럼 arr[0] = 111;와 같이 인덱싱을 통해 해당 배열 요소에 값을 할당하면 되겠다.

초기값이 있는 경우, Array() 괄호 안에 원하는 배열 요소들을 입력하면 된다.

let arr = Array(1, 2, 3, 4);
let arr2 = [1, 2, 3, 4];

console.log(typeof arr === typeof arr2);

true

Array() 인스턴스로 배열을 생성하나, 대괄호([])를 이용하여 직접 배열을 생성하나 똑같다.

properties

length

현재 Array() 인스턴스에서, 배열 내 크기를 알려준다.

Methods

concat()

두 배열을 합쳐 새로운 배열을 반환하는 메서드. 새로운 배열을 반환하는 방식이기에 기존 두 배열에 변화는 없다. 두 배열 중 어떤 배열을 기준으로 concat() 메서드를 호출하고, 해당 메서드 인자로 어떤 배열을 넣느냐에 따라 합쳐지는 순서가 달라진다. 이에 대한 자세한 사항은 다음 예제 참조.

let arr1 = new Array(1, 2, 3, 4);
let arr2 = new Array(5, 6, 7, 8);

let arr12 = arr1.concat(arr2);
let arr21 = arr2.concat(arr1);

// 배열 합성 순서에 따라 합성된 배열 요소 순서도 달라진다. 
console.log(arr12);
console.log(arr21);

// 원본 배열에는 변화가 없다.
console.log(arr1);
console.log(arr2);

[
  1, 2, 3, 4,
  5, 6, 7, 8
]
[
  5, 6, 7, 8,
  1, 2, 3, 4
]
[ 1, 2, 3, 4 ]
[ 5, 6, 7, 8 ]

join()

배열 요소를 특정 구분자와 함께 연결한 문자열을 반환한다. 괄호 안에 아무것도 대입하지 않으면 쉼표(,)가 구분자로 지정된다.

let arr1 = new Array(1, 2, 3, 4);
let arr2 = new Array(5, 6, 7, 8);

let string1 = arr1.join();
let string2 = arr2.join('-');

console.log(string1);
console.log(string2);
console.log(typeof string1, typeof string2);

console.log(arr1);
console.log(arr2);

1,2,3,4
5-6-7-8
string string
[ 1, 2, 3, 4 ]
[ 5, 6, 7, 8 ]

만약 아무런 구분자도 삽입하지 않고 배열 요소들이 바로 붙은 상태의 문자열을 원한다면, 공백없이 .join(’’); 와 같이 따옴표만 입력하면 된다.

let arr1 = new Array(1, 2, 3, 4);
let arr2 = new Array(5, 6, 7, 8);

let string1 = arr1.join('');

console.log(string1);

push(), unshift()

배열에 새 요소를 삽입한다. push()는 배열의 맨 오른쪽에, unshift는 배열의 맨 왼쪽에 새 요소를 삽입한다. 해당 메서드들은 기존 배열에 새 요소를 삽입한 결과물을 복사하여 새로운 배열을 반환하는 것이 아니라 기존 배열 자체를 수정하는 방식이다.

let arr = new Array(1, 2, 3, 4);

arr.push(5);
console.log(arr, arr.length);

arr.unshift(0);
console.log(arr, arr.length);

[ 1, 2, 3, 4, 5 ] 5
[ 0, 1, 2, 3, 4, 5 ] 6

pop(), shift()

해당 메서드들은 배열에서 각각 맨 끝에 있는 요소를 제거하고, 제거한 요소를 반환한다. pop()은 배열의 끝 부분(맨 오른쪽)에서, shift()는 배열의 시작 부분(맨 왼쪽)에서 요소 하나를 꺼내고, 그 요소를 반환한다.

let arr = new Array(1, 2, 3, 4);

let rightPop = arr.pop();
console.log(rightPop);
console.log(arr, arr.length);

let leftPop = arr.shift();
console.log(leftPop);
console.log(arr, arr.length);

4
[ 1, 2, 3 ] 3
1
[ 2, 3 ] 2

splice()

해당 메서드는 배열의 양쪽 끝이 아닌 중간 부분에 위치한 요소들 중 원하는 요소들을 여러 개 삭제하거나 삽입할 수 있는 메서드이다. 삭제와 추가가 가능한 메서드로, 삭제, 추가를 동시에 실행하여 배열 요소를 수정할 수도 있다.

splice(작업할 인덱스값, 삭제 요소 개수, 새로 삽입할 요소, …)로 구성되어 있다. 즉, 첫 번째 인자로는 작업할 인덱스값을, 두 번째 인자는 첫 번째 인자로 지정한 인덱스부터 삭제할 요소 개수를, 세 번째 인자부터는 새로 추가할 요소들을 입력하면 된다.

첫 번째 인자만 지정하는 경우, 해당 인덱스 위치로부터 배열의 맨 끝 부분까지를 삭제한다.

let arr = new Array(1, 2, 3, 4);
let removed = arr.splice(2);
console.log(arr, "/", removed);

[ 1, 2 ] / [ 3, 4 ]

splice() 메서드는 해당 메서드를 통해 삭제한 부분 배열을 반환하는 기능도 있음을 알 수 있다.

다음은 두 번째 인자까지만 입력한 예이다.

let arr = new Array(1, 2, 3, 4);
let removed = arr.splice(2, 1);
console.log(arr, "/", removed);

[ 1, 2, 4 ] / [ 3 ]

인덱스 2에 위치한 요소부터 1개의 요소를 삭제하란 뜻으로, 여기선 arr[2], 즉 요소 3만 삭제된다. 앞서 splice(2); 는 splice(2, 2); 와도 같다.

이번에는 인수가 3개 이상일 경우이다.

let arr = new Array(1, 2, 3, 4);
let removed = arr.splice(2, 1, 12, 11);
console.log(arr, "/", removed);

[ 1, 2, 12, 11, 4 ] / [ 3 ]

우선, 인덱스가 2인 요소로부터 1개인 요소를 삭제한다. 그 결과 요소 3만 삭제된다. 그리고 해당 위치(인덱스 2)에 요소 12, 11 이 두개를 삽입한다.

삭제는 하지 않고 배열 중간 위치에 새 요소를 삽입만 하고자 한다면 두 번째 인수를 0으로 설정하면 된다.

만약 splice의 결과가 원본 배열에 영향을 끼치지 않고, 새 배열 객체로 반환하게끔 하려면 Array 인스턴스의 toSpliced() 메서드를 사용하면 된다.

slice()

배열 내 연속적으로 위치한 특정 요소들을 따로 추출할 수 있는 메서드이다. 이 메서드를 실행하면 기존 배열은 수정되지 않는다.

해당 메서드에는 2개의 인수를 대입할 수 있으며, 두 번째 인수는 생략 가능하다. 첫 번째 인자는 배열 내에서 추출하고자 하는 요소들의 시작 인덱스값을 대입한다. 두 번째 인자는 추출하고자 하는 요소들의 마지막 인덱스값을 대입한다. 다만, 마지막 인덱스의 이전 인덱스까지만 범위에 해당한다. 이는 파이썬의 arr[3:5] 슬라이싱과 동일하다.

let arr = new Array('hi', 'nice', 'to', 'meet', 'you');
let sliced = arr.slice(2);
console.log(arr, '/', sliced);

[ 'hi', 'nice', 'to', 'meet', 'you' ] / [ 'to', 'meet', 'you' ]

slice(2)만 넣었더니 인덱스 2에 위치한 요소 ‘to’부터 마지막 요소 ‘you’까지가 추출되었음을 알 수 있다. 또한, 기존 배열에 수정이 가해지지 않았음도 알 수 있다.

let arr = new Array('hi', 'nice', 'to', 'meet', 'you');
let sliced = arr.slice(2, 4);
console.log(arr, '/', sliced);

[ 'hi', 'nice', 'to', 'meet', 'you' ] / [ 'to', 'meet' ]

위 예제에서는 slice(2, 4)로 지정하였다. 그 결과, 인덱스 2에 위치한 요소 ‘to’부터 인덱스 3에 위치한 요소 ‘meet’까지만 추출된다.

해당 메서드는 파이썬의 슬라이싱 (arr[:])과 같은 점이 많다.

슬라이싱을 하더라도 기존 배열에 변함이 없다.
마지막 인덱스 값을 지정하지 않으면 배열의 끝까지 추출한다.
마지막 인덱스 값을 지정하는 경우, 마지막 인덱스의 이전 인덱스까지만 추출한다.

every()

function isEven(n) {
    if (n % 2 == 0) {
        return true;
    }
    return false;
}

let arr = [0, 2, 4, 6, 8, 10];
let arr2 = [0, 2, 4, 6, 1];
console.log(arr.every(isEven));
console.log(arr.every(n => !Boolean(n % 2)));
console.log(arr2.every(isEven));

true
true
false

해당 메서드 인자에 함수명을 기입한다. 그러면 해당 배열 내 모든 요소들을 해당 함수에 넣어 실행했을 때 그 결과값이 모두 true라면 true를 반환하고, 하나라도 false면 false를 반환하는 메서드이다. every() 메서드 인자로 대입하는 함수명을 콜백 함수 (callback function)라 한다.

콜백 함수 내에서 해당 배열의 요소값을 변경하면 원본 배열에도 영향이 간다.

let arr1 = [2, 4, 6, 8, 10];
let arr2 = [2, 4, 6, 7, 8, 9, 12];

function isEvenAndModify(n, idx, array) {
    let result;
    
    if (n % 2 == 0) {
        result = true;
        array[idx] = 'O';
    } else {
        result = false;
        array[idx] = 'X';
    }
    return result;
}

let result1 = arr1.every(isEvenAndModify);
let result2 = arr2.every(isEvenAndModify);
console.log(result1, arr1);
console.log(result2, arr2);

true [ 'O', 'O', 'O', 'O', 'O' ]
false [
  'O', 'O', 'O', 'X',
  8,   9,   12
]

위 예제에서 알 수 있는 또 다른 사실은, 배열 중간에 콜백 함수를 실행했을 때 false 결과값을 내는 요소를 만나면 그 이후의 요소들에 대해선 콜백 함수를 실행하지 않고 바로 false를 반환한다는 것이다.

filter()

let arr1 = [2, 4, 6, 8, 10];
let arr2 = [2, 4, 6, 7, 8, 9, 12];

function isEvenAndModify(n, idx, array) {
    let result;
    
    if (n % 2 == 0) {
        result = true;
        array[idx] = 'O';
    } else {
        result = false;
        array[idx] = 'X';
    }
    return result;
}

let result1 = arr1.filter(isEvenAndModify);
let result2 = arr2.filter(isEvenAndModify);
console.log(result1, arr1);
console.log(result2, arr2);

[ 2, 4, 6, 8, 10 ] [ 'O', 'O', 'O', 'O', 'O' ]
[ 2, 4, 6, 8, 12 ] [
  'O', 'O', 'O',
  'X', 'O', 'X',
  'O'
]

해당 메서드 인자에 콜백 함수를 대입하면, 배열 요소들을 순회하면서 콜백 함수에 대입하여 실행했을 때 true를 반환하게 하는 요소들만 모아 반환하는 메서드이다. 또한 콜백함수에서 원본 배열 요소에 접근하여 그 값을 바꿀 수도 있다. every() 메서드와 달리, filter() 메서드는 콜백 함수가 false를 반환하게 하는 요소를 만나도 그 이후의 요소들도 모두 실행한다.

순회 메서드

앞서 every(), filter()와 같은 메서드들은 공통적으로 배열 내 요소들을 순회하면서 콜백 함수를 실행하는 방식이었다. 이러한 방식의 메서드를 순회 메서드(iteration method)라 한다. (콜백 함수를 인자로 받는다고 해서 무조건 순회 메서드인 것은 아니다. 당연히 배열을 순회하면서 콜백 함수를 호출해야 순회 메서드인 것이다.)

순회 메서드 인자로 입력되는 콜백 함수는 다음의 인자들을 차례대로 입력받는다.

element : 배열 내 처리 중인 요소
index : 배열 내 처리 중인 요소의 인덱스.
array : 순회 메서드를 호출하는 배열.

물론, 사용자가 이 세 인자들을 명시적으로 무조건 입력해야 하는 건 아니다. 앞서 every() 메서드 챕터의 예제 8-1에선 every() 메서드에 입력된 화살표 함수의 매개변수를 하나만 지정한 것을 알 수 있다.

IndexOf()

해당 메서드에 배열 요소 하나를 입력하면 배열 내에서 해당 요소를 검색하여 그 요소의 인덱스 값을 반환한다. 만약 해당 요소가 두 개 이상 중복되어 존재할 경우, 가장 왼쪽에 있는 요소의 인덱스값을 반환한다. 두 번째 값으로 선택적으로 인덱스 값을 입력할 수 있는데, 이 경우, 해당 인덱스부터 오른쪽 범위의 요소들만 검색한다. 만약 검색된 요소가 없다면 -1을 반환한다.

let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'd'];
console.log(arr.indexOf('b'));  // 1
console.log(arr.indexOf('d'));  // 3
console.log(arr.indexOf('z'));  // -1
console.log(arr.indexOf('d', 4));  // 6
/*
if fromIndex < 0, fromIndex -> fromIndex + array.length
아래 예) fromIndex = -2 -> fromIndex = -2 + 7 = 5;
즉, 인덱스 5부터 오른쪽으로 순회하여 해당 요소를 찾는다. 
*/
console.log(arr.indexOf('d', -2));  // 6

/*
if fromIndex < 0 and fromIndex < -array.length, fromIndex -> 0
즉, fromIndex로 지정된 인덱스 값이 음수이면서 해당 배열의 길이의 음수값보다 
더 작을 경우 인덱스 0부터 검색한다. 이는 fromIndex를 지정하지 않은 것과 
같은 효과다. 
*/
console.log(arr.indexOf('a', -9));  // 0

console.log(arr.indexOf('a', -2));  // -1

map()

순회 메서드로, 배열 내 각 요소들을 순회하면서 콜백 함수를 실행한 결과를 배열로 반환한다.

let arr = ['hi', 'nice', 'to', 'meet', 'you'];
let mapResult = arr.map(
    (ele, idx) => ele += " (" + (idx+1).toString() + ")"
);
console.log(mapResult);

[ 'hi (1)', 'nice (2)', 'to (3)', 'meet (4)', 'you (5)' ]

map() 메서드 호출이 시작된 이후 추가된 요소들은 콜백 함수가 호출되지 않는다.

reverse()

주어진 배열의 순서를 거꾸로 한다. 거꾸로 된 결과값을 반환할 뿐만 아니라, 원본 배열의 순서도 뒤집는다.

let arr = [1, 2, 3, 4, 5];
let rarr = arr.reverse();

console.log(arr);
console.log(rarr);

[ 5, 4, 3, 2, 1 ]
[ 5, 4, 3, 2, 1 ]

만약 배열의 순서를 거꾸로 했을 때 원본 배열은 수정되지 않고 새 배열 객체만 반환되도록 하고자 한다면 Array 인스턴스의 toReversed() 메서드를 사용한다.

some()

순회 메서드로, 배열 요소 중에 단 하나라도 콜백 함수 실행 시 그 결과값이 true라면 true를, 그렇지 않으면 false를 반환한다. every() 메서드가 모든 배열 요소들의 콜백 함수 실행 결과가 true여야 true를 반환했던 점과 비교된다. every()가 “and”라면 some()은 “or”이다.

let arr1 = [2, 4, 6, 8, 10];
let arr2 = [2, 4, 6, 9, 10];
let arr3 = [1, 3, 5, 7, 10];
let arr4 = [1, 3, 5, 7, 9];

const isEven = n => n % 2 === 0;
console.log(arr1.some(isEven));
console.log(arr2.some(isEven));
console.log(arr3.some(isEven));
console.log(arr4.some(isEven));

true
true
true
false

sort()

배열 요소들을 특정 기준에 따라 정렬한 후 그 결과를 반환한다. 뿐만 아니라 원본 배열에도 정렬 결과가 반영되어 수정된다.

해당 메서드의 인자로 정렬 기준이 되는 함수명을 넣으면 해당 함수를 기준으로 정렬된다.

해당 메서드 인자로 아무것도 넣지 않을 경우, 배열 내 모든 요소들을 문자열로 만든 후, 유니코드 코드 숫자 순으로 정렬한다. 예를 들어 [1, 12, 5]인 경우, [’1’, ‘12’, ‘5’]로 변환한 뒤, 앞의 두 숫자의 맨 앞자리 수가 모두 ‘1’로, ‘5’보다 유니코드 코드가 더 앞서므로, ‘12’가 ‘5’보다 더 앞에 온다.

let arr = [1, 5, 12, 3, 8];

console.log(arr.sort());
console.log(arr.sort((a, b) => a - b));
console.log(arr.sort((a, b) => b - a));

console.log(arr);

[ 1, 12, 3, 5, 8 ]
[ 1, 3, 5, 8, 12 ]
[ 12, 8, 5, 3, 1 ]
[ 12, 8, 5, 3, 1 ]

sort() 메서드 내 정렬 함수를 인자로 대입하는 경우, 해당 정렬 함수의 매개변수로 a, b가 들어간다면 두 요소 a, b를 비교하겠다는 뜻이다. 그리고 해당 정렬 함수의 결과값이 0보다 작은 경우, [a, b] 식으로 a가 먼저 오도록 정렬된다. 0보다 큰 경우, [b, a]와 같이 b를 앞으로 정렬한다. 만약 정렬 함수의 결과가 0이면 두 요소에 대해 어떠한 작업도 하지 않는다.

즉, 정리하자면, sort() 메서드에 들어갈 정렬 함수를 cf()라 하고, 비교 요소가 들어갈 매개변수 a, b를 cf(a, b)와 같이 대입한다고 가정한다면…

cf(a, b) < 0이면 [a, b] 순서로 정렬.
cf(a, b) > 0이면 [b, a] 순서로 정렬.
cf(a, b) = 0이면 두 요소에 대해 정렬 작업을 수행하지 않고 그대로 둔다.
cf(a, b)에 대해, (a, b) 쌍이 정렬 함수에 대입되었을 때 그 결과값이 항상 일정해야 한다. 만약 그렇지 않다면 정렬 순서가 정의되지 않는다.

다음은 위 사실을 이용하여 정렬 함수를 정의하여 이를 sort() 메서드에 적용하여 특정 기준으로 정렬하는 예제이다.

let arr = [
    ['고양이', 1], ['개', 2], ['고슴도치', 3], 
    ['거북이', 4], ['기린', 5],
]

function sortByName(a, b) {
    if (a[0] < b[0]) {
        return -1;
    } else if (a[0] > b[0]) {
        return 1;
    } else {
        return 0;
    }
}

function sortByNum(a, b) {
    if (a[1] < b[1]) {
        return -1;
    } else if (a[1] > b[1]) {
        return 1;
    } else {
        return 0;
    }
}

console.log(arr.sort(sortByName));
console.log(arr.sort(sortByNum));

[ [ '개', 2 ], [ '거북이', 4 ], [ '고슴도치', 3 ], [ '고양이', 1 ], [ '기린', 5 ] ]
[ [ '고양이', 1 ], [ '개', 2 ], [ '고슴도치', 3 ], [ '거북이', 4 ], [ '기린', 5 ] ]

만약 정렬한 결과가 원본 배열에 영향을 끼치지 않게 하려면 Array() 객체의 toSorted() 메서드를 사용하면 된다.

entries()

배열 요소와 그 요소의 인덱스 값을 [인덱스, 요소] 형태의 새 배열 iterator(반복자) 로 반환한다. 파이썬의 enumerate()와 같다.

iterator로 반환되므로, 보통 for문으로 순회하여 사용한다.

let arr = ['hi', 'nice', 'to', 'meet', 'you'];

for (const [idx, element] of arr.entries()) {
    console.log(idx, element);
}

console.log('------');

for (const element of arr.entries()) {
    console.log(element);
}

console.log('-------');
console.log(arr);  // 원본 배열에는 변경 없음.

0 hi
1 nice
2 to
3 meet
4 you
------
[ 0, 'hi' ]
[ 1, 'nice' ]
[ 2, 'to' ]
[ 3, 'meet' ]
[ 4, 'you' ]
-------
[ 'hi', 'nice', 'to', 'meet', 'you' ]

fill()

배열 범위 내 모든 요소들을 fill() 메서드의 첫 번째 인자로 대입되는 요소로 바꾼다. 원본 배열도 그에 따라 변경된다.

두 번째 인자부터 아무런 인자를 대입하지 않으면 원본 배열의 길이만큼 첫 번째 인자로 채운다.

두 번째 인자는 첫 번째 인자로 채울 배열 내 시작 인덱스값이다. 세 번째 인자는 첫 번째 인자로 채울 배열 내 마지막 인덱스값으로, 마지막 인덱스의 이전 인덱스까지가 범위에 해당한다. 세 번째 인자를 생략할 경우, 배열의 마지막 위치까지 첫 번째 인자로 채운다.

let arr = ['hi', 'nice', 'to', 'meet', 'you'];
let copiedArr = [...arr];
console.log([...arr].fill('!!!', 2, 4));
console.log([...arr].fill('!!!'));
console.log(copiedArr.fill('!!!', 1));
console.log(arr);
console.log(copiedArr);

[ 'hi', 'nice', '!!!', '!!!', 'you' ]
[ '!!!', '!!!', '!!!', '!!!', '!!!' ]
[ 'hi', '!!!', '!!!', '!!!', '!!!' ]
[ 'hi', 'nice', 'to', 'meet', 'you' ]
[ 'hi', '!!!', '!!!', '!!!', '!!!' ]

find()

순환 메서드로, 콜백 함수가 true를 반환할 때까지 배열 요소들을 순회하면서 콜백 함수를 실행하며, 콜백 함수가 true를 처음으로 반환하는 배열 요소를 반환한다.

다음은 주어진 배열 내에서 최초로 소수인 요소를 찾고 이를 출력하는 예제 코드이다.

function isPrimeNum(n, idx, array) {
    let rootN = Math.floor(Math.sqrt(n));
    for(let i = 2; i <= rootN; i++) {
        array[idx] = '!';
        if (n % i == 0) {
            return false;
        }
    }
    return true;
}

let arr1 = [4, 6, 7, 8, 9];
let result = arr1.find(isPrimeNum);
console.log(result);
console.log(arr1);

7
[ '!', '!', '!', 8, 9 ]

만약 배열 요소 자체가 아니라 그 요소의 인덱스 값을 얻고자 한다면 findIndex() 메서드를 사용해야 한다.

from()

배열 객체가 아닌 순회 가능 또는 유사 배열(length 속성과 인덱싱된 요소가 있는 객체) 객체를 얕은 복사하여 새 Array 인스턴스로 생성하여 반환한다. 즉, 배열이 아니지만 배열로 변환될 수 있는 객체를 배열 객체로 변환한다.

let strNumArr = Array.from('123');
console.log(strNumArr);

let numArr = Array.from('123', n => parseInt(n));
console.log(numArr);

[ '1', '2', '3' ]
[ 1, 2, 3 ]

from() 메서드의 첫 번째 인자로 배열 객체로 변환할 객체를 입력한다. 두 번째 인자는 선택으로, 배열의 모든 요소에 대해 호출할 함수명을 입력한다. 그러면, 해당 함수를 호출한 그 결과값이 대신 배열에 들어간다.

두 번째 인수로 함수명을 입력할 경우, 해당 함수의 매개변수는 첫 번째 인자부터 차례대로 다음으로 설정된다.

element : 현재 콜백 함수에 의해 처리될 배열 요소.
index : element 요소의 인덱스

includes()

해당 메서드의 인자로 대입된 요소가 해당 배열 내에 존재하는지 확인하는 메서드로, 존재하면 true, 존재하지 않으면 false를 반환한다. 파이썬의 in 키워드와 같다.

let arr = [1, 4, 2, 'wow', 'hi', 12];
console.log(arr.includes(2));
console.log(arr.includes('hi'));
console.log(arr.includes('z'));

true
true
false

keys(), values()

해당 메서드들은 가각 entries() 메서드의 첫 번째 인자, 두 번째 인자들만 모은 새 배열 iterator를 반환한다.

let arr = ['hi', 'nice', 'to', 'meet', 'you'];
const arrIndexes = arr.keys();
const arrElements = arr.values();

for(const k of arrIndexes) {
    console.log(k);
}

console.log('========');

for(const v of arrElements) {
    console.log(v);
}

0
1
2
3
4
========
hi
nice
to
meet
you

forEach()

순회 메서드로, 인자에 주어진 콜백함수에 대해, 모든 배열 요소들이 한 번씩 콜백 함수에 인자로 전달되어 실행된다.

다음은 주어진 배열을 그 인덱스와 함께 출력하는 예제로, for문 사용과 그 결과가 일치함을 볼 수 있다.

let arr = ['hi', 'nice', 'to', 'meet', 'you'];
let result = arr.forEach((element, idx) => console.log(idx, element));
console.log('the result: ', result);
console.log('------');
for(let i = 0; i < arr.length; i++) {
    console.log(i, arr[i]);
}

hi
nice
to
meet
you
the result:  undefined
------
hi
nice
to
meet
you

forEach() 메서드의 반환값은 항상 undefined이다. 즉, 콜백 함수의 반환값을 반환하지 않는다.

References

[1] 고경희 - “Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석”, (이지스퍼블리싱, 2022)

[2] Array - JavaScript | MDN

This content is licensed under CC BY-NC 4.0

JeroCaller