개발야옹

Set Object

Set object 는 map과 함께 ES6에 새로 도입된 자료구조로, 자료형에 관계 없이 원시 값 (primitive value)과 객체 참조 모두 유일한 값을 저장할 수 있다. Set은 중복을 허용하지 않는 데이터 집합으로 Set을 사용하게 되면 데이터에 빠르게 액세스를 할 수 있다.

Set은 중복을 확인하기 위해서 자동으로 형변환을 해주지 않기 때문에 1 과 "1"은 다른 것으로 처리 된다.

forEah와 for of로 값에 접근이 가능하다.

Set object는 value collection으로 삽인 순서대로 요소를 순회할 수 있다. NaN과 undefined도 Set에 저장할 수 있다. NaN !== NaN이지만, Set내에서는 NaN은 NaN과 같은 것으로 간주한다.

const set = new Set([1,2,3,4,5]);

console.log(set.has(1)); // true
console.log(set.has(6)); // false

구문

new Set( [ iterabled ] );

매개변수

iterable : 반복 가능한 객체가 전달된 경우 그 요소는 모두 새로운 Set에 추가된다. 만약 매개변수를 명시하지 않거나 null을 전달하면, 새로운 Set은 비어 있는 상태가 된다.

반환 값

새로운 Set object

속성

1. Set.prototype.add() : 요소 추가
2. Set.prototype.clear() : Set Object 비우기
3. Set.prototype..Set() : constructor
4. Set.prototype.delete('value') : 해당 값 Set에서 삭제
5. Set.prototype..forEach : 반복문
6. Set.prototype..entries : map에서의 entries와 동일, 순회할 수 있는 Interator로 반환
7. Set.prototype..values() : Set내의 value들을 순회할 수 있는 Interator로 반환
8. Set.prototype..has('value') :해당 값을 가지고 있는 판별 boolean return
9. Set.prototype.size() : Set 객체 내의 요소의 갯수 return

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