Javascript <자바스크립트> Map 메소드 사용하기.

 

 

 

Javascript <자바스크립트> Map

 

 

 

---

 

 

 

map은 배열을 순회하면서 실행되는 콜백함수의 결과값들을 새로운 배열로 반환한다.

 

 

 

 

 

 

 

 

Array(배열) 에 map 메소드를 사용해서  배열 * 2 값을 만들기.

let array = [1, 4, 9, 16];
let result = array.map(x => x * 2); 

// 배열에 map 메소드를 사용해서 리턴값으로 배열의 원소 *2	값을 result 에 할당한다.
//화살표함수( 전통적인 함수표현(function)의 간편한 대안)
                                    
console.log(array)  //map 은 원본값은 건드리지 않고 새로운 배열을 생성하여 리턴한다.
 [1, 4, 9, 16]
console.log(result)  // 새로운 배열을 생성하여 result의 할당한 결과값.
[2, 8, 18, 32]

 

---

 

 

 

 

함수(function)를 만들고 맵(map)의 콜백 함수에 넣어서 사용해보기.

let array = [1, 4, 9, 16];

function squared(x){  // squared(제곱) 이라는 함수에 리턴값 x **2 으로 만들어주고 
    return x ** 2
}

result = array.map(squared);
// 배열의 맵에 위에 만든 함수를 콜백함수로 넣어줘서 사용할수 있다.

console.log(result); =  [1, 16, 81, 256]
console.log(array); =  [1, 4, 9, 16];

 

---

 

 

 

맵(map)에 메소드를 쓰고 연달아서 또 사용할 수 있다. (메소드 체이닝 - Method Chaining)

 

메소드 체이닝 - Method Chaining 

메소드가 객체를 반환하면 메소드의 반환 값인 객체를 통해서 또 다른 함수를 호출할 수 있다.

너무 많이 메소드 체이닝을 사용하면 가독성이 떨어질 수 있다.

 

let array = [1, 4, 9, 16];

array.map(Math.sqrt).map(x=>x**3)
// Math.sqrt = 해당 숫자의 제곱근을 반환하는 함수입니다. 1 = 1 /  4 = 2 /  9 = 3  / 16 = 4 
 // 제곱근의 반환값에 메서드 체이닝으로 map을 한번더 사용하여 x의 3승을 합니다
return 값 =  [1, 8, 27, 64]

 

---

 

 

 

맵(map) 으로 배열 안에 키 값을 불러올 수 있다.

 

let data = [{                          // data 란 변수에 간단한 구조의 객체를 생성해 할당한다.
             반 : 1,
             번 : 1,
             이름 : '국화',
             중간고사점수 : 100
              },
            {
             반 : 1,
             번 : 2,
             이름 : '방구',
             중간고사점수 : 40
            },
            {
             반 : 1,
             번 : 3,
             이름 : '희원',
             중간고사점수 : 15
            },
            {
             반 : 1,
             번 : 4,
             이름 : '뽀짝',
             중간고사점수 : 25
            }]
            
console.log(data.map(x => x.중간고사점수))
// data를 map으로 순회하면서 중간고사점수 키의 값을 새로운 배열로 출력한다.
//[100, 40, 15, 25]
              
console.log(data.map(x => [x.이름,x.중간고사점수]))
// data를 map으로 순회하면서 이름과 중간고사점수를 배열로 담아서 출력한다.
//[Array(2), Array(2), Array(2), Array(2)]
//0: (2) ['국화', 100]
//1: (2) ['방구', 40]
//2: (2) ['희원', 15]
//3: (2) ['뽀짝', 25]

//반 평균을 구해보자.

 let total = 0;         // 점수를 담을 변수를 만들어 준다.
data.map(x => x.중간고사점수).forEach(y => total+=y)
//중간고사점수를 순회하면서 만들어진 중간고사점수 배열을 forEach로 한번더 순회하며 total 값에 더해준다.
//forEach 를 사용한 이유는 반환값이 없기때문이다 map을 사용하면 새로운 배열을 생성해서 반환한다.
 
 console.log(total/data.length); // total 을 data의 길이만큼 나눈다. 
 
total 값 180.
결과값 45.

 

 

 

---

 

 

 

https://github.com/chry8822

chry8822 - Overview

 

 

 

---