개발야옹

Map Object

Map Object는 key-value 쌍을 보유하고 있으며, 키의 삽입순서를 기억하고 있다. 

key를 사용하여 value를 get, set할 수 있다. 

key는 중복될 수 없으며, 하나의 key에는 하나의 value만 저장 가능

key로 사용할 수 있는 데이터 : string, symbol(ES6), object, function => number는 key로 사용이 불가능하다.

const map = new Map();

map.set('a',1);
map.set('b',2);
map.set('c',3);

console.log(map.get('a')); // 1

Map method

1. Map.prototype.size : Map 객체의 키-값 쌍의 갯수 반환
2. Map.prototype.get : Map.get('key') 해당하는 key의 value를 반환
3. Map.prototype.set : Map.set('key','value') 키와 값을 map에 넣어줌
4. Map,prototype.clear : Map 객체를 비워준다. === size 를 0으로 만들어준다.
5. Map.prototype.forEach :

   // Arrow function
   forEach(() => { /* ... */ } )
   forEach((value) => { /* ... */ } )
   forEach((value, key) => { /* ... */ } )
   forEach((value, key, map) => { /* ... */ } )
   
   // Callback function
   forEach(callbackFn)
   forEach(callbackFn, thisArg)
   
   // Inline callback function
   forEach(function() { /* ... */ })
   forEach(function(value) { /* ... */ })
   forEach(function(value, key) { /* ... */ })
   forEach(function(value, key, map) { /* ... */ })
   forEach(function(value, key, map) { /* ... */ }, thisArg)​
   
   // Array.prototype.forEach와 통일성을 유지하기 위해서 parm순서 value, key

6. Map.prototype.delete : Map.delete('key') 해당 key와 value 쌍을 map collection에서 삭제
7. Map.prototype.has : Map.has('key') 해당 key에 해당하는 value가 존재하는지 확인 boolean return
8. Map.prototype.entries : Map.entries(); 는 map안의 모든 entry들을 순회할 수 있는 iterable object를 반환해준다.

   const map = new Map();
   
   map.set('a',1);
   map.set('b',2);
   map.set('c',3);
   
   const entMap = map.entries();
   
   console.log(entMap.next().value); // ['a', 1]
   console.log(entMap.next().value); // ['b', 2]
   console.log(entMap.next().value); // ['c', 3]​

9. Map.prototype.keys() : entries 와 같이 map안의 모든 key값을 순회할 수 있는 iterable object를 반환해준다.

   const map = new Map();
   
   map.set('a',1);
   map.set('b',2);
   map.set('c',3);
   
   const entMap = map.keys();
   
   console.log(entMap.next().value); // a
   console.log(entMap.next().value); // b
   console.log(entMap.next().value); // c​

10. Map.prototype.values() : map안의 모든 value들을 순회할 수 있는 iterable object를 반환

    const map = new Map();
    
    map.set('a',1);
    map.set('b',2);
    map.set('c',3);
    
    const entMap = map.values();
    
    console.log(entMap.next().value); // 1
    console.log(entMap.next().value); // 2
    console.log(entMap.next().value); // 3​

[+] 참고하면 좋을 블로그

https://medium.com/@hongkevin/js-5-es6-map-set-2a9ebf40f96b

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/set

Array.prototype.includes() 

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별하는 메서드이다.

구문

arr.includes( valueToFind [, fromindex])

매개 변수

• valueToFind : 탐색할 요소
  • includes는 문자나 문자열 비교시 대소문자를 구분한다. 
  • fromIndex ( option ) : 배열에서 searchElement 검색을 시작할 위치이다. 음의 값은 array.length + fromIndex의 인덱스를 asc로 검색한다. 기본값은 0이다.

반환 값

boolean

예제 코드

const arr = ["Alice", "Bob","Kitez"];

console.log(arr.includes("alice")); // false
console.log(arr.includes("Alice")); // true
console.log(arr.includes("Alice",-1)); // false

[+] 나중에 참고하면 좋은 블로그

https://hianna.tistory.com/403

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

Array.prototype.filter()

filter()는 주어진 함수의 조건을 통과하는 모든 요소를 모아 새로운 배열로 반환하는 메서드이다.

구문

arr.filter( callback ( element[, index[, array]])[, thisArg])

매개변수

• callback : 각 요소를 필터링할 조건을 담고 있는 함수로 boolean을 반환한다. 반환 값이 true이면 값을 유지하고 false이면 요소를 삭제한다.
  • element : 처리할 현재 요소
  • index ( option ) : 처리한 현재 요소의 인덱스
  • array ( option ) : filter를 호출한 배열
  • thisArg ( option ) : callback을 실행할 때 this로 사용하는 값

반환 값

callback 함수로 걸러진 새로운 요소들로 이루어진 배열을 반환한다. 어떠한 요소도 조건을 통과하지 못했을 경우 빈 배열을 반환한다.

예제 코드

// 예제 코드
// 2의 배수만 남기기

let arr = [1,2,3,4,5];

arr = arr.filter( i => {
   return i % 2 === 0;
});

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

▶ map과 filter의 공통점

    : 기존배열은 수정하지 않고 요소들을 순환하면서 새로운 배열을 반환한다.

▶ map과 filter의 차이점

    : map은 콜백함수의 내용을 기존의 요소에 적용하여 새로운 요소를 생성/반환

    : filter는 콜백함수의 조건문을 만족하는 요소들을 반환

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

https://velog.io/@tjdud0123/javascript-map-filter-%ED%95%A8%EC%88%98

Array.prototype.map()

map()는 Array의 내장 함수로 배열 내의 모든 요소 각각에 대해 주어진 callback 함수를 호출한 결과를 모아 새로운 배열로 반환한다.

구문

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

매개변수

• callback : 새로운 배열 요소를 생성하는 함수
  • currentValue : 처리할 현재 요소
  • index ( Option ) : 처리할 현재 요소의 인덱스
  • array ( Option ) : map을 호출한 배열
  • thisArg ( Option ) : callback을 실행할 때 this로 사용되는 값

반환 값

배열의 각 요소에 대해 callback 함수를 실행한 결과를 모두 모은 새로운 배열 (undefined 도 포함한다.)

예제 코드

// 예시 코드

let arr = [1,2,3,4,5];

console.log(arr); // [1,2,3,4,5]

arr = arr.map( number => {
   return number *= 2;
});

console.log(arr); // [2,4,6,8,10]

// 문자열로 바꾸기
arr = arr.map(String);
console.log(arr); // ['2', '4', '6', '8', '10']

출력 결과

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map