Purple Bobblehead Bunny

Frontend/JAVASCRIPT

[JAVASCRIPT] Map

준영어린이 2022. 6. 20. 19:38

Map

Map은 키-값 쌍을 저장하며, 각 쌍의 삽입 순서도 기억하는 컬렉션이다.

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

 

Java의 HashMap과 같은 자료구조이다.

 

 

  • key : value의 형식으로 저장되며, key 값을 사용하여 해당 key에 맞는 value 값을 가져온다.

 

 

Map.*

 

 

Map.length 값이 0인 속성
Map.size Map의 키-값 개수
Map.clear() Map 초기화
Map.entries() Map의 모든 키와 값을 [key, value] 형태의 array로 만들어서 반환
Map.forEach() Map 모든 키와 값에 대해서 콜백 함수 사용
Map.get(key) key값에 맞는 value값 반환
Map.delete(key) key-value 값 삭제
Map.has(key) 해당 key가 Map에 포함되어 있는지 확인
Map.keys() Map의 모든 key들을 반환
Map.set(key, value) Map에 key-value 를 집어 넣음

 

 

 

배열에 map을 활용해 배열 * 2 값 만들기

 

let arr = [1,2,5,6];
let result = array.map(x => x * 2);



console.log(arr) 
[1,2,5,6]
// map은 본래 값은 건드리지 않고 새로운 배열을 생성하여 리턴한다.

console.log(result)
[2,4.10,12]
// 새로운 배열을 생성하여 result의 할당한 값

 

함수를 생성하고 맵의 콜백 함수에 넣어서 사용

 

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

function sq(x) {  // 함수에 리턴값 x ** 2 생성 
	return x ** 2
}


result = array.map(sq);
// 배열의 map에 위에 만든 함수를 콜백함수로 넣어서 사용

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

 

메서드 체이닝(Method Chaning)

 

메서드가 객체를 반환을 하면 메서드의 반환 값인 객체를 통해 또 다른 함수 호출이 가능

가독성이 떨어진다는 단점을 가지고 있다.

 

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

array.map(Math.sqrt).map(x=>y**3)


// Math.sqrt -> 해당 숫자의 제곱근을 반환하는 함수. 4=2 / 9=3
// 제곱근의 반환값에 Method Chaning을 한번 더 사용해 x의 3승을 한다. 




// return 값 [1,8,27,64]

 

 

 

'Frontend > JAVASCRIPT' 카테고리의 다른 글

[JAVASCRIPT] Event  (0) 2022.06.19
[JAVASCRIPT] Hoisting, 호이스팅  (0) 2022.06.13
[JAVASCRIPT] 변수 선언, let, var, const  (0) 2022.06.13
[JAVASCRIPT] 자바스크립트 기본 문법  (0) 2022.06.11