JS 이론: 모던 JS 핵심 가이드

책에 따르면 this는 자바스크립트에서 스코프 다음으로 중요한 내용이라고 한다. 볼 때마다 헷갈리는 개념이므로 이번 기회에 예제와 함께 확실히 정리하려 한다.이 예제에서 객체의 메서드 내부의 this는 자신이 포함된 메서드를 보유한 객체(myCar)에 자동적으로

대망의 화살표 함수에서의 this이다. 이 개념도 일반 함수에서의 this와 매번 헷갈리는데 책을 읽으면서 이번에 확실히 정리해본다.

ES6에서는 함수에 들어오는 인수의 초기값을 인수 자리 내부에서 바로 설정할 수 있다.인수의 값은 기본적으로 앞에서부터 차례대로 매칭된다.초기값이 있을 경우 새롭게 들어온 매칭되는 값으로 덮어씌워진다.다음과 같이 매개변수가 하나 덜 들어오면 어떻게 될까?total과 두

실제 코딩을 할 때 매우 편할 것 같은 객체 디스트럭처링과 배열 디스트럭처링, 그리고 ES6에서의 변수 교환(swap)에 대해 알아보겠다.다음과 같은 객체가 있다고 가정하자.ES5까지는 다음과 같이 객체에서 변수를 생성했다.딱 봐도 객체의 속성(키) 이름과 변수명이 겹

알고리즘 문제풀이를 하며 배열 메서드는 정말 자주 썼던 것 같다. 공부하기 전, for문 중에는 for-of 문을 많이 사용했고 for-in은 들어만 보았다. 이번 기회에 이 내용들을 확실히 정리해본다.

이번 챕터에서 정리할 것은 spread 연산자와 rest 연산자, 그리고 객체 리터럴 표기법에 관련한 내용이다. 모던 JS 핵심 가이드 책을 읽으면서 공부한 내용을 실제 프로젝트 리팩토링을 할 때 적용하는 경험을 하게 되니 이론 공부가 매우 유용하다는 생각이 든다. 배

예전에 자바를 잠깐 찍먹했을 때 클래스가 '객체'라는 말을 들어봤었다. 하지만 자바스크립트에서의 클래스는 '객체 지향 모델'을 위한 개념이 아니다. 그동안 클래스 코드를 볼 때마다 헷갈리고 어려웠는데 책을 통해 공부하고 나니 그리 복잡한 개념이 아니라는 걸 알게 됐다.

자바스크립트는 기본적으로 동기적으로 작동한다. 왜냐하면 작업을 처리하는 콜 스택이 하나여서 한 번에 하나의 작업만 처리할 수 있기 때문이다.따라서 기존의 자바스크립트에서 fetch와 같은 비동기 로직은 제대로 작동하기 어렵다.다음 예문을 보자.한 작업이 완료된 뒤에야

제너레이터 몰랐는데 자바스크립트에도 제너레이터라는 개념이 있었다. 원하는 만큼 코드를 시작 또는 중지할 수 있는 함수라고 한다. .next()를 사용하고 yield로 값을 반환하는 형태가 마치 redux-saga나 다른 middleware에서 본 것 같다. .next(

프록시(Proxy)라는 건 네트워크나 CORS 에러 처리 때 들어본 개념이다. 자바스크립트 언어 자체에도 프록시라는 개념이 있다니 신기했다. 프록시는 어디에 쓰이든 항상 '중간'에서 뭔가를 해주는 역할인 것 같았다. MDN의 프록시의 정의부터 시작해보자.프록시 객체는

각 원소를 **고유하게(= 중복 없이)** 저장하는 객체이다. Set에는 키가 없다. 따라서 .keys()와 .entries()의 결과는 .values()와 똑같다. (= value만 출력함)Set은 반복이 가능하다. 반복하는 방법에는 2가지가 있다..values()로

배열에 특정 원소가 포함되어 있는지 여부를 반환한다.includes()의 인자를 통해 값 검색을 시작할 인덱스를 지정할 수 있다.첫 번째 항에 검색할 원소, 두 번째 항에 검색을 시작할 인덱스를 전달한다.주의: 검색을 시작하고 나서는 무조건 오른쪽 방향으로 검색한다.(

async/await로 바꾸려면 다음과 같은 단계가 필요하다.async를 붙인 비동기 함수 선언안에서 함수를 호출할 때 앞에 await 붙이기then 모두 지우기선언한 비동기 함수 호출기본 프로미스 코드와 마찬가지로 try/catch 문을 사용한다.

Array.flat은 원본 배열을 변경한다.Array.flatMap은 원본 배열을 건드리지 않고 새 배열을 반환한다.

드디어 모던 자바스크립트 핵심 가이드의 마지막 단원이다. 정답지 뒤에 ES2021 내용이 있지만 거기엔 replaceAll 메서드 정도만 있어서 이 단원까지만 정리하고 책을 마무리하려 한다. (드디어 👊)