1. Scope
if(true){
const hello = 'hi';
console.log(hello)
}
console.log(hello);위 콘솔은 hi가 찍히지만, 아래 hello는 알수가없다.
서로 scope가 다르기 때문에.
const h = 'hello';
function a(){
console.log(h);
const b = 'b';
}
a()
console.log(b)global scope 는 const h
function안에 있으면, 전역 스코프를 참조 할수 있음.
결과는 hello만 찍히고 b는 찍히지 않음.
큰 곳에서 작은곳으로 접근이 불가능, 작은곳에서 큰곳으로 접근 가능
function a(){
const b="b";
function c() {
const d = "d";
function e(){
const nn = 'nn';
}
}
}함수 e는 b와 d에 접근할 수 있음.
함수 c는 b에 접근할 수 있지만, nn에는 접근 불가.
2. Expression
표현식
value를 리턴하는 하는 무언가. 뭔가 value가 되는 것 , 값으로 평가 될 수 있는
function add(a, b){
return a+b; // 리턴하지 않으면, 콘솔은 undefined
}
const how = add(5,6);
console.log(how)add(5,6)은 expression이다. 무언가 value를 리턴하는 것.
statement 명령 혹은 지시 (문)
변수로 저장할 수 있는 것은 expression / statement는 변수로 저장 불가.
const awesome = add(1,5);
function add(a,b){
return a+b;
}
console.log(awesome);function declaration 함수 호이스팅 때문에 위코드가 정상작동이 됨.( 먼저 선언되지 않았지만, 실행이 가능)
function expression과의 차이이다.
const awesome = add(1,5);
const add = (a,b) => a+b;
console.log(awesome);위코드는 실행되지 않음. Not defined이기 때문에
3. IIFE
Immediately invoked function expressions
함수이고, 자기자신을 일으키는 함수.
(function(){
const secretUsers =
["hi","hi2","hi3","hi4"];
console.log(secretusers);
})()위처럼 즉시실행함수 처럼 만들면, private 해져서 클라이언트가 함부로 접근할 수 없음.
Module
// <app.js>
export let users = ["a","b","c","d"];
export const addUser = () => users = [...users, user];
export const getUsers = () => users;
export const deleteUser = (user) => users = users.filter(aUser => aUser !== user);
// <app2.js>
import { users, addUser, getUsers, deleteUser } from "./app.js"
console.log(getUsers());
adduser("e")
console.log(getUsers());
// index.html
<body>
<script src="app.js></script>
<script src="app2.js></script>
</body>
브라우저는 export, import를 이해 하지 못하여서 에러가 남.
이럴때 웹팩이나 gulp를 사용한다.
하지만, ES6부터 Module기능을 제공하여서 아래와같이 바꿔줄수 있다.
// index.html
<body>
<script type="module" src="app.js></script>
<script type="module" src="app2.js></script>
</body>
script type만 모듈로 해주면, 에러 없이 가능하다.
4) Message Queue and Event Loop , None blocking
파이썬은 블로킹 언어 , 자바스크립트는 논블로킹 언어
자바스크립트가 만약 블로킹이었으면,
자바스크립트가 blocking이었으면, input이 block되어 사용할 수 없다. 즉 웹사이트에서 아무일도 할 수 없다.
예시) alert는 blocking funciton이다.
alert("hello");
console.log('hi');hi는 찍히지 않는다. alert창이 닫히기 전까지는..!
setTimeout(()=> console.log("hi"), 0)
console.log("bye")bye가 먼저 실행되고 hi 가 실행된다.
자바스크립트는 settimeout을 web api로 가져감(브라우저)
그리고 나서 bye부분이 stack에들어가서 호출 되고나서 setTimout이 이벤트 큐로 들어감.
이벤트큐로 들어간 setTimeout은 콜스택이 비어져있으면 호출되어 콜스택으로 들어와서 실행됨
** 여기서 0초는 얼마나 기다려야하는건가아니라 최소 기다려야하는 시간이다.(실행하기 까지 최소 기다려야하는 시간)
'패스트캠퍼스 > 자습' 카테고리의 다른 글
| 패스트캠퍼스 Javascirpt 퀴즈 정리 4) (0) | 2019.08.14 |
|---|---|
| 패스트캠퍼스 Javascirpt 퀴즈 정리 3) (0) | 2019.08.13 |
| 패스트캠퍼스 Javascirpt 퀴즈 정리 2) (0) | 2019.08.13 |
| 패스트캠퍼스 Javascirpt 퀴즈 정리 1) (0) | 2019.07.22 |
| 자바스크립트 개발자라면 알아야하는 핵심컨셉(1) - callstack, Primitive Type , Value Types Reference Types, Type Coercion, Typeof (0) | 2019.07.03 |