자바스크립트 map 함수

Map함수

  • map() 함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용, 기존의 배열이 변하지 않음
array.map(callbackFunction(currenValue, index, array), thisArg)
  • filter, forEach와 같은 구문
  • callbackFunction, thisArg 두 개의 매개변수가 있고 callbackFunction은 crruentValue, index, array 3개의 매개변수를 지님
  1. currentValue : 배열 내 현재 값
  2. index : 배열 내 현재 값의 인덱스
  3. array : 현재 배열
  4. thisArg : callbackFunction 내에서 this로 사용될 값
const days = ["Mon", "Tue", "Wed", "Thus", "Fri"];
  • map() 함수는 모든 배열의 값에 Function을 실행하는 Method
  • days.map(…) 한다는 것은 days에 있는 모든 요일에 Function을 실행하고 Function에서 나온 값을 저장해서 새로운 배열로 만든다는 것
  • days.map()이 해당하는 Function에 주는건 Variable(변수)인데 이건 아무거나 가능
  • 예를들어 day가 될 수 있음
const days = ["Mon", "Tue", "Wed", "Thus", "Fri"];
const smilmingDays = days.map(day => '😃 ${day}');

console.log(smilmingDays);
  • map()함수는 하나의 Argument만 전달하지 않음. 이외에 다른 많은 Argument도 전달. 그 중 하나가 index
const days = ["Mon", "Tue", "Wed", "Thus", "Fri"];
const smilmingDays = days.map((day,index) => '#${index}  ${day}'); 
console.log(smilmingDays);  

var numbers = [ 1,2,3,4,5,6,7,8,9];
var newNumbers = numbers.map(number =>number *2);
console.log(newNumbers);


var numbers = [ 1,2,3,4,5,6,7,8,9];

function multiplyTwo(number){
    return number *2;
}
var newNumbers = numbers.map(multiplyTwo);
console.log(newNumbers); // 위 코드와 같은 결과

Object타입 컨트롤

var students = [
  {id:1, name:"james"},
  {id:2, name:"tim"},
  {id:3, name:"john"},
  {id:4, name:"brian"}
];

var students = [
  {id:1, name:"james"},
  {id:2, name:"tim"},
  {id:3, name:"john"},
  {id:4, name:"brian"}
];
var names = students.map(student =>student.name);
console.log(names); 
// ['james', 'tim', 'john', 'brian']

Comments