Today I Learned
js
node.js와 js에서 console.log함수를 입력했을 때 똑같이 사용할수있는건
node.js 웹 APIs 둘다 콘솔과 관련된 API가 있는거고 API 인터페이스가 동일하다.
MDN 사이트에서 Console API는 웹API 들중에 하나라는 걸 확인할수있다.
자바스크립트 언어자체에 포함된게 아니라 브라우저가 제공하는 브라우저가 이해하는 API이다
Console API 스펙에 가면 함수나 어떤 데이터를 파라미터로 전달해야하는지 작성이 돼있다.
Console은 언어자체에 포함된건 아니지만 통상적으로 많이 쓰이기때문에 node.js와 web apis에 공통적으로 포함되어있어서 nodejs 와 브라우저에서 공통적으로 사용할수있는거다.
async vs defer
head안에 script가 있으면 한줄씩 parse하는데 css와 병합해서 dom요소로 변환하는데,
script를 보면 parsing하는걸멈추고 src주소를 다운로드하고 parsing하는 단계로 넘어간다.
그래서 사용자가 웹사이트보는데 시간이 오래걸릴수있다.
그럼 어디에 넣나?
body안 매일끝? 이방법도 좋지만
단점은 사용자가 기본 html 컨텐츠를 보는 장점이있지만 웹사이트가 자바스크립트에 의존적이라면 의미있는 콘텐츠를 보기위해서 fetching 하고 executing 시간이 필요함.
<script asyn src="main.js"></script> 처럼 할수있다.
파싱하다가 asyn 을보고 병렬로 main.js를 다운로드하고 완료되면 파싱멈추고 다운로드된 js파일을 실행한다
이렇게하면 장단점이?
body끝에 두는것보다 다운로드시간은 빠르겠지만 파싱중에 쿼리셀렉터로 돔을 조작하는 등이 있을때 위험할수도있고 여전히 html파싱은 실행된 후에 진행되기 때문에 완료된 html을 보는데에는 시간이 더 걸릴수도잇다.
head + defer
<script defer src="main.js"></script>
파싱중에 다운로드하고 파싱이끝나면 js를 실행한다
async로 다수의 js를 받으면 먼저 실행되는것들이 있는데 정의된 스크립트와 관계없이 실행되기때문에 순서에의존적이고 문제가있을수도있다.
defer같은 경우엔 다운로드 다 한다음에 순서대로 실행한다.
그래서 제일 선호되는방법.
playground
// 순수 자바스크립트 ㅅ할시에 이렇게
// 자바스크립트는 굉장히 유연하다
// 유연하다는 것은 떄론 위험하다
// 개발자가 많은 실수를 할 수 있다
// use strict할시에 ECMAScrpipt 5에 추가됨
// 예를 들어서 a = 6; 이라고하면 아무문제가없는데
// use strict를 붙이면 에러가난다
// 성능개선도 가능
'use strict';
// 2. Variable
// let (added in ES6)
let globalName = 'global name';
{
let name = 'kyu';
console.log(name);
name = 'hello';
console.log(name);
console.log(globalName);
} // 블럭밖에서는 name에 접근이 안됨
console.log(name);
console.log(globalName);
// var 를 쓰면 쓰지마!!! 왜??
// var hoisting (끌어올려준다. 변수를..상식밖 )
// var는 block scope이 없다. block을 무시
console.log(age);
age = 4;
console.log(age);
var age = 4;
// 3. Constants
// 한번할당하면 다시바뀌지 않는ㄴ것
const maxNumber = 5; // 값을 변경할수없음
// 데이터타입도 변경이 가능한 mutable한게 let 타입
// const는 immutable
// 웬만하면 const를 써라.왜? 1.보안상(다른사람이 변경하지않도록
// 2. thread safety 다양한 스레드가 변수에접근해서 변경이 가능한데, 그건 위험하다
// 3. 실수를 줄이기위해
// 4. Variable types
// primitive, single item: number, string ,boolean, null, undefiend, sytmbol
// object, box container
// function, first-class function
// 펑션을 변수에 전달이 가능 그걸 first-class function이라고 한다.
// 자바스크립트는 타입이 다양하게 되기 때문에
let a = 12;
const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
const nAn = 'not a number' / 2;
console.log(infinity);
console.log(negativeInfinity);
console.log(nAn);
const bigInt = 543243242383049583904589034589034589034859034859034n;
console.log(bigInt);
const char = 'c';
const brendan = 'brendan';
// boolean
// false: 0, null, undefined, NaN. ''
// true: any other value
// null VS unefined
// null은 빈것, undefined는 선언은 되었으나 값이 지정되지않은거.
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2);
// 5. Dynamic typing:
let text = '82131';
console.log(text.charAt(0)); // h
console.log(`value: ${text}, type: ${typeof text}`);
text = '8' / '2';
console.log(text.charAt(0)); // h 문제발생
// object, real-life object, data structure;
const kyu = { name: 'kyu', age: 29 }; // 변경불가 name,age는 변경가능
kyu.age = 21;
