Always

setTimeout, setInterval and requestAnimationFrame 배워두면 인생에 도움이 되는 개념들이다. 먼저 setTimeout은 자바스크립트 개념에서 온 것이 아니다. 브라우저 그리고 nodeJS 개념에서 왔다. 이게 뭘 하는 것이냐? 시간이 조금 흐른후에 함수를 실행하는것을 해준다. 자세하게 설명을 하자면 setTimeout은 시간이 지난 후에 기능을 message queue에 붙여준다. 함수를 자동으로 부르는 것이 아니라 함수를 message queue에 넣고 stack이 비게되면 자바스크립트가 실행을 하는 개념인것이다. 바로 이뤄질수도 있고 자바스크립트가 바쁘면 천천히 할수도 있다. 그래서 time specific 하다고 볼 수 없다. 아래에서 보면 다음과 같이 작성을 ..

Message Queue and Event Loop 시작하기전에 일단 blocking 그리고 none blocking이 무엇인지 이해해야 한다. 자바스크립트는 none blocking이며, 파이썬은 blocking언어이다. 만약에 자바스크립트가 blocking 언어였다면, 웹사이트에 input이 있고, 유저가 이를 사용할 것인데 유저가 input에 이름을 쓸 때 유저는 타이핑을 할 수 가 없을 것이다. 그 이유는 자바스크립트는 API fetch를 핸들링하느라 바쁘기 때문일 것이다. 그게 blocking이며 자바스크립트는 한번에 하나밖에 할수없다. user, input, event, fetch 등 자바스크립트가 blocking 이였으면 웹사이트에서 아무것도 할 수 없을것이다. 하지만 자바스크립트도 다음과 ..

IIFE ( Immediately-Invoked Function Expressions ) 함수이고, 자기 자신을 일으키는 함수이다. 아주 심플하다. const secretUsers = ["Nicolas", "Lynn", "Stevey", "Autumn"]; console.log(secretUsers); 이렇게 하면 user array가있다는 걸 알 수있다. 하지만 어쩔때는 사람들에게 자바스크립트를 주고싶지만 너의 variable에 영향을 끼치는건 원하지 않을 때는 다음과 같이 한다. 비밀 모드로 되었다고 보면 되고 위에 작성한 2줄을 자기 자신을 부르는 함수 안에 넣으면 된다. 그걸 IIFE라고 부른다. (function(){ const secretUsers = ["Nicolas", "Lynn", "St..

Expression vs Statement 이걸 이해하면 코드를 읽을때 도움이 많이 된다. 코드를 많이 읽든, 안읽든 도움이 될 것이다. Expression 은 무엇인가? 이건 value 를 리턴하는 무언가를 뜻한다. 뭔가 value가 되는것. 5 + 1 // 6 바로 이것은 expression 이다. 자바스크립트는 이걸 가져다가 6이라고 리턴할 것이다. function add(a,b){ return a + b; // return 없이 a+b 일 경우 undefined } const how = add(5,6); 바로 이것, 이것이 expression이 될것이다. 그 이유는 value를 return 하기 때문이다. return 하는 곳에서 return이 없으면 이건 undefined 그것 역시 value이..

Scope Scope를 모르면 꽤 골치 아플 수 있다. 그러다 보니 관련 글, 영상들도 꽤나 많다. Scope는 한마디로 말하면 "너의 variable 이 존재하는가 아닌가" 그게 Scope다. 여기에서 variable이 정의가 되었나, 아닌가 예시를 보면 다음과 같다. if(ture){ const hello ="hi"; } console.log(hello) // ReferenceError : hello is not defined 여기선 hello는 정의가 되지 않았다. 그게 바로 scope이다. hello는 {} 안에서만 존재하는 것이다. if(ture){ const hello ="hi"; console.log(hello) } console.log(hello) 그래서 안에다가 넣어줘야 하는 것이고 이렇..

Typeof what is typeof? 자바스크립트는 항상 type을 체크해야 한다. ( boolean, string, number 등) console.log(typeof "11121221") // string console.log(typeof true) // boolean console.log(typeof function(){}) // function console.log(거의 모든 Primitive에서 다 작동을 한다) // Number,boolean,string,undefined.. 하지만 여기에 WTF 버그가 있다. console.log(typeof null) // object 이 버그는 브랜든 그리고 더글라스( 자바스크립트를 만든 개발자)에 의하여 논의가 있었다. Null -> Object 대..

Type Coercion 이상해 보이지만 사실 자바스크립트가 잘 하고 있는 것을 알 수 있다. console.log(4+ "hello"); // 4hello console.log(4+4 + "hello"); // 8hello console.log("" === true ); // false; console.log(1 === true); // true; console.log(66+true); // 67 이것이 자바스크립트의 특성이고, 잘 알아두면 인생의 도움이 될 수 있다. 모르면 나중에 두통을 유발할 수 있다. 이것을 Type Coercion 즉, 자바스크립트가 값을 변환시킨다는 뜻이다. 강제적으로 말이다. console.log(66 + true); // 67 console.log(66 - false); ..

Value Types and Reference Types first! value; let a = 50; let b = a; console.log(b); b = 50으로 나올 것이다 여기에 하나를 추가해 보자. let a = 50; let b = a; a =10; console.log(b); // 여전히 b는 50이며 이걸 value라고 한다. 이걸 해석 하자면 다음과 같다. let a = 50; let b = 50; //

Primitive Types 말그대로 primitive 원시적인, 기초적인이라는 뜻이야. original 즉 string이라든가 혹은 numbers, 정수, 소숫점, 혹은 참과 거짓 Null 있고 Undefined, Nan도 있음 이 마지막 3개를 사람들이 차이점을 잘 몰라 그래서 그걸 알아보자. String 알지? 그건 이렇게 따옴표(")로 시작하고 끝나. 그런데 이런 따옴표 ('')로 시작하면, 같은 모양새의 따옴표로 끝내야한다. 그렇게 안하면 에러가 난다. 같은 모양새의 따옴표로 시작하고 끝내기. 이게 String의 규칙이야! "hello!" 예를 들어 이렇게 작성하면 안될 것이야. "Hello they call me " the awesome man"" // 왜냐면 자바스크립트는 이걸(the awe..

#2.1.1 More Function Fun / ${} 와... 이걸.. 이걸? 여기서? -> 수정 체크 노트 Call Stack, 자바스크립트가 함수 실행을 핸들하는 방법 중 하나다. 자바스크립트가 실행해야 하는 함수를 보면 스택(stack) 위에 올릴꺼야. 스택(stack)은 책을 쌓아올리거나, 카드 스택을 만들거나 등등 예로들수있다. 자바스크립트는 함수를 그 스택 위에 올리고, 함수를 다 실행하면 제거하는 형태이다. 그게 콜 스택의 아주 러프한 설명이다. 그래서 예로 자바스크립트가 실행해야하는 함수 리스트를 만들것이다. function three(){ console.log("i love js"); } function two(){ three(); } function one(){ two(); } fun..