map

• 배열에 담겨 있는 인덱스들에 함수를 실행시키고 그 함수의 결과 값으로 새로운 배열을 만드는 함수 메소드
• 변수가 있고 그 값들에 전부 함수 적용을 하고 싶을 때 map() 함수 사용
• 기존의 배열은 변하지 않는다
• undefined도 포함
• 배열 값이 들어있는 인덱스만 호출
• 삭제되거나 할당 또는 정의 되지 않은 인덱스는 호출 X

array.map(callbackFunction(currenValue, index, array), thisArg)

• filter, forEach와 같은 구문
• callbackFunction과 thisArg 두 개의 매개변수
  -callbackFunction : 새로운 배열 요소를 생성하는 함수
  -thisArg : callback을 실행할 때 this로 사용되는 값
• callbackFunction은 3개의 매개변수
  -currentValue(처리할 현재 요소)
  -index(처리할 현재 요소의 인덱스)
  -array(map()을 호출할 배열

1. square root (제곱근)

1.1

var numbers = [4,9,16,25,36];
var result = numbers.map(Math.sqrt);
console.log(result);

-> 값은 2, 3, 4, 5, 6

2. 기존 배열에 값의 x2를 한 배열

2.1

let numbers = [1, 2, 3, 4, 5]
let result = numbers.map(numbers => numbers * 2); 

let result = numbers.map(function(numbers){
	return numbers * 2;  
   }
);

let result = numbers.map(number => {
	console.log(number);
}
);
console.log(result);

1. 2. 3번 모두 값은 2, 4, 6, 8, 10

2.2

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);

-> 2, 4, 6, 8, 10, 12, 14, 16, 18

화살표 함수(arrow function)

• " => " 간략한 방법의 함수 선언
• return이 함축되어 있다
• 익명 함수로만 사용
• 화살표 함수를 호출하기 위해서는 함수 표현식을 사용
• 콜백 함수로 사용
• 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다
• 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다 (Lexical this)
• call, apply, bind 메소드를 사용하여 this를 변경할 수 없다
• 메소드를 정의하는 것은 피해야 한다
• prototype에 메소드를 할당하는 것도 피해야 한다
  (화살표 함수 내부의 this는 메소드를 호출한 객체를 가리키지 않고 상위 컨택스트인 전역 객체 window를 가리키기 때문에)
• 생성자 함수로 사용할 수 없다
  -생성자 함수는 prototype 프로퍼티를 가지며 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용하는데 화살표 함수는 prototype 프로퍼티를 가지고 있지 않다

() => { ... } // 매개변수가 없을 경우
x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략 가능
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략 불가능

var pow = function (x) { return x * x; }; 
	=== const pow = x => x * x; 

var arr = [1, 2, 3];
var pow = arr.map(function (x) { 
  return x * x;
});
=== 
const arr = [1, 2, 3];
const pow = arr.map(x => x * x);

3. Object(객체)타입 컨트롤 가능

• filter함수와 같이 객체도 가능

3.1

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'

4. reverse 반대로(거꾸로)

4.1

var numbers = [1,2,3,4,5,6];
var numbersReverse  = 
    numbers.map(number => number *2).reverse();
console.log(numbersReverse);

-> 값은 12, 10, 8, 6, 4, 2

5. 배열 안에 배열이 있는 경우

5.1

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

-> 값은 [ 2, 4, 6 ], [ 8, 10, 12 ], [ 14, 16, 18 ]