본문 바로가기

Books/코어 자바스크립트

 (7)
07. 클래스 2020. 5. 22. 16:44 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. ES6에 클래스 문법이 추가됐지만 클래스 문법은 Syntax Sugar일 뿐, 원래 자바스크립트는 프로토타입 기반 언어로써 상속을 제공하고 있지 않으므로 기존에는 어떻게 구현하고 있는지 알 필요가 있다. 1. 객체 지향 프로그래밍(Object Oriented Programming) 책에서는 클래스와 인스턴스에 대해 현실세계의 개념을 예시로 들어 설명하고 있지만 클래스 뿐만 아니라 객체 지향 프로그래밍을 전반적으로 정리해보기로 하였다. 객체 지향 프로그래밍(이하 OOP)란, 현실세계의 일련의 사건들을 객체로 모델링하여 이들 간의 상호작용을 객체..
06. 프로토타입 2020. 4. 16. 15:24 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 2019년 6월 NHN OOP 교육에서 배운 프로토타입 내용 또한 첨가하였습니다. 2022-02-20 추가 이전에는 JS는 객체지향프로그래밍의 상속을 구현하기 위해 프로토타입을 지원한다고 생각했는데, 지금 읽어보니 전혀 아니다..!! 프로토타입, 즉 원형이 되는 객체를 기반으로 하되, 문맥(context)에 따라 의미를 다르게 가져갈 수 있음을 구현한 것이다. 임성묵 개발자님의 자바스크립트는 왜 프로토타입을 선택했을까 참고 복기하기 전 주절주절... 이 책을 세 번 읽으면서, 또 OOP 문제를 내·외부에서 설계해보면서도 프로토타입이란 개념은 ..
05. 클로저 2020. 4. 12. 20:47 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 1. 클로저의 원리 MDN에서는 클로저를 다음처럼 설명하였다. A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). 클로저는 원리를 알아야 그 의미를 이해하기 수월하다. 다음 예시를 보면 var outer = function () { var a = 1; var inner = function () { console.log(++a); } inner(); ..
04. 콜백 함수 2020. 4. 4. 15:44 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 1. 콜백함수란? 콜백함수는 어떤 함수의 인자로 활용되어, 그 제어권또한 함께 위임받은 함수다. 우리가 흔히 addEventListener, forEach와 같은 반복 메소드 등의 첫번째 인자로 넘기는 함수가 곧 콜백함수로, 원하는 시점(버튼 클릭 등)에 특정 함수를 호출할 수 있도록 할 수 있다. 2. ★ 콜백함수는 함수다. 너무 당연한 말이지만 이는 매우x100 중요한 의미이다. 다음의 메소드를 콜백함수로 넘기면 (1)과 (2)의 this는 각각 무엇일까? var obj = { name: "juj", func: function (val, ..
03. this와 객체 2020. 3. 5. 16:44 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 객체는 코어 자바 스크립트에서 소개되어있지 않은 내용이나, 2019년 6월 NHN OOP 교육을 복기하기 위해 추가하였습니다. 프로토타입과 this를 이해하는 데 배경 지식이 됩니다. 1. this Binding 요약 3장은 미리 결론을 짓고 뒷부분에서 좀 더 깊이 뛰어드는 게 개인적으로 이해하기 편했다. 명시적인 thisBinding이 없을 때 전역공간: 전역 객체(window, global) 함수: 자기 자신을 호출한 주체 (===전역객체) 메소드: 닷노테이션(.) 혹은 []가 붙으면 메소드의 주체가 되는 객체 콜백함수: setTimeou..
02. 실행 컨텍스트 2019. 12. 31. 22:01 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 수정 이력 2021/06/12 그림 및 설명 수정 1. 실행 컨텍스트 실행 컨텍스트란 실행할 코드에 줄 환경 정보들의 객체를 말한다. 이 컨텍스트들을 콜 스택에 push해두고, top에 위치한 컨텍스트와 관련된 코드를 실행한다. 이러한 컨텍스트를 구성할 수 있는 대표적인 방법은 함수를 호출하는 것이다. var name = 'newjeong'; // --- (0) function hello (a) { // --- (2) function sayhello () { // --- (4) console.log('hello, ' + name); // --..
01. 데이터 타입 2019. 12. 31. 00:29 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 수정 이력 2021/06/06 그림 및 설명 수정 1. 변수 저장 자바스크립트는 메모리 관점에서 어떻게 변수를 저장할까. 쉽게 생각하면 메모리 영역을 저장되는 값에 따라 두 부분으로 나누어 저장하며 한 영역은 변수의 정보를, 또 하나의 영역은 실제 데이터를 저장하고 있다. 각각 변수 영역, 데이터 영역으로 부르기로 한다.* * 실제로는 변수 영역은 stack에, 데이터 영역은 heap 영역에 저장된다. let a = 10; 예제 1. 예제 1과 같이 a를 선언하면, 각 영역에 어떻게 저장될까. 그림 1과 같이, 변수 영역에는 식별자와 실제 데..

티스토리툴바