map( )/Array.from( )

map( ) / Array.from( )

map( ) 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드입니다.
Array.from() 은 문자열 등 유사 배열(Array-like) 객체나 이터러블한 객체를 배열로 만들어주는 메서드입니다.

---

map( ) 메서드

메서드 안에 콜백함수를 넣어 반복문을 적용하는 메서드입니다. 기본적으로 forEach문과 같으나 forEach문은 배열을 반환하지 못하는데 map( ) 메서드는 배열 반환이 가능하다는 차이점이 있어 배열을 반환할 때 forEach문 대신 사용할 수 있습니다.

문법
Array.map(el => el 연산자 반복할 값)

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 = arrNum.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 = "arrNum.map(el => el + 'j')";
document.querySelector(".sample13_P2").innerHTML = result2; 


const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum.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 = "arrNum.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 = "arrNum.map(el => el.a)";
document.querySelector(".sample13_P4").innerHTML = result4; 

결과보기

번호	기본값	메서드	리턴값

Array.from( ) 메서드

Array.from( ) 메서드는 배열이 아닌 값을 배열로 반환해 줘 자주 사용되는 메서드입니다. 또한 메서드 안에 콜백함수 작성이 가능한 등 다양한 기능이 있습니다.

문법
Array.from(변수)
Array.from(변수, 콜백함수)
Array.from(변수)

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; 
console.log(result);


const text2 = "javascript";
const result2 = Array.from(text2, el => el + "10");    //Array.from은 콜백함수도 가능함

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 = result; 
console.log(result2);


const text3 = "javascript";
const result3 = [...text3].map(el => el);    //Array.from은 펼침 연산자 형태로 쓸 수 있음

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; 
console.log(result3);

결과보기

번호	기본값	메서드	리턴값