코린이[코딩 어린이]

flat() 메서드

flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다.

구문

const newArr = arr.flat([depth]);

매개변수

• depth: 중첩 배열 구조를 평탄화할 때 사용할 깊이 값입니다. [ 기본값 = 1 ]

반환 값

하위 배열을 이어붙인 새로운 배열입니다.

예제

중첩 배열 평탄화

const arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

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

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

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

배열 구멍 제거 ( flat() 메서드는 배열의 빈 공간도 제거해줍니다. )

const arr5 = [1, 2, , 4, 5];
arr5.flat(); // [1, 2, 4, 5]

findLastIndex() 메서드

findLastIndex() 메서드는 배열을 역순으로 반복하고 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환합니다.

만족하는 요소가 없으면 -1을 반환합니다.

구문

// Arrow function
findLastIndex((element) => { /* … */ })
findLastIndex((element, index) => { /* … */ })
findLastIndex((element, index, array) => { /* … */ })

// Callback function
findLastIndex(callbackFn)
findLastIndex(callbackFn, thisArg)

// Inline callback function
findLastIndex(function (element) { /* … */ })
findLastIndex(function (element, index) { /* … */ })
findLastIndex(function (element, index, array) { /* … */ })
findLastIndex(function (element, index, array) { /* … */ }, thisArg)

매개변수

• callback: 3개의 인수를 취해 배열의 각 값에 대해 실행할 함수입니다.
• element: 배열에서 처리중인 현재 요소입니다.
• index: 배열에서 처리중인 현재 요소의 인덱스입니다.
• array: findLastIndex 함수가 호출된 배열입니다.
• thisArg: 선택사항. 콜백을 실행할 때 this로 사용할 객체입니다.

반환 값

테스트를 통과한 배열의 첫 번째 요소의 인덱스를 반환합니다. ( 뒤에서 )

일치하는 요소가 없으면 -1을 반환합니다.

예제

역 배열에서 첫 번째 소수의 인덱스 찾기

let arr = [4, 6, 8, 12];
let arr1 = [4, 5, 6, 7, 8, 9, 10, 11, 12, 15];

const isPrime = (ele) => {
  if (ele % 2 === 0 || ele < 2) return false;

  for (let i = 3; i <= Math.sqrt(ele); i += 2) {
    if (ele % i === 0) return false;
  }

  return true;
}

console.log(arr.findLastIndex(isPrime)); // -1
console.log(arr1.findLastIndex(isPrime)); // 7

findLast() 메서드

findLast() 메서드는 배열을 역순으로 반복하고 제공된 테스트 기능을 만족하는 첫 번째 요소의 값을 반환합니다.

만족하는 테스트 기능의 요소가 없으면 undefined가 반환됩니다.

구문

// Arrow function
findLast((element) => { /* … */ })
findLast((element, index) => { /* … */ })
findLast((element, index, array) => { /* … */ })

// Callback function
findLast(callbackFn)
findLast(callbackFn, thisArg)

// Inline callback function
findLast(function (element) { /* … */ })
findLast(function (element, index) { /* … */ })
findLast(function (element, index, array) { /* … */ })
findLast(function (element, index, array) { /* … */ }, thisArg)

매개변수

• callbackFn: 배열의 각 요소에 대해 실행할 함수입니다.
• element: 배열에서 처리 중인 현재 요소입니다.
• index: 배열에서 처리 중인 현재 요소의 인덱스입니다.
• array: findLast 함수가 호출된 배열입니다.
• thisArg: this를 실행할 때 사용할 값 callbackFn입니다.

반환 값

제공된 테스트 기능을 만족하는 첫 번째 요소의 값을 반환합니다. ( 뒤에서 )

일치하는 값이 없는 경우에는 undefined를 반환합니다.

예제

역 배열에서 2보다 작은 첫번째 quantity 찾기 

const arr = [
  { name: "사과", quantity: 2 },
  { name: "바나나", quantity: 9 },
  { name: "감", quantity: 0 },
  { name: "체리", quantity: 1 },
  { name: "파인애플", quantity: 5 },
];

const isNotEnough = (item) => {
  return item.quantity < 2;
}

console.log(arr.findLast(isNotEnough)); // {name: '체리', quantity: 1}

findIndex() 메서드

findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

구문

arr.findIndex(callback(element[, index[, array]])[, thisArg]);

매개변수

• callback: 3개의 인수를 취해 배열의 각 값에 대해 실행할 함수입니다.
• element: 배열에서 처리중인 현재 요소입니다.
• index: 배열에서 처리중인 현재 요소의 인덱스입니다.
• array: findIndex 함수가 호출된 배열입니다.
• thisArg: 선택사항. 콜백을 실행할 때 this로 사용할 객체입니다.

반환 값

요소가 테스트를 통과하면 배열의 인덱스를 반환합니다. 그렇지 않으면 -1을 반환합니다.

예제

배열에서 소수의 색인 찾기

let arr = [4, 6, 8, 12];
let arr1 = [4, 6, 7, 22];

const isPrime = (ele, index, array) => {
  let start = 2;
  while (start <= Math.sqrt(ele)) {
    if (ele % start++ < 1) {
      return false;
    }
  }
  return ele > 1;
}

console.log(arr.findIndex(isPrime)); // -1
console.log(arr1.findIndex(isPrime)); // 2

Math.sqrt() 함수 : 숫자의 제곱근을 반환합니다.

ex ) Math.sqrt(9); // 3

find() 메서드

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 만약 그런 요소가 없을 경우에는 undefined를 반환합니다.

구문

arr.find(callback[, thisArg]);

매개변수

• callback: 배열의 각 값에 대해 실행할 함수입니다. 아래 세 인자를 받습니다. 
• index: 콜백함수에서 처리할 현재 요소의 인덱스
• array: find 함수를 호출한 배열
• thisArg: 선택 항목. 콜백이 호출될 때 this로 사용할 객체

반환 값

주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. ( 그 외에는 undefined를 반환합니다. )

예제

10보다 큰 가장 첫 번째 요소 찾기

const arr = [5, 7, 1, 100, 130, 42];

const found = arr.find(el => el > 10);

console.log(found); // 100

속성 중 하나를 사용하여 배열에서 객체 찾기

const inventory = [
    { name: '사과', quantity: 2 },
    { name: '바나나', quantity: 0 },
    { name: '체리', quantity: 5 }
];

const result = inventory.find(fruit => fruit.name === '체리');

console.log(result) // { name: '체리', quantity: 5 }

filter() 메서드

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

구문

arr.filter(callback(element[, index[, array]])[, thisArg]);

매개변수

• callback: 각 요소를 시험할 함수입니다. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.
• element: 처리할 현재 요소
• index: 처리할 현재 요소의 인덱스
• array: filter를 호출한 배열
• thisArg: callback을 실행할 때 this로 사용하는 값

반환 값

테스트를 통과한 요소로 이루어진 새로운 배열을 반환합니다. 어떤 요소도 테스트를 통과하지 못하면 빈 배열을 반환합니다.

예제

작은 값 걸러내기 [ 10 이하인 모든 요소가 제거된 새로운 배열을 만들어줍니다. ]

function isBig(value) {
    return value >= 10;
}

let array = [1, 2, 5, 10, 100, 1000];
let filltered = array.filter(isBig);

console.log(filltered); // [10, 100, 1000]

배열 내용 검색 [ 배열 내용을 조건에 따라 검색한 새로운 배열을 만들어줍니다. ]

let array = ["사과", "바나나", "도토리", "포도", "도장", "망고", "오렌지", "사다리"];

function filterItems(query) {
    return array.filter(function(el) {
        return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
    });
}

console.log(filterItems("사")); // ['사과', '사다리']
console.log(filterItems("도")); // ['도토리', '포도', '도장']

.toLowerCase() 메서드는 대문자를 소문자로 변경시켜줍니다. ( 한글만 사용할때는 사용하지 않아도 됩니다. )

fill() 메서드

fill() 메서드는 배열의 시작 index부터 끝 index의 이전까지 정적인 값 하나로 채웁니다.

구문

arr.fill(value[, start[, end]]);

매개변수

• value: 배열을 채울 값
• start: 시작 index, 기본 값 = 0
• end: 끝 index, 기본 값은 this.length

반환 값

변형한 배열

예제

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

console.log(arr.fill(9)); // [9, 9, 9, 9, 9, 9, 9, 9, 9, 9];

arr의 모든 value를 9로 채워줍니다.

console.log(arr.fill(9, 1)); // [1, 9, 9, 9, 9, 9, 9, 9, 9, 9]

두번째 value부터 마지막 value까지 9로 채워줍니다.

console.log(arr.fill(0, 2, 4)); // [1, 2, 0, 0, 5, 6, 7, 8, 9, 0]

세번째 value부터 다섯번째 이전 value까지 0으로 채워줍니다.

console.log(arr.fill(9, 1, 2)); // [1, 9, 3, 4, 5, 6, 7, 8, 9, 0]

두번째 value부터 세번째 이전까지 9로 채워줍니다.

console.log(arr.fill(9, 3, 5)); // [1, 2, 3, 9, 9, 6, 7, 8, 9, 0]

네번째 value부터 여섯번째 이전까지 9로 채워줍니다.

console.log(arr.fill(9, -4, -3)); // [1, 2, 3, 4, 5, 6, 9, 8, 9, 0]

start와 end에 음수가 들어가면 뒤에서부터 계산됩니다.

뒤에서 네번째 value부터 뒤에서 3번째 이전까지 9로 채워줍니다.

console.log(Array(5).fill(4)); // [4, 4, 4, 4, 4]

const arr1 = Array(3).fill({}); // [{}, {}, {}]

3개의 객체를 생성합니다.

객체 참조

    const arr1 = Array(3).fill({});
    console.log(arr1); // [{hello: '안녕하세요.'}, {hello: '안녕하세요.'}, {hello: '안녕하세요.'}]
    console.log(arr1[0].hello = "안녕하세요."); // 안녕하세요.

    const arr1 = Array(3).fill({});
    console.log(arr1); // [{hello: '안녕하세요.', new: '바이바이.'}, {hello: '안녕하세요.', new: '바이바이.'}, {hello: '안녕하세요.', new: '바이바이.'}]
    console.log(arr1[0].hello = "안녕하세요."); // 안녕하세요.
    console.log(arr1[1].new = "바이바이."); // 바이바이.

every() 메서드

every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트 합니다.

모두 통과하면 True, 하나라도 통과하지 못하면 false를 return합니다.

Array.every(callbackFunc(currentValue, index, array), thisArg);

매개변수

• callbackFunc: 각 요소를 시험할 함수. 아래 세 가지 인수를 받습니다.
• index: 처리할 현재 요소의 인덱스
• array: every를 호출한 배열
• thisArg: callbackFunc을 실행할 때 this로 사용하는 값

반환 값

callbackFunc이 모든 배열 요소에 대해 참인 값을 반환하는 경우 true, 그 이외에는 false를 반환합니다.

const arr = [1, 10, 50, 49, 72, 11, 42];
const everyTest = (currentValue) => currentValue < 100;

console.log(arr.every(everyTest)); // true

every() 메서드로 검사를 하게되면 boolean값을 반환합니다. 배열에 100보다 큰 값이 없기 때문에 true를 반환합니다.

every()와 forEach 비교하기

const arr = [11, 1, 50, 49, 72, 11, 42];

arr.forEach((value) => {
  if (value > 10) {
    console.log(value, "크다");
    return true;
  } else {
    console.log(value, "작다");
    return false;
  }
});
/*
    11 '크다'
    1 '작다'
    50 '크다'
    49 '크다'
    72 '크다'
    11 '크다'
    42 '크다'
*/

arr.every((value) => {
  if (value > 10) {
    console.log(value, "크다");
    return true;
  } else {
    console.log(value, "작다");
    return false;
  }
})
/*
    11 '크다'
    1 '작다'
*/

forEach 반복문은 배열이 끝날때까지 반복을 하고, every() 메서드는 false를 반환하는 순간 멈추게 됩니다.

arr의 배열이 arr1, arr2 배열의 부분 집합인지 비교하기

const arr = [1, 2, 3, 4, 5, 6, 7];
const arr1 = [5, 7, 6];
const arr2 = [5, 8, 7];

const isSubset = (array1, array2) => array2.every((element) => array1.includes(element));
console.log(isSubset(arr, arr1)); // true
console.log(isSubset(arr, arr2)); // false

Array.prototype.every() 바로가기

entries() 메서드

entries() 메서드는 배열의 각 index에 대한 key / value 쌍을 가지는 새로운 Array Iterator객체를 반환합니다.

const arr = ["a", "b", "c", "d", "e", "f"];

console.log(Object.entries(arr));

/*
0: (2) ['0', 'a']
1: (2) ['1', 'b']
2: (2) ['2', 'c']
3: (2) ['3', 'd']
4: (2) ['4', 'e']
*/

entries() 메서드로 배열을 반환하게 되면 위처럼 키와 값을 한쌍을 가지는 객체를 반환해줍니다.

entries() 메서드는 [ [ key: value] , ...]처럼 반환되기 때문에 for...of, forEach등과 함께 사용하면 됩니다.

단 Object.entries()로 반환된 배열은 object가 정의된 순서와 상관이 없이 나오기 때문에 순서대로 사용할 경우에는 sort() 메서드를 함께 사용해 주어야합니다.

for...of와 함께 사용하기

index와 element 

const arr = ["a", "b", "c", "d", "e", "f"];

for(const [index, ele] of arr.entries()) {
  console.log(index, ele);
  /*
    0 'a'
    1 'b'
    2 'c'
    3 'd'
    4 'e'
    5 'f'
  */
}

for...of loop

const arr = ["a", "b", "c", "d", "e", "f"];

const arrEntries = arr.entries();

for(const ele of arrEntries) {
  console.log(ele);
  /*
    [0, 'a']
    [1, 'b']
    [2, 'c']
    [3, 'd']
    [4, 'e']
    [5, 'f']
  */
}

sparse arrays

for (const element of [, "a"].entries()) {
  console.log(element);
}
/*
    [0, undefined]
    [1, 'a']
*/

sparse arrays와 함께 사용하면 entries() 메서드가 빈 슬롯을 undefined가 있는 것처럼 순회합니다.

+ object.keys와 object.values

const arr = ["a", "b", "c", "d", "e", "f"];

console.log(Object.keys(arr)); // ['0', '1', '2', '3', '4', '5']

key만 받아오고 싶을 때

const arr = ["a", "b", "c", "d", "e", "f"];

console.log(Object.values(arr)); // ['a', 'b', 'c', 'd', 'e', 'f']

value만 받아오고 싶을 때

copyWithin() 메서드

copyWithin() 메서드는 배열의 일부를 얕게 복사한 뒤, 동일한 배열의 다른 위치에 덮어쓰고 그 배열을 반환합니다.

이 때, 크기( 배열의 길이 )를 수정하지 않고 반환합니다.

arr.copyWithin(target[, start,[, end]]);

매개변수

• target : 복사한 값을 넣을 위치를 가리키는 index. 음수를 지정하면 index를 배열의 뒤에서부터 계산합니다.
  target이 arr.length보다 크거나 같으면 아무것도 복사하지 않습니다. target이 start 이후라면 복사한 값을 arr.length에 맞춰서 잘라줍니다.
• start : 복사를 시작할 위치를 가리키는 index. 음수를 지정하면 index를 배열의 뒤에서부터 계산합니다.
  기본값은 0으로, start를 지정하지 않으면 배열의 처음부터 복사를 시작합니다.
• end : 복사를 끝낼 위치를 가리키는 index. copyWithin은 end index 이전까지 복사하므로, end index가 가리키는 요소는 제외됩니다. 음수를 지정하면 index를 배열의 뒤에서부터 계산합니다.
  기본값은 arr.length로, end를 지정하지 않으면 배열의 끝까지 복사합니다.

const arr = ["안", "녕", "하", "세", "요"];

console.log(arr.copyWithin(2)); // ["안", "녕", "안", "녕", "하"]

2번째 요소부터 0 ~ n번의 요소를 복사합니다. ( 배열의 길이를 초과하는 부분은 무시가 됩니다. )

:: 안녕 + 안녕하세요 ( '세요' 부분은 배열의 길이를 초과하기 때문에 무시가 됩니다. )

const arr = ["안", "녕", "하", "십", "니", "까", "요"];

console.log(arr.copyWithin(2, 1)); // ['안', '녕', '녕', '하', '십', '니', '까']

2번째 요소부터 1번째 요소의 값으로 시작합니다.

:: 안녕 + 녕하십니까요 ( 1번째 요소부터 복사를 했기 때문에 '녕하십니까'가 복사됩니다. '요' 부분은 배열의 길이를 초과하기 때문에 무시됩니다. )

const arr = ["안", "녕", "하", "십", "니", "까", "요"];

console.log(arr.copyWithin(2, 1, 3)); // ['안', '녕', '녕', '하', '니', '까', '요']

2번째 요소부터 1번째 요소의 값으로 시작하고, 3번째 요소까지만 복사한 값을 넣습니다.

:: 안녕 + 녕하 + 니까요 ( 2번째 요소부터 1번째 요소의 값으로 시작하고 3번째요소까지만 복사하기 때문에 4번째 요소부터는 원래 값이 들어오게 됩니다.

const arr = ["안", "녕", "하", "십", "니", "까", "요"];

console.log(arr.copyWithin(0, 3, 3)); // ['안', '녕', '하', '십', '니', '까', '요']

end값이 start값과 같거나 작으면 동작을 하지 않습니다.

const arr = ["안", "녕", "하", "십", "니", "까", "요"];

console.log(arr.copyWithin(-2, -3, -2)); // ['안', '녕', '하', '십', '니', '니', '요']

index가 음수인 경우 뒤에서부터 계산합니다.

배열을 앞에서부터 계산할 때 [ 0, 1, 2, 3, 4, 5, 6 ]

배열을 뒤에서부터 계산할 때 [ -7, -6, -5, -4, -3, -2, -1 ]

arr.copyWithin(-2, -3, -2) === arr.copyWithin(5, 4, 5)와 같습니다.

반환 값

수정한 배열