기능 구현에 필요했던 것들 정리!

Debounce

• 이벤트에 의해 특정 함수가 여러번 반복 실행될 경우에 사용한다. 정해진 지연시간동안 반복된 호출을 딱 1번만 호출하도록 제어

  문법 : _.debounce(콜백함수, 시간)

검색 입력폼에 debounce 적용해보기

lodash

lodash란?
자바스크립트의 인기 있는 라이브러리이다.
array,collection,data 등 데이터의 필수적인 구조를 쉽게 다를 수 있게끔 하는데에 사용된다.

collections

프로그래밍언어에는 종류에 상관없이 Map, Set, List 컬랙션을 지원한다.

자바스크립의 Collection

set

list 와 다르게 같은 value를 중복 포함할 수 없다. 때문에 이미 존재하는 값을 추가하려고 하면 아무 일도 없다. 또 index로 value에 접근할 수 없다.
예 ) indexof(), has()

사용 예)

let set = new Set();

set.add(5);
set.add("5");
set.add('ok');
set.add(true);
set.add(5);

console.log(set.size); //4

Map

map 은 자바스크립트의 key - value 페어로 이루어진 컬렉션이다.
key를 이용해서 valiue를 get,set 할 수 있다.
key는 중복될 수 없다. 하나의 key에는 하나의 value만 가능

lodash method

collection 관련 method

fillter() : 특정 조건을 만족하는 모든 요소를 추출하는 메서드

map() : 배열 안의 객체들의 요소 중, 특정 요소만 빼서 만들고 싶을 때 사용.

map은 Key - Value의 쌍으로 이루어진 컬렉션이다, 자바스크립트에는 이미 key-value로 이루어진 Object가 있는데 Map 이 생긴 이유는 일반 객체로는 객체의 키로 내장 메서드의 이름을 사용하면 이름 충돌이 일어날 수 있고 속성의 key는 항상

includes() : 해당 collection에 target값이 있는지 판별

constructor() : 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 메서드, 다른 모든 메서드 호출보다 앞선 시점에 인스턴스 객체를 초기화할 떄 수행할 초기화 코드를 정의한다,

사용법 (출처 MDN)

 class polygon {
 	constructor() {
    	this.name = 'plygon';
    }
 }
 
 const polyl = new pilygon();
 
 console.log(polyl.name);
 // output: "polygon"