JavaScript filter(), map(), Array.from()

filter(), map(), Array.from()

---

filter()

filter()메서드는 조건에 만족하는 배열 요소 검색할 때 사용하며 배열로 반환합니다.

번호	기본값	메서드	리턴값

js

const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.filter(el => el === 300);

document.querySelector(".sample12_N1").innerHTML = "1";
document.querySelector(".sample12_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M1").innerHTML = "filter(el => el === 300)";
document.querySelector(".sample12_P1").innerHTML = result;

const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.filter(el => el === 600);

document.querySelector(".sample12_N2").innerHTML = "2";
document.querySelector(".sample12_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M2").innerHTML = "filter(el => el === 600)";
document.querySelector(".sample12_P2").innerHTML = result2;

const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.filter(el => el >= 300);    //조건 걸기

document.querySelector(".sample12_N3").innerHTML = "3";
document.querySelector(".sample12_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M3").innerHTML = "filter(el => el >= 300)";
document.querySelector(".sample12_P3").innerHTML = result3;

map()

map()메서드는 배열 요소를 추출하여 새로운 배열로 만듭니다.

번호	기본값	메서드	리턴값

js

const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.map(el => el);

document.querySelector(".sample13_N1").innerHTML = "1";
document.querySelector(".sample13_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M1").innerHTML = "arrNum.map(el => el)";
document.querySelector(".sample13_P1").innerHTML = result;

const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.map(el => el + "J");

document.querySelector(".sample13_N2").innerHTML = "2";
document.querySelector(".sample13_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M2").innerHTML = "arrNum2.map(el => el + 'J')";
document.querySelector(".sample13_P2").innerHTML = result2;

const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.map(el => el + 100);

document.querySelector(".sample13_N3").innerHTML = "3";
document.querySelector(".sample13_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M3").innerHTML = "arrNum3.map(el => el + 100)";
document.querySelector(".sample13_P3").innerHTML = result3;

const arrNum4 = [{ a: 100 }, { a: 200 }, { a: 300 }];
const result4 = arrNum4.map(el => el.a);

document.querySelector(".sample13_N4").innerHTML = "4";
document.querySelector(".sample13_Q4").innerHTML = "[{ a: 100 }, { a: 200 }, { a: 300 }]";
document.querySelector(".sample13_M4").innerHTML = "arrNum4.map(el => el.a)";
document.querySelector(".sample13_P4").innerHTML = result4;

Array.from()

Array.from()메서드는 문자열을 배열로 변환하여 결과값을 반환합니다.

번호	기본값	메서드	리턴값

js

const text = "javascript";
const result = Array.from(text);

document.querySelector(".sample14_N1").innerHTML = "1";
document.querySelector(".sample14_Q1").innerHTML = "javascript";
document.querySelector(".sample14_M1").innerHTML = "Array.from(text)";
document.querySelector(".sample14_P1").innerHTML = result;

const text2 = "javascript";
const result2 = Array.from(text2, el => el + "10");

document.querySelector(".sample14_N2").innerHTML = "2";
document.querySelector(".sample14_Q2").innerHTML = "javascript";
document.querySelector(".sample14_M2").innerHTML = "Array.from(text2, el => el + '10')";
document.querySelector(".sample14_P2").innerHTML = result2;

const text3 = "javascript";
const result3 = [...text3].map(el => el);

document.querySelector(".sample14_N3").innerHTML = "3";
document.querySelector(".sample14_Q3").innerHTML = "javascript";
document.querySelector(".sample14_M3").innerHTML = "[...text3].map(el => el)";
document.querySelector(".sample14_P3").innerHTML = result3;