유튜브채널 '드림코딩' JS 재생목록으로 간단하게 공부 시작.
1. script 실행 위치&방법
(a) head에서 실행
해당 스크립트 문에서 fetching, executing 다 기다려야 됨.
(b) body에서 실행
parsing HTML 끝나고 fetching, executing하기 때문에 JS에 크게 의존하는 경우 문제됨.
(c) async 사용
fetching은 병렬로 처리되서 빠르지만, parsing HTML 도중에 executing되기 때문에 HTML을 보는게 늦어질 수 있음.
다중 async일 경우 가장 빨리 fetching된 script먼저 executing된다. 즉, 원하는 순서로 executing되지 않을 수 있다.
(d) defer 사용 - best!!
parsing HTML하는 동안, fetching을 진행하고, parsing이 끝나면 executing 한다.
다중 defer일 경우, parsing HTML이 끝나면 순서대로 executing이 진행된다.
2. 'use strict'
비상식적인 행동을 차단시켜줌. 바닐라JS를 사용할 때는 js file위에 선언할 것. + 성능 개선.
3. var hoisting(끌어올려주다.)
선언 위치에 상관없이 선언문을 끌어올려서 가장 먼저 실행시키는 특징을 말함.
따라서, var를 쓰면 선언전에 변수를 사용할 수 있게 되므로 + block도 무시함.
이를 방지하기 위해 선언시엔 let을 사용한다.
4. const
값이 한 번 정해지면 바꿀 수 없음.
Immutable data type <> mutable data type
-security
-thread safety
-reduce human mistakes
5. Variable type
primitive, single item (더 작아질 수 없는 단위): number, string, boolean, bigint, undefined, symbol, null
object, box container
function, first-class function(함수가 매개변수나 return값이 될 수 있음.)
특징
number - special numeric values : Infinity, -Infinity, NaN(Not a Number)
string - 백틱을 쓰면 안에 변수를 자동으로 연결시켜줌. ex) 'hi ${variable}'
boolean - false : 0, null, undefined, NaN, '' 나머지는 true
null - empty가 확실함.
undefined - 아직 정해지지 않은 상태. ex) let x만 있으면 undefined 상태
symbol - 고유한 식별자가 필요할 때 사용되어짐.
ex) const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
출력할 땐, symbol1.description
object -
ex) const hi = {name : 'yohan', age : 20}
const라서 hi자체는 수정 불가. 하지만, hi.name, hi.age는 수정 가능.
number, string, boolean, null, undefined 빼고는 다 object
6. Dynamic typing의 특징
let text = 'hello'; -> string
text = 1; -> number
text = '7'+ 5 -> string
text = '8'/'2' -> number
7. equality
== : loose equality, with type conversion
=== : strict equality, no type conversion
object의 경우, ==던 ===던 reference가 같은지 비교
ex)
0 == false -> true
0 === false -> false(type이 다르기 때문)
'' == false -> true
'' === false -> false(type이 다르기 때문)
null == undefined -> true
null === undefined -> false(type이 다르기 때문)
8. Ternaly operator
name === 'yohan' ? 'true' : 'false'
9. function
object
a. Rest parameters
function funName(...args) -> 3개 parameter를 받는 배열
{ args[0], args[1], args[2]로 사용
}
funName('', '', '')
b.Early return, early exit
긴 로직은 {}안에 작성하면 가독성이 떨어지니 {}에서 return을 해주고 조건문 밖에 긴 로직 적어주는게 좋다.
c. function expression
function declaration은 hoisting되기 때문에 선언전에 실행가능해서 문제생김.
function expressions은 불가능이라 안전함.
d. callback function
조건에 맞춰 parameter로 들어오는 함수를 출력하게 되면 그 함수를 callback function이라고한다.
e. Arrow function
ex)
const simplePrint = function(){ console.log('hi')};
const simplePrint = () => console.log('hi');
f. IIFE : Immediately Invoked Function Expression
함수 선언과 동시 호출
(function hello(){~})();
10. Class
a. getter, setter
JS에선 getter, setter를 function getAge이런 식으로 하지 않고,
get age(){}, set age(value){} 이런 식으로 만든다.
b. private
#붙여주면 됨.
c. static
static인 변수 호출할 때, class에 연결되어 있어서 class이름으로 호출해야됨.
인스턴스 이름으로 호출 안됨.
d. instanceof
해당 object가 해당 Class의 instance인지 확인.
11. Object
const obj1 = {} //object literal
const obj2 = new Object() // object constructor
python의 dict와 비슷한듯.
property를 막 추가할 수 있다.
ex) const person1 = { name : 'yohan' };
person1.age = 27;
delete person1.age;
-for in, for of
for(key in obj)
for(value of iterable)
-Fun cloning
//old way
const user3 = {};
for(){
user3[key] = user[key];
]
//new way
const user4 = Object.assign({}, user);
12. Array
-for each
array1.forEach(console.log)
array1.forEach((name) => console.log(name));
-addition, deletion, copy
push
pop
unshift : 앞에 추가
shift : 앞에서 부터 제거 //unshift, shift는 엄청 느림!
splice : index에 해당하는 값부터 원하는 개수만큼 제거, 그 자리에 추가도 됨.
-others
concat() : combine two arrays
indexOf() : find the index
유용한 func
map
filter
slice
splice
sort : TimSort를 사용한다고 함. merge sort와 insertion sort 합침.
find
reduce : 반복하면서 쌓을 수 있고, 2개 인자씩 받아서 뭐 하고 싶을 때 쓰면 좋음.
13. AJAX
AJAX(Asynchronous JS And XML) : Web에서 Sever와 data를 주고받을 수 있게 하는 기술.
XHR(XMLHttpRequest) : XML 사용한 request 형식.
XHR대신 요즘은 JSON 사용함!
JSON(JS Object Notation) : 프로그래밍 언어와 platform에 상관없이 쓸 수 있다.
14. serialize, deserialize
JSON.stringify : serialize
JSON.parse : deserialize
15. Synchronous callback, Asynchronous callback
Synchronous : 동기적, 순서대로 실행.
Asynchronous : 비동기적, 언제 실행될지 모름.
16. promise
약속, 비동기코드를 깔끔하게 처리하는 방법
Producer
network, read files같은 비동기 코드를 처리함.
인스턴스 생성만 해도 내부코드가 바로 실행됨.
callback함수인 resolve, reject는 각각 성공, 실패시 사용.
Consumer
then, catch, finally로 값을 받아올 수 있다.
Promise chaining
then은 결과값을 전달해도 되고, promise를 새로 만들어서 전달할 수도 있다.
17. Async, Await
async : 함수 앞에 쓰면, 비동기적으로 작동함.
네트워크에서 데이터 받아 오는 경우처럼 미리 실행시켜두어야 하는 함수는
Promise를 통해 미리 실행시키고 then, catch로 받아왔었는데,
async를 함수 앞에 씀으로써 이를 대신 할 수 있다.
await : async랑 같이 쓰는데, then으로 받아오는 대신 해당 함수 앞에 await을 쓴다.
await delay(3000) return ~ <=> return delay(3000).then(()=> ~)
병렬적으로 수행가능하게 하려면, promise만 먼저 불러주고 값을 다른 변수에 받아주면 됨.
-> 코드가 더러워지므로 Promise APIs를 사용해 깔끔하게 작성가능.
-> Promise.all([promisefun1, promisefun2]).then(~)
: 값들을 list로 받아올 수 있음.
Promise.race([[promisefun1, promisefun2]])
: 먼저 끝나는 거 하나만 가져옴.
18. PWA(Progresssive Web App)
HTML, CSS, JS를 이용해 만든 웹사이트에
브라우저 API를 사용해 여러 버전의 웹사이트나 모바일에서 돌아갈 수 있게 하는 기술.
