✍ 공부/JavaScript

[ 모던 자바스크립트 Deep Dive ] 쉼표 연산자

1. 쉼표 연산자 쉼표 연산자(,)는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다 var x, y, z; x = 1, y = 2, z = 3; // 3 x = (2, 3); console.log(x); // expected output: 3 var a, b, c; a = b = 3, c = 4; // 콘솔에는 4를 반환 console.log(a); // 3 (제일 왼쪽) var x, y, z; x = (y = 5, z = 6); // 콘솔에는 6을 반환 console.log(x); // 6 (제일 오른쪽) 2. 연산 후 반환 값을 반환하기 이전에 연산을 수행할 때도 쉼표 연산자를 사용한다. 쉼표 연산자는 마지막 표현식의 결과만 반환..

[ 모던 자바스크립트 Deep Dive ] 동등/일치 비교 연산자

1. 비교 연산자 비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다. 2. 동등/일치 비교 연산자 동등 비교 연산자(loose equality)와 일치 비교(strict equality)연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다. 그러나 둘은 비교 엄격성의 정도가 다르다. 동등 비교 연산자 : 느슨한 비교 일치 비교 연산자 : 엄격한 비교 비교 연산자 의미 사례 설명 부수 효과 == 동등 비교 x == y x와 y의 값이 같음 x === 일치 비교 x === y x와 y의 값과 타입이 같음 x != 부동등 비교 x != y x와 y의 값이 다름 x !== 불일치 비교 x !== y x와 y의 값과 타입이 다름 x 동등 비교 연..

[ 모던 자바스크립트 Deep Dive ] 변수와 값의 재할당

0. 용어 정리 런타임 : 소스코드가 순차적으로 실행되는 시점 호이스팅 : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 특징 재할당 : 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것 가비지 콜렉터 : 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능. 더 이상 사용되지 않는 메모리란, 어떤 식별자도 참조하지 않는 메모리 공간을 의미. 자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어로서 가비지 콜렉터를 통해 메모리 누수(memeory leak)을 방지한다. 매니지드 언어 : 메모리의 할당 및 해제를 위한 메모리 관리 기능을 언어 자체가 담당한다. 개발자의 직접적인 메모리 제어가 불허된다. 개 언매니지..

[ 모던 자바스크립트 Deep Dive ] 들어가며

모던 자바스크립트 Deep Dive는 진작 사놓고 찔끔찔끔 읽던 책이었다. 약 900쪽이라는 두께가 주는 압박이 생각보다 컸는지 읽기가 너무 어려웠던 책. 두껍고 무겁고, 접근하기 어렵게만 느껴지는 책은 후루룩 읽는 것이 좋다는 것을 알고 있다. 처음부터 모든 것을 이해하려 하지 않고, 빠르게 접근하고 눈에 익힌 후 이해를 시작하는 것. 두꺼운 책과 싸우는 내 스킬이다. 딥 다이브도 같은 방식으로 후루룩 읽어내려갔다. 재미있는 부분이나 잘 모르는 부분을 표시해두면서 1회독을 했으니, 이제는 내가 표시해둔 부분을 다시 보면서 블로그에 기록해봐야지! 그래서 기록이 책의 내용처럼 술술 읽히거나 이어지는게 아니라 단편적인 정보들만 담고 있을 수도 있을 것 같다. 예를들어 변수 값의 재 할당에서 일어나는 메모리 ..

(JavaScript) 자바스크립트 async / await / promise

0. 동기? 비동기? 자바스크립트에서 쓰는 일반적인 함수는 동기적으로 기능한다. 하지만 가끔은 비동기적으로 써야 할 때가 있다. 동기와 비동기는 어떤 차이가 있을까? 동기 한번에 한 작업만 수행할 수 있다 흐름을 예측하기 쉽다 (호출 순서대로 작동한다) 비동기 동시에 여러 작업을 수행할 수 있다 흐름을 예측하기 어렵다 (무엇이 먼저 완료될 지 보장이 불가능하다) ✍ 비동기 setTimeout의 동작 또한 비동기로 동작한다고 볼 수 있다. 함수를 호출하고, 설정 시간 동안 기다리는 시간은 다른 흐름에 영향을 주지 않기 때문이다 만약 console.log('사과')를 하는 함수의 설정 시간을 3초로 잡고, console.log('옥수수')를 하는 함수의 설정 시간을 1초로 잡은 후 사과를 찍는 함수 호출 옥..

이벤트 제어하기. 쓰로틀링(throttling)과 디바운싱(debouncing)

✍ 쓰로틀링과 디바운싱 개념 : 디바운싱과 쓰로틀링은 자주 사용되는 이벤트나 함수의 빈도를 줄여 성능상 유리함을 가져오기 위한 개념이다. 📌 디바운싱 연속으로 호출되는 함수(이벤트)에서 가장 마지막(혹은 처음) 이벤트만 실행되도록 한다. == 입력(이벤트)가 끝난 후에 요청을 보내면 된다. 검색 시 많이 사용 이벤트 발생 시점 입력이 끝날 때까지 무한정 대기 이벤트 발생 시(ex onChange) 타이머를 설정해두고, 200ms(설정 시간) 이전에 타자 입력(이벤트)가 발생하면 이전 타이머는 클리어, 새로운 타이머를 설정해준다. 설정 시간 이전에 이벤트가 발생하지 않으면 이벤트 발생 끝 => 코드가 실행된다. 📌 쓰로틀링 연속으로 호출되는 함수(이벤트)를 일정 시간 동안에 한번씩만 실행되도록 한다. ==..

JavaScript 자바스크립트 이벤트 리스너(eventListener)

나.. 이벤트리스너 모르네 ✍ addEventListener EventTarget 인터페이스의 메서드. 지정한 유형의 이벤트를 수신할 때마다 호출할 함수를 설정한다. = 호출 시 인자를 전달받는다. 일반적인 대상 Element, Document, Window지만 XMLHttpRequest 같이 이벤트를 지원하는 모든 객체가 대상이 될 수도 있다. target.addEventListener('click', function(){}) 이벤트명을 나타낸 문자열 함수 (콜백함수) 옵션 ( capture, once, passive, signal ... ) 기존 이벤트 핸들러 (onclick)등을 사용하는 것에 비해 addEventListener을 사용하면 이전에 추가한 이벤트 핸들러를 제거할 수 있응 대응 메소드 ..

Babel이란 무엇일까?

0. 바벨이란? 바벨은 입출력이 모두 자바스크립트인 컴파일러다. ( 소스 대 소스 컴파일러 ) ECMAScript2015+ 코드를 모든 모든 브라우저에서 동작하도록 호환성을 지켜준다. JSX 문법, 타입스크립트(정적 타입 언어), 코드 압축 등도 포함한다 📌 알고 넘어가기 컴파일러 한 언어로 작성된 소스 코드를 다른 언어로 변환한다 트랜스파일러 한 언어로 작성된 소스 코드를 다른 소스 코드로 변환하는 것 추상화 수준을 유지한 상태로 코드를 변환한다. 트랜스파일 후에도 여전히 코드를 읽을 수 있다 1. 사용 이유 브라우저마다 사용 언어가 약간씩 달라서 코드를 이해하지 못하는 브라우저가 있을 수도 있다 컴파일러인 바벨은 ES2015+ 이상의 코드들을 모든 브라우저에 맞게 동작하게 도와준다. 따라서 크로스 브..