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

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

filter(), map(), Array.from() 메서드에 대해 알아 봅시다.

---

filter()

filter() 메서드는 조건을 걸 수 있습니다.

번호	기본값	메서드	리턴값

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 = "arrNum.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 = "arrNum2.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 = "arrNum3.filter(el => el >= 300)";
document.querySelector(".sample12_P3").innerHTML = result3; 

map()

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

번호	기본값	메서드	리턴값

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() 메서드는 문자열을 배열로 변환 시켜줍니다.

번호	기본값	메서드	리턴값

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

console.log(result);    //['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']

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;