코린이[코딩 어린이]

map() 메서드

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

구문

arr.map(callback(currentValue[, index[, array]])[, thisArg])

매개변수

• callback: 새로운 배열 요소를 생성하는 함수( 아래 세 가지 인수를 가집니다. )
• currentValue: 처리할 현재 요소
• index: 처리할 현재 요소의 인덱스
• array: map()을 호출한 배열
• thisArg: callback을 실행할 때 this로 사용되는 값

반환 값

배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열

예제

배열에 들어있는  숫자들의 제곱근을 구하여 새로운 배열을 만들기

let number = [1, 4, 9, 21];
let roots = number.map(Math.sqrt);

console.log(number); // [1, 4, 9, 21]
console.log(roots); // [1, 2, 3, 4.58257569495584]

map()을 활용해 배열 속 객체를 재구성하기

let kvArr = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 }
];

let reformttedArr = kvArr.map(function (obj) {
  let rObj = {};
  rObj[obj.key] = obj.value;

  return rObj;
});

console.log(kvArr); // [{key:1, value: 10}, {key:2, value: 20}, {key:3, value: 30}]
console.log(reformttedArr); // [{1: 10}, {2: 20}, {3: 30}]

인자를 받는 함수를 사용하여 숫자 배열 재구성하기

let number = [1, 2, 5, 8, 20];

let double = number.map(function (num) {
  return num * 2;
});

console.log(number); // [1, 2, 5, 8, 20]
console.log(double); // [2, 4, 10, 16, 40]

map()을 포괄적으로 사용하기

:: ASCII 인코딩 값을 요소로 갖는 배열을 얻는 방법입니다.

let map = Array.prototype.map;

let a = map.call("Hello World", function (x) {
  return x.charCodeAt(0);
});

console.log(a); // [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

lastIndexOf() 메서드

lastIndexOf() 메서드는 배열에서 주어진 값을 발견할 수 있는 마지막 인덱스를 반환하고, 요소가 없으면 -1을 반환합니다.

배열 탐색은 fromIndex에서 시작하여 뒤로 진행됩니다.

구문

arr.lastIndexOf(searchElement[, fromIndex]);

매개변수

• fromIndex: 역순으로 검색을 시작할 인덱스. 배열의 길이에서 1을 뺀 값( arr.length - 1 )을 기본값으로 지정하지 않을 경우 전체 배열을 검색합니다. 주어진 값이 배열의 길이 이상이면 전체 배열을 검색합니다. 값이 음수라면, 배열의 마지막부터 시작하는 인덱스로 처리됩니다. 다만, 음수를 제공하더라도 검색 순서는 뒤에서 앞으로 진행됩니다. 위의 모든 절차를 거친 최종 계산값이 0미만인 경우, lastIndexOf()는 항상 -1을 반환합니다. 즉, 배열을 탐색하지 않습니다.

반환 값

주어진 값과 일치하는 마지막 요소의 인덱스를 반환합니다. 없으면 -1을 반환합니다.

예제

lastIndexOf() 메서드를 사용하여 배열의 값 찾기

let arr = [2, 5, 9, 2];
console.log(arr.lastIndexOf(2)); // 3
console.log(arr.lastIndexOf(7)); // -1
console.log(arr.lastIndexOf(2, 3)); // 3
console.log(arr.lastIndexOf(2, 2)); // 0
console.log(arr.lastIndexOf(2, -2)); // 0
console.log(arr.lastIndexOf(2, -1)); // 3

위처럼 표를 그려놓고 보면 헷갈리지 않습니다!

요소의 모든 항목 찾기

var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.lastIndexOf(element);
while (idx != -1) {
  indices.push(idx);
  idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);
}

console.log(indices); // [4, 2, 0]

keys() 메서드

keys() 메서드는 배열의 각 인덱스를 키 값으로 가지는 새로운 Array Iterator 객체를 반환합니다.

구문

arr.keys();

반환 값

새로운 Array 반복기 객체

예제

Sparse Arrays에 keys() 메서드 사용하기

let arr = ["a", , "c"];
let sparseKeys = Object.keys(arr);
let denseKeys = [...arr.keys()];

console.log(sparseKeys); // ['0', '2']
console.log(denseKeys); // [0, 1, 2]

배열에 실제로 존재하는 키 값만을 포함하는 Object.keys()와는 달리 [...arr.keys()]는 누락된 속성이 나타나는 빈 공간을 무시하지 않습니다.

Calling Keys() on non-array Objects

const arrayLike = {
  length: 3,
};
for (const entry of Array.prototype.keys.call(arrayLike)) {
  console.log(entry);
}

keys() 메서드는 this 값에서 length 속성을 읽고 0과 length - 1 사이에 있는 모든 정수 인덱스를 생성합니다. ( 인덱스는 실제로 생기지 않습니다. )

join() 메서드

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

구문

arr.join([separator]);

매개변수

• separator: 배열의 각 요소를 구분할 문자열을 지정합니다. 이 구분자는 필요한 경우 문자열로 변환됩니다. 생략하면 배열의 요소들이 쉼표로 구분됩니다. separator가 빈 문자열이면 모든 요소들이 사이에 아무 문자도 없이 연결됩니다.

반환 값

배열의 모든 요소들을 연결한 하나의 문자열을 반환합니다. 만약 arr.length가 0이라면 빈 문자열을 반환합니다.

예제

여러가지 방법으로 배열 연결하기

let arr = ["안녕", "하세요", "저는", "Shiro21", "입니다."];

let a = arr.join();
let b = arr.join(", ");
let c = arr.join(" + ");
let d = arr.join("");

console.log(a); // 안녕,하세요,저는,Shiro21,입니다.
console.log(b); // 안녕, 하세요, 저는, Shiro21, 입니다.
console.log(c); // 안녕 + 하세요 + 저는 + Shiro21 + 입니다.
console.log(d); // 안녕하세요저는Shiro21입니다.

Array.isArray() 메서드

Array.isArray() 메서드는 인자가 array인지 판별합니다.

구문

Array.isArray(obj);

매개변수

• obj: 검사할 객체

반환 값

객체가 Array라면 true, Array가 아니라면 false입니다.

예제

// TRUE
console.log(Array.isArray([])); // true
console.log(Array.isArray([1])); // true
console.log(Array.isArray(new Array())); // true
console.log(Array.isArray(new Array(3))); // true
console.log(Array.isArray(new Array("a", "b", "c", "d"))); // true
console.log(Array.isArray(Array.prototype)); // true [ Array.prototype은 스스로도 배열입니다. ]

// FALSE
console.log(Array.isArray()); // false
console.log(Array.isArray({})); // false
console.log(Array.isArray(undefined)); // false
console.log(Array.isArray(null)); // false
console.log(Array.isArray(1)); // false
console.log(Array.isArray("A")); // false
console.log(Array.isArray(true)); // false

indexOf() 메서드

indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.

구문

arr.indexOf(searchElement[, fromIndex]);

매개변수

• searchElement: 배열에서 찾을 요소입니다.
• fromIndex: 검색을 시작할 색인입니다. 인덱스가 배열의 길이보다 크거나 같은 경우 -1이 반환되므로, 배열이 검색되지 않습니다. 제공된 색인 값이 음수라면 배열 끝에서부터 오프셋 값으로 사용됩니다.
  :: 제공된 색인이 음수라면 배열은 여전히 앞에서 뒤로 검색됩니다. 계산된 인덱스가 0보다 작으면 전체 배열이 검색됩니다. ( 기본값: 0 [전체 배열 검색] )

반환 값

배열 내 요소의 최초 인덱스입니다. 없으면 -1을 반환합니다.

예제

첫 번째 인덱스 반환 확인하기

const arr = ["안녕", "하세요", "저는", "Shiro21입니다.", "안녕", "저는"];

console.log(arr.indexOf("안녕")); // 0
console.log(arr.indexOf("저는")); // 2
console.log(arr.indexOf("안녕하")); // -1

console.log(arr.indexOf("안녕", "저는")); // 0
console.log(arr.indexOf("안녕", "저는여")); // 0
console.log(arr.indexOf("안녕하", "저는")); // -1

요소의 모든 항목 찾기

// 같은 내용입니다.

const arr = ["안녕", "하세요", "저는", "Shiro21입니다.", "안녕", "저는"];
const newArr = [];

for (let i = 0; i < arr.length; i++) {
  if (arr[i].indexOf("안녕") > -1) newArr.push(i)
}

console.log(newArr); // [0, 4]


// -------------------------------------------------------------------- //

const arr = ["안녕", "하세요", "저는", "Shiro21입니다.", "안녕", "저는"];
const newArr = [];
let idx = arr.indexOf("안녕");

while (idx !== -1) {
  newArr.push(idx);
  idx = arr.indexOf("안녕", idx + 1);
}

console.log(newArr); // [0, 4]

while문을 사용할 때는 무한루프에 빠지지 않게 조심해야 합니다.

includes() 메서드

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 확인합니다.

구문

arr.includes(valueTofind[, fromIndex]);

매개변수

• valueToFind: 탐색할 요소입니다. ( 문자, 문자열을 비교할 때 includes() 메서드는 대소문자를 구분합니다. )
• fromIndex: 이 배열에서 searchElement 검색을 시작할 위치입니다. 음의 값일 경우 array.length + fromIndex의 인덱스를 ASC( Ascending )로 검색합니다. 기본값은 0입니다.

반환 값

Boolean값입니다.

예제

있는지 없는지 확인하기

const arr = [1, 2, 3];

console.log(arr.includes(2)); // true

const pets = ["cat", "dog", "bat"];

console.log(pets.includes("cat")); // true
console.log(pets.includes("c")); // false

fromIndex가 배열의 길이와 같거나 길이보다 큰 경우

const arr = ["a", "b", "c"];

console.log(arr.includes("c", 1)); // true
console.log(arr.includes("c", 2)); // true

// C가 대문자입니다.
console.log(arr.includes("C", 2)); // false
// fromIndex가 배열의 길이와 같습니다.
console.log(arr.includes("c", 3)); // false

0보다 작은 인덱스의 계산

fromIndex가 음수일 때, 인덱스는 valueToFind를 찾기 시작할 배열의 위치로 사용되기 위해 연산됩니다. 만약 계산된 인덱스가 -1 * array.length보다 작거나 같으면 배열이 검색됩니다.

const arr = ["a", "b", "c"];

console.log(arr.includes("a", -100)); // true
console.log(arr.includes("b", -100)); // true
console.log(arr.includes("c", -100)); // true
console.log(arr.includes("a", -2)); // false
console.log(arr.includes("b", -2)); // true
console.log(arr.includes("c", -2)); // true

arr 배열의 길이는 3입니다. 

3 + ( -100 ) = -97

3 + ( -2 ) = 1

from() 메서드

from() 메서드는 유사 배열 객체( array-like object )나 반복 가능한 객체( iterable object )를 얕게 복사해 새로운 Array객체를 만듭니다.

구문

Array.from(arrayLike[, mapFn[, thisArg]]);

매개변수

• arrayLike: 배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체입니다.
• mapFn: 배열의 모든 요소에 대해 호출할 맵핑 함수입니다.
• thisArg: mapFn 실행 시에 this로 사용할 값입니다.

반환 값

새로운 Array 인스턴스입니다.

예제

// String 배열 만들기
let cnt = "foo";
console.log(Array.from(cnt)); // ['f', 'o', 'o']

let cnt1 = [1, 2, 3, 4, 5];
console.log(Array.from(cnt1, x => x + x)); // [2, 4, 6, 8, 10]

Set에서 배열 만들기

const newArr = new Set(["foo", "window"]);

console.log(newArr); // {'foo', 'window'}
console.log(Array.from(newArr)); // ['foo', 'window']

Map에서 배열 만들기

const old = new Map([[1, 2], [2, 4], [4, 8]]);

console.log(Array.from(old)); // [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
console.log(Array.from(mapper.values())); // ['a', 'b']

console.log(Array.from(mapper.keys())); // ['1', '2']

forEach() 메서드

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

구문

arr.forEach(callback(currentValue[, index[, array]])[, thisArg]);

매개변수

• callback: 각 요소에 대해 실행할 함수입니다. 아래 세 가지 매개변수를 받습니다.
• currentValue: 처리할 현재 요소입니다.
• index: 처리할 현재 요소의 인덱스입니다.
• array: forEach() 메서드를 호출한 배열입니다.
• tihsArg: callback을 실행할 때 this로 사용할 값입니다.

반환 값

undefined입니다.

예제

const arr = ["a", "b", "c"];

arr.forEach(el => console.log(el));
// "a"
// "b"
// "c"

for() 반복문을 forEach() 반복문으로 바꾸기

const arr = ["item", "section", "div", "for", "forEach"];
const newArr = [];

// for() 반복문
for(let i = 0; i < arr.length; i++) {
  newArr.push(arr[i]);
};
console.log(newArr); // ['item', 'section', 'div', 'for', 'forEach']

// forEach() 반복문
arr.forEach((item) => {
  newArr.push(item);
});
console.log(newArr); // ['item', 'section', 'div', 'for', 'forEach']

배열 콘텐츠 출력하기

const arr = ["item", , "div", "for", "forEach"];

function record(el, index, array) {
  console.log("A[" + index + "] = " + el);
}

arr.forEach(record);
/*
  A[0] = item
  A[2] = div
  A[3] = for
  A[4] = forEach
*/

A[1]은 배열의 위치에 항목이 없기 때문에 건너뛰기 됩니다.

flatMap() 메서드

flatMap() 메서드는 먼저 매핑함수를 사용해 각 엘리먼트에 대해 map() 메서드를 수행 후, 결과를 새로운 배열로 평탄화해줍니다. 이는 깊이 1의 flat()이 뒤따르는 map()과 동일하지만, flatMap()은 아주 유용하며 둘을 하나의 메소드로 병합할 때 조금 더 효율적입니다.

구문

arr.flatMap(callback(currentValue[, index[, array]])[, thisArg]);

매개변수

• callback: 새로운 배열의 엘리먼트를 생성하는 함수입니다. 3개의 인자를 받습니다.
• index: 배열에서 처리되고 있는 현재 엘리먼트의 인덱스입니다.
• array: map()이 호출된 배열입니다.
• thisArg: callback실행에서 this로 사용할 값입니다.

반환 값

각 엘리먼트가 callback함수의 결과이고, 깊이 1로 평탄화된 새로운 배열입니다.

예제

map()과 flatMap()

let arr = [1, 2, 3, 4];

console.log(arr.map(x => [x * 2])); // [[2], [4], [6], [8]]

console.log(arr.flatMap(x => [x * 2])); // [2, 4, 6, 8]

console.log(arr.flatMap(x => [[x * 2]])); // [[2], [4], [6], [8]]

단어의 리스트를 생성합니다.

let arr1 = ["it's Sunny in", "", "California"];

console.log(arr1.map(x => x.split(" "))); // [["it's","Sunny","in"],[""],["California"]]

console.log(arr1.flatMap(x => x.split(" "))); // ["it's","Sunny","in","California"]

reduce + concat vs flatMap

var arr1 = [1, 2, 3, 4];

console.log(arr1.flatMap(x => [x * 2])); // [2, 4, 6, 8]

console.log(arr1.reduce((acc, x) => acc.concat([x * 2]), [])); // [2, 4, 6, 8]