[오분자스 - 개념편]
1.#1. Javascript 엔진
: 개발자가 작성한 자바스크립트 코드를 컴퓨터가 이해할 수 있는 머신코드로 변환해준다.자바스크립트 코드를 머신 코드로 바꾸는 방법은 크게 2가지가 있다.1) interpret자바스크립트 코드를 한줄씩 순서대로 머신코드로 변환.→ 실행에 필요한 시간이 짧지만, 실행 시간
2.#2. Javascript 런타임
자바스크립트가 실행될 수 있는 환경을 의미한다.ex) 웹 브라우저, node.js웹 브라우저에서 자바스크립트 런타임: V8(JS Engine) + WebAPInodejs에서 자바스크립트 런타임: V8(JS Engine) + libuv자바스크립트 런타임의 특징1) 자바스
3.#3 실행 컨텍스트
: 자바스크립트에서 함수가 실행될 때 상황(맥락)자바스크립트에서 함수가 실행될 때 함수가 바로 실행되는 것이 아니라 몇 가지 준비단계를 거친뒤에 실행된다.상황실행 순서1\. main. 메인 함수가 먼저 실행된다.( = 준비 단계)2\. 함수 b가 실행된다.( = 준비
4.#4 Types in Javascript
타입 자바스크립트는 약 타입이면서 동적 타입 언어이다. 약타입: 변수에 타입을 지정하지 않아도 된다.
5.#5 Pass by value, Pass by reference
자바스크립트에서 타입은 primitive type과 reference type 두 가지가 있다. primitive 타입은 변수에 할당된 값을 저장하고, reference type은 변수가 저장된 메모리의 주소값을 저장한다.primitive 타입은 값을 저장하고 값을
6.#6 Pass by value in reference type
객체는 기본적으로 주소값을 전달한다.그렇기 때문에 같은 값을 갖는 새로운 객체를 만들기 위해서는 다른 방법이 필요하다. 1) 얕은 복사 1-2) 얕은 복사의 한계...(spread) 연산자를 이용해 객체를 복사하는 방법을 보았다. 이 방법으로 객체를 복사하는데는 한계
7.#7 자바스크립트 함수
자바스크립트에서 함수는 객체이다.함수도 사실 생성자 함수를 가지고 만들어진다.따라서, 우리는 함수를 객체처럼 변수에 할당할 수도 있고,인자로 전달할 수도 있으며 함수에서 함수를 반환(return)할 수도 있다.Higher Order Function(고계 함수)인자로 함
8.#8 클로저(Closure)
자바스크립트에서 중요한 개념을 꼽을때 빠지지 않는 클로저이다. 클로저란 스코프 체인으로 연결된 부모 함수의 변수(lexical scope)를 자식 함수가 기억하고 있는 자바스크립트 함수의 특성을 말한다.내가 클로저를 처음 접했을때 의문을 가졌던 부분은이렇게 해버리면
9.#9 Prototype(1)
프로토타입은 자바스크립트에서 클로저와 함께 가장 중요한 개념이 아닐까 생각한다.먼저, \_\_proto\_\_는 proto로 \_빼고 표기하겠다.(마크다운 때문에...)Prototype & Protoprototype을 한 줄로 설명하면, 함수가 자식(함수가 만든 객체)
10.#10. Prototype(2)
지난 시간에 생성자 함수 Array를 가지고 prototype과 proto의 관계를 살펴보았다.이번 시간에는 생성자 함수 Function, Object을 살펴보자.1\. Function: 함수를 생성하는 생성자 함수이다.함수 a의 proto는 무엇일까? a의 부모인 F
11.#11. Prototype(3)
Function(함수) → Array(생성자 함수이면서 자식 객체) → arr(자식 객체)인 상황에서프로토타입 관계를 살펴보도록 하자.상황을 정리하면 코드로 나타내면 아래와 같다.추가로 Object와 Function의 prototype 관계도 살펴보자.여기서부터는 조금
12.#12. 객체 지향 프로그래밍(1)
자바스크립트는 함수형 프로그래밍과 객체 지향 프로그래밍 둘 다 가능한 멀티 패러다임 언어이다. 이번에는 앞에서 배운 프로토타입 개념을 이용해 어떻게 자바스크립트에서 OOP가 구현되었는지 알아보려고 한다.1\. Object(객체)OOP에 대해 설명하기 전에 먼저, 객체가
13.#13. 객체 지향 프로그래밍(2)
앞 포스트에서 객체와 생성자 함수가 무엇인지 알아보았다. 이번에는 prototype이 어떻게 활용되는지 알아보도록 하자. 1\. prototype 지난 시간의 예제이다.이렇게 객체를 생성했을때 발생하는 에러는 없지만, 생성된 모든 객체가 sayHello라는 동일한 메소
14.#14. 객체 지향 프로그래밍(3)
지난 시간에는 prototype을 활용해서 메소드의 중복을 피하는 방법을 알아보았다.이번에는 prototype에 메소드를 정의할 때 주의할 점에 대해 알아본다. 1) 프로토타입에 메소드에서 객체에 접근하려면 this 키워드를 사용한다.실행 컨텍스트를 설명하면서 함수에서
15.#15. 객체 지향 프로그래밍(4)
이번에는 OOP의 가장 큰 특징 중 하나인 상속(Inheritance)에 대해 포스팅 해보겠다.설명에 앞서, ES6에 도입된 class에 대해 살짝 언급해야겠다. 실제로는 OOP를 구현할때 prototype 대신 class를 많이 사용한다.그 이유는 당연히 class를
16.#16. Class Syntax(1)
계속해서 OOP 시리즈이지만 너무 길어지는 감이 있어서 Class Syntax로 제목을 바꿨다.어쨌든 이번 시간에는 객체 지향 프로그래밍의 꽃인 클래스 문법에 대해 알아보도록 하자.1\. Class클래스 문법을 프로토타입 문법과 비교해보자.일단 아래는 프로토타입 문법으
17.#17. Class Syntax(2)
Class Syntax(2) 이번에는 클래스 문법으로 클래스를 상속하는 방법에 대해 소개해보려한다. 아래는 지난번에 소개했던 prototype으로 상속하는 코드이다. Book이 Magazine에게 상속해주고 있다. ` 동일한 코드를 클래스 문법으로 바꿔보겠다.
18.#18. Class Syntax(3)
이번에는 OOP의 특징에 대해 소개하면서, OOP 시리즈를 마무리해야겠다.OOP의 주요 컨셉트(1) Class & Object클래스로 인스턴스(객체)를 만들어낸다.(2) Encapsulation(캡슐화)클래스 안에 property와 메소드를 함께 묶어서 보관할 수 있다
19.#19. 비동기 프로그래밍(1)
이제부터는 비동기 프로그래밍에 대해 설명해보려고 한다. 이전에 자바스크립트는 싱글 스레드지만 비동기 작업을 수행하는 worker 스레드를 지원한다고 언급했던 적이 있다.이 문장이 무엇을 의미하는지 지금부터 천천히 알아가보자.1) 메인 스레드자바스크립트는 코드를 실행하는
20.#20. 비동기 프로그래밍(2)
이번 포스트에서는 자바스크립트에서 어떻게 비동기 작업을 처리하는지 알아보고, callback 기법에 대해서 소개하겠다.먼저, 비동기 작업은 setTimeout으로 처리한다.여기까지는 그냥 설명을 패스하겠다.이제 본격적으로 비동기 작업을 처리하는데 있어 callback이
21.#21. 비동기 프로그래밍(3)
지난 시간에 callback을 이용해 비동기 작업에서 순서를 보장하는 방법을 알아보았다. 그런데 callback을 사용한 코드가 중첩되면 가독성이 떨어지는 문제가 있었다.그래서 오늘은 callback hell을 해결할 수 있는 방법을 소개하도록 하겠다.지난 시간에 ca
22.#22. 비동기 프로그래밍(4)
오늘은 then chain을 제거하는 방법에 대해 소개하겠다.promise가 중첩되면 이렇게 then, then, then, then이 계속 생기는데 이걸 then chain이라고 부른다고 했었다. Async & Await: ES8에 도입된 최신 비동기처리 기법이다.
23.#23. 비동기 프로그래밍(5)
오늘부터 다음 시간까지는 비동기 작업 처리에 있어 심화된 내용을 살펴보도록 하고, 다음 포스트를 마지막으로 비동기 프로그래밍 시리즈를 마무리 해야겠다. callback 큐의 우선순위 지금까지 배운 내용을 바탕으로아래 코드의 실행 순서를 추론해보자.결과를 보니 prom
24.#24. 비동기 프로그래밍(6)
이번 포스트에서는 비동기 작업을 처리하는 몇 가지 방법을 소개하도록 하겠다. 아마 비동기 시리즈의 마지막 포스트가 될 것 같다.이전 시간까지는 주로 비동기 작업의 순서를 보장하는 방법에 대해서 이야기했었다.그런데 어떤 경우에는 작업들간의 순서는 중요하지 않고, 단순히