33-js-concepts-reveiw(34)
-
Concept 9. 메시지 큐와 이벤트 루프
메시지 큐와 이벤트 루프 이번 Concept은 메시지 큐와 이벤트 루프에 대해서 다뤄보겠습니다. 먼저 컨셉을 다루기 전에 자바스크립트의 전반적인 구동방식에 대해 설명하고 넘어가겠습니다. 자바스크립트는 다른 언어들과 다르게 싱글 스레드 언어입니다. 이 말은 한 번에 하나의 동작밖에 할 수 없다는 것을 의미하고 장점과 단점을 각각 가지고 있습니다. 장점: 멀티 스레드에서 발생하는 교착상태처럼 복잡함이 발생하지 않는다. 단점: 이미지를 제어하는 무거운 작업 등은 할 수가 없다. 그런데 한 가지 이상한 점이 있습니다. 자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나밖에 작동을 할 수 없다고 했는데 어떻게 브라우저에서는 한 번에 처리되는 것일까요? 그 이유는 자바스크립트가 런타임으로 하나에 한 가지 일을..
2020.11.03 -
Concept 8. IIFE, Modules, Namespaces
IIFE, Modules, Namespaces 이번 Concept은 IIFE 그리고 Modules까지만 다뤄볼 생각입니다. IIFE(Immediately Invoked Function Expression) 말 그대로 즉시 실행되는 함수 표현식입니다. 쉽게 표현하면 코드가 시작하자마자 바로 실행되는 그런 함수인데요. 사용방법은 아래와 같습니다 :) (const func = () => { return "IIFE"; })() 뭔가 이상한 방법이지만 이것을 사용하면 아무도 이 함수를 바꿀 수 없게 된다고 합니다. 브라우저는 실행하여 콘솔로그를 확인해보면 IIFE가 나오지만 누군가 func를 수정하려고 하면 func is not defined가 뜰 것 입니다. 어차피 많이 사용되지 않습니다. 그냥 이런 것이 있구..
2020.11.02 -
Concept 7. 식(expression) vs 문(statement)
식(expression) vs 문(statement) 이번 Concept은 Function Declarations vs. Function Expressions를 다뤄보려 합니다. Function Declaration은 무엇이며 Funcion Expressions는 무엇일까요? Function Statement Function statement는 함수를 선언합니다. 이렇게 선언된 함수들은 나중에 호출이 되면 사용이 되어집니다. 함수 선언의 모양새는 이렇습니다. function bar() { return 3; } Function Expression Function Expression은 함수를 선언할 수 있는 또 다른 방법입니다. 함수 표현식은 함수를 선언하지 않고 변수에 값으로 할당합니다. 이렇게 할당된 변..
2020.11.02 -
Concept 6. 함수 범위, 블록 범위, 렉시컬(lexical) 범위
함수 범위, 블록 범위, 렉시컬(lexical) 범위 이번 Concept은 Scope에 대해서 알아보겠습니다. Scope는 자바스크립트에서 변수가 어디까지 접근이 가능한지를 정의합니다. Scope는 크게 2가지로 분류할 수 있습니다. Global Scope 변수가 함수 바깥이나 {}(컬리 브라켓) 바깥에 선언되어 있다면 이것은 Global Scope에 정의되었다고 합니다. 글로벌 스코프로 선언이 되면 코드 내 어디서든 사용이 가능합니다. 밑의 코드처럼 말이죠. const hello = 'Hello CSS-Tricks Reader!' function sayHello () { console.log(hello) } console.log(hello) // 'Hello CSS-Tricks Reader!' sayH..
2020.11.02 -
Concept 5. == vs === vs typeof
== vs === vs typeof 저번 강의에서 Type Coercion에 대해서 알아보았습니다. 이번 강의에서는 'Type Coercion'과 관련된 == & === 에 관하여 알아보려 합니다. == 와 === 의 차이가 무엇일까요? 4번 컨셉에서도 언급한 내용이지만 자바스크립트는 타입이 다른 것들끼리 무엇인가 하려고 하면 자동적으로 타입을 원하든 원치않든 변경하여 'Type Coercion'이 일어난다고 했습니다. == 와 === 의 차이점은 이 'Type Coercion'이 일어나는지 안 일어나게 하는지에 따라 달렸습니다. 밑의 코드로 이동하겠습니다. '1' == 1 '1' === 1 똑같아 보이지만 조금 다른 두 줄의 코드가 있습니다. 이 코드의 결과는 어떻게 나올까요? true false 위에..
2020.11.02 -
Concept 4. 명시적 변환, 암시적 변환, Nominal, 구조화, 덕 타이핑
명시적 변환, 암시적 변환, Nominal, 구조화, 덕 타이핑 이번 Concept에서는 Type Coercion이라는 띠용하는 친구에 대해 알아보겠습니다. console.log(4 + "hello"); console.log(4 + 4 + "hello"); console.log("" == true); console.log(1 == true); console.log(66 + true); 위의 코드를 봅시다. 타입이 서로다른 아이들로 어떠한 작업을 하고 있는데요~ 보통 다른 프로그래밍 언어에서는 이렇게 타입이 다른 것들끼리 무엇인가 할 수 있게 되어 있지 않습니다. 하지만 자바스크립트는 위의 코드가 가능합니다. 자바스크립트가 맘대로 바꿔서 말이죠! 위의 결과는 아래와 같이 나옵니다. 4hello 8hello..
2020.11.02