목록FrontEnd/JavaScript Basics (19)
Muscardinus
Single Threaded Language JS는 Single Threaded 언어이다. 이것이 무엇을 뜻하냐면, 한번에 한 가지 일 밖에 못 한다고 생각하면된다. 하나의 Call Stack만이 존재하고 그러기에 Synchronous Language라고 부른다. Synchronous 그렇다면 Single Threaded Language이면 어떠한 단점이 있을까? 예를 들어보자, 만약 우리가 웹페이지를 방문하였는데, Alert 창이 띄워지는 상황이 있다고 생각해보자. 우리는 그 Alert의 OK 버튼을 누르기 전 까지는 다른 어떠한 작업도 할 수 없다. 만약, 모든 것이 Alert 처럼 자신의 행동이 끝나기 전 까지는, 다른 행동을 못하게 막아놓는다면 이용에 상당한 불편함이 있을 것 이다. 이러한 것을 ..
Closure는 함수로 하여금 자신의 Scope을 감싸고 있는 함수의 변수에 접근을 할 수 있게 돕는다. JS 엔진에서는 Call Stack 밖으로 나가고 나서도 Garbage Collection으로 이 변수들을 없애지 않고 남겨두기 때문에 가능한 것 이다. function a() { let grandpa = "grandpa"; return function b() { let father = "father"; let random = 12345; // not referenced, will get garbage collected return function c() { let son = "son"; return `closure inherited all the scopes: ${grandpa} > ${father..
Higher Order Function이란 함수를 argument로 받거나 return해주는 함수를 말한다. function multBy(a) { return function (b) { return a * b; }; } // can also be an arrow function const multiplyBy = (a) => (b) => a * b; const multByTwo = multiplyBy(2); const multByTen = multiplyBy(10); multByTwo(4); // 8 multByTen(5); // 50 이러한 HOF를 통하여, 우리는 중복되는 함수를 적게 작성할 수 있다. 쉽게 말해서 DRY(Do Not Repeat Yourself) 원칙을 지킬 수 있다
Constructor Function new 키워드와 함께 어떤 함수를 실행할 경우, 이 함수를 생성자 함수라고 한다. function Animal (name, age) { this.name = name; this.age = age; } const cat = new Animal("jane", 3); console.log(cat); // ? JS에서 보통 함수의 return 값이 명시되지 않으면, 기본적으로 undefined가 반환된다. 하지만 위의 코드를 실행시키면 알 수 있듯이, 특정 객체가 반환된다. 함수 뿐만 아니라, 거의 모든 것이 생성자를 통해서 선언이 가능하다. 심지어 우리가 알고 있는, numbers 와 string도 그렇다. const obj = {}; const arr = []; cons..
Lexical Environment? Lexical Environment란 JS Engine이 현재 읽고 있는 코드의 Scope 혹은 Environment를 말한다. 새로운 Lexical Environment는 괄호({})가 있을 때 마다 생성된다. Execution Context가 JS Engine에게 현재의 Lexical Environment를 알려주는 역할을 하고, 이에 맞게 사용할 수 있는 변수를 결정한다. Lexical Environment는 쉽게 생각해서 하나의 새로운 세계라고 생각하면 된다. function one() { var isValid = true; // local env two(); // new execution context (새로운 세계) } function two() { var..
Hoisting? Hoisting이란, 변수 및 함수를 Compile 단계에서 memory에 넣는 과정이다. JS에서는, function은 완전히 hoisting되고, 변수는 var로 선언된 변수는 hoisting 되고, undefined로 초기화된다. 완전한 hoisting이 아니다. let 과 const 변수는 hoisting이 되지만, undefined로 초기화 조차 안된다. var 보다 더 불완전한 hoisting이다. var로 선언된 변수는 따라서, code상으로 값이 할당되는 구간 전 까지는 undefined의 값을 가지게 된다. 반면, function의 경우, 완전히 hoisting이 되었기에, 어디에서나 호출된다. let과 const가 사용된 변수는, 선언 전에 호출 할 경우 referen..
Execution Context (실행 Context) JS는 항상 Execution Context 내에서 실행된다. Execution Context는 쉽게 말해서, 당신의 코드가 실행되고 있는 현재 환경을 말한다. JS에는 2가지(Global, Functional) Execution Context가 존재한다. 그리고 각각에는 두개의 단계로 이루어져있다. Creation과 Executing Phase이다. Global Execution Context Creation Phase Global Object 생성 this keyword를 global에 초기화한다 Executing Phase Variable Environment 생성 - var 변수와 function들을 위한 memory 공간 할당 var 변수들..
Static과 Dynamic typed 언어의 가장 큰 차이는, 변수의 자료형을 확인 유무이다. Static Typed 언어(Java, C, C++, C#)은 compile 과정에서 확인되기 때문에, run-time 전에 type가 모두 확인 된다. Dynamic Typed 언어(JS, PHP, Python, Ruby)는 execution stage에서 확인된다. 이것에 관해서는 추후에 더 공부하고 보충할 예정이다.