Javascript/ES5 & ES6

debounce/throttle (lodash)

debounce? debounce란 연속되는 함수의 호출(이벤트 리스너) 흐름 속에서 마지막 함수 호출(or 처음)만 일어나게 하는 것이다! throttle? throttle이란 일정한 주기마다 함수(이벤트 리스너)를 한번만 실행시키는 것이다 debounce와 throttle이 없을 때 debouce와 throttle 없이 평소처럼 input, resize, scroll 같이 이벤트 핸들러가 굉장히 짧은 주기로 실행되는 이벤트를 사용하면 저하를 불러올 수 있다! 예를 들어, 어떠한 요소의 input/scroll/resize 이벤트의 이벤트 핸들러를 통해 가장 마지막 시점의 정보만 필요하다면 그 이전의 정보는 모두 필요 없게 되고 이러한 경우 debounce를 사용하면 쉽게 맨 마지막 시점의 정보만 얻을 ..

This, 리액트에서의 bind()

This this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. 즉, this는 함수가 호출되는 방식에 따라 동적으로 결정된다! 자바스크립트에서 this는 크게 4가지로 사용될 수 있다. 일반 함수 내부 (전역 객체 바인딩) 메서드 내부 (메서드를 호출한 객체 바인딩) 생성자 함수 (생성자 함수가 생성할 인스턴스 바인딩) apply/call/bind 호출 (메서드에 첫 번째 인수로 전달하는 객체 바인딩) 일반 함수 내부 this 일반 함수 내부에서 호출한 this는 전역 객체에 바인딩된다. var a = 4 function duck(){ console.log(this.a); } duck(); //4 메서드 내부 this 메서드 안에서 this를 호출하면 this는 메서드..

빽틱 `

왜 씀? 빽틱 (`)를 사용하면 문자열에 자바스크립트 코드를 적절하게 사용할 수 있다. ` `로 문자열을 감싼 후에 그 안에 ${ }를 넣어 자바스크립트 코드를 감싸서 사용할 수 있다. 기존에 아래와 같이 문자열을 사용했다면 let a = 4; console.log('a는 ' + a + '입니다') //a는 4입니다. 빽틱과 ${ }를 적절하게 사용해서 간단하게 표현할 수 있다. let a = 4; console.log(`a는 ${a}입니다`) //a는 4입니다. 또한, 기존에 줄바꿈 문자인 \n을 사용하지 않고 빽틱 안에서 엔터를 쳐서 간단하게 사용할 수 있다. let a = 4; let b = 5; console.log('a는 ' + a + '\n' + 'b는 ' + b) console.log(`a는..

Scope, =, 삼항연산자

Scope ? 우리가 어떤 변수를 선언했을 때, 그 변수를 사용할 수 있는 유효범위를 Scope라고 부른다. var: 함수 단위 let: block 단위(변수: let으로 선언한 변수는 값이 변할 수 있다.) const: block 단위(상수: 한번 선언한 값은 바꿀 수 없다.) block이란 중괄호 안에 든 내용을 의미한다. function scope(){ const a = 0; let b = 0; var c = 0; if(a === 0){ const a = 1; let b = 1; var c = 1; console.log(a, b, c); // 1, 1, 1 } // let과 const는 if문 안쪽 내용이 바깥 내용에 영향을 끼치지 않음! // var는 함수 단위라서 if문 밖에서 선언한 값이 변함..