0. 들어가기 전자바스크립트 개발자가 키보드에서 가장 많이 누르는 키는 아마 마침표일 것 같다(user.name, user.profile.image, ...등). 데이터 구조가 깊어질수록 코드는 지저분해지고 변수명은 길어진다.구조 분해 할당은 이 복잡한 객체나 배열을 분해해서, 원하는 알맹이만 쏙쏙 뽑아 변수에 담는 언박싱 기술이다.1. 객체 분해 할당: 키(key)를 공략할 것1-1. 이름 바꾸기(Renaming)const response = { data: { id: 1, title: 'JS Deep Dive' }, status: 200}// 1. 기본 사용const { status } = response;// 2. 이름 바꿔서 꺼내기const { data: article } = response;c..

0. 들어가기 전Java나 C++에서 this는 언제나 '자기 자신이 속한 객체(인스턴스)'를 가리킨다. 하지만 자바스크립트의 this는 똑같은 함수 안에 있더라도 누가, 어떻게 호출했느냐에 따라 가리키는 대상이 시시각각 변한다.function whoAmI() { console.log(this);}whoAmI(); // window (또는 undefined)const obj = { whoAmI };obj.whoAmI(); // objnew whoAmI(); // whoAmI {} (새로운 객체)이걸 모르고 코드를 짜면 내 데이터가 엉뚱한 곳에 저장되거나 TypeError: Cannot read property of undefined라는 지긋지긋한 에러를 만나게 된다.1. this를 결정하는 4가지 규칙..

0. 들어가기 전Java나 C# 같은 객체 지향 언어를 배우고 온 사람들은 자바스크립트의 class 문법을 보고 편안함을 느낀다.class User { constructor(name) { this.name = name; } sayHello() { console.log(`Hello, ${this.name}`); }}const me = new User("Gemini");하지만 자바스크립트는 클래스 기반 언어가 아니다. 자바스크립트에서의 class는 개발자를 안심시키기 위한 장치일 뿐이지 막상 까서 보면 프로토타입(Prototype)이라는 기묘한 시스템이 돌아가고 있는 것을 알 수 있다.1. 프로토타입 필요 이유클로저에서 메모리의 효율성에 대해 고민했었는데, 객체 생성도 마찬가지다. 예시로 ..

0. 들어가기 전저번 글에서도 언급했지만, 자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나밖에 못한다. 만약 서버 응답을 멍하니 기다린다면 브라우저는 멈춰버릴 것이다. 그래서 자바스크립트는 일단 던져놓고, 나중에 콜백하는 전략을 택했다.1. 콜백과 제어권 역전초창기 자바스크립트는 비동기 처리를 위해 함수를 파라미터로 넘겼다.getData(function(response) { parsedData(rseponse, function(parsed) { saveData(parsed, function(result) { console.log('성공'); }); });});흔히 말하는 콜백 지옥이다. 가독성이 나쁜 건 둘째 치고 진짜 문제는 신뢰성에 있다. getData라는 함수에게 콜..

0. 들어가기 전이전 글들에서 "자바스크립트는 싱글 스레드 언어"라고 배웠다. 즉, 콜 스택이 딱 하나뿐이라 한 번에 한 가지 일만 처리할 수 있다는 뜻이다.그런데 우리가 웹 사이트를 이용할 때, 서버에서 데이터를 받아오는 동안에도 스크롤을 내리거나 버튼을 클릭할 수 있다. 만약 자바스크립트가 진짜 혼자서 모든걸 처리한다면, 데이터를 받아 오는 3초 동안 브라우저는 멈춰야하는게 정상인데도 말이다.멈추지 않고 여러 일을 동시에 하는 것처럼 보이는 건 이벤트 루프(Event Loop) 가 있기 때문이다.1. 런타임 환경자바스크립트 엔진(V8 등) 혼자서는 비동기 처리를 못한다. 브라우저라는 런타임 환경이 함께 일하기 때문에 가능한 것이다. 이들의 역할 분담을 이해하는 것이 첫 번째 단계이다.콜 스택(JS 엔..

0. 들어가기 전"함수의 실행이 끝나면, 실행 컨텍스트는 스택에서 제거되고 그 안의 변수들은 메모리에서 사라진다."지난 포스팅을 통해 배운 규칙이다. 용무가 끝난 데이터는 방을 뺴주는 형태이기 때문에 매우 합리적인 메모리 관리 방식인 것을 알 수 있다. 그런데 자바스크립트에는 이 규칙을 보란 듯이 무시하고 함수가 죽었는데도 여전히 살아있는 변수들이 존재한다.이것을 클로저(Closure) 라고 부른다.1. 클로저 간단 확인function outerFunc() { let outerVar = 10; // outerFunc의 지역 변수 function innerFunc() { console.log(outerVar); // 내부 함수가 외부 변수를 참조 } return innerFunc; // 내부 ..

0. 들어가기 전자바스크립트라는 언어를 학습할 때, 단순 문법 체계는 알아도 내부적으로 코드가 어떻게 처리되는지 모르는 경우가 있다.변수 선언보다 위에서 호출햇는데 에러가 나는 경우 (호이스팅)변수가 안읽히는 경우 (스코프)null과 undefined의 혼동위의 질문들의 해답은 실행 컨텍스트에 있다.1. 콜 스택(Call Stack)자바스크립트는 싱글 스레드(Single Thread) 언어다. 한 번에 하나의 일만 처리할 수 있다는 뜻이다. 이 작업을 처리하는 공간이 바로 콜 스택(Call Stack) 이다.코드 예시function multiply(x, y) { return x * y;}function printSquare(a) { const s = multiply(a, a); console.log..