[JavaScript] Array.map() 메서드

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

구문 :
arr.map(callback(currentValue[, index[, array]])[, thisArg])

 여기서 콜백함수는 세 가지 인자를 전달하고 두 번째로 this값을 인자로 받을 수 있다.
각 각 다음과 같이 사용된다.

• current value // 현재 반환할 값

• index // Option, 현재 해당하는 인덱스의 값

• array //Option, 배열에 접근 가능

• this // Option, 사용할 this 키워드의 값

이처럼 위에서 value, array, this는 선택 가능한 옵션값입니다

< map메서드를 이용한 예제1 >

const nums = [1, 2, 3];
const newNums = nums.map(x => x * x);

console.log(newNums); // [ 2, 4, 6 ]

< map메서드를 이용한 예제2 >

  
const sites = [
  { id: 1, name: '윤선영'},
  { id: 2, name: '김개발'},
  { id: 3, name: '박코딩'},
];

const newSites = sites.map(site => site['id'] + ' - ' + site['name']);
console.log(newSites);
// 결과 : [ '1 - 윤선영', '2 - 김개발', '3 - 박코딩' ]

< map메서드를 이용한 예제3 >

const test = [
  { coffee : "아이스 아메리카노", brand : "스타벅스"},
  { coffee : "블루베리 스무디", brand : "투썸"},
  { coffee : "녹차 라떼", brand : "할리스"}
];

const newArray = test.map(test => test.coffee+ ' : ' + test.brand);

console.log(newArray);

// 결과 : [ '아이스 아메리카노 : 스타벅스', '블루베리 스무디 : 투썸', '녹차 라떼 : 할리스' ]

< map메서드를 이용한 예제4>

// < map을 이용해서 string을 숫자로 바꿔보자 >

const str = ['100','200','300','400']

str.map(str => parseInt(str));// [ 100, 200, 300, 400 ]
str.map(Number);[ 100, 200, 300, 400 ]


//

.split(). : 문자열을 분할하여 배열에 담는 메서드이다.

• 구문 : string.split( separator, limit )
• separator 에는 분할의 기준을 넣는다. Ex) '-', ':', '=' 와 같은;
  limit으로 최대 분할 개수를 정할수있다. 선택 사항으로, 값을 정하지 않으면 전체를 다 분할한다.
  👇🏻 아래 예제5번에서 split메서드를 활용하여 문자열을 분할하여 배열에 담는것을 확인할 수 있다.

< map메서드와 split 메서드를 사용한 예제 5>

// string으로 선언된 변수가 숫자로 이루어진 string 타입의 문자열이다. 이것을 number 타입으로 배열 안에 담아보자!


const string = "100 200 300 400" 
string.split(' ')// [ '100', '200', '300', '400' ] 

const result  = string.split(' ').map((x) => Number(x));// 
console.log(result); // [ 100, 200, 300, 400 ]