[TIL] JS: 드림코딩 강의노트 01

JS는 너무나 빠르게 변화해서 힘들다??

= 불필요한 코드는 사용하기 쉽게 줄이고, 필요한 함수는 추가한다.
-> 발전하는 언어 JavaScript

MDN

자바스크립트 공식 사이트. 업데이트도 빠르고 설명도 상세하다.
https://developer.mozilla.org/

script의 위치

브라우저는 HTML 문서를 한줄 씩 읽는다.

• head: HTML parsing을 멈추고 js를 다운받아 실행한다.
• body: HTML parsing이 끝난 후 js를 다운받아 실행한다.
  전체적인 페이지는 볼 수 있지만 js에 의존적인 사이트라면 반응이 느리다.
• asyn: HTML parsing과 js fetching이 병렬로 실행된다.
  여러개의 js를 실행할 경우, 다운로드가 먼저 된 스크립트 먼저 실행된다.
• defer: HTML이 parsing하는 동안 스크립트 전부를 다운받은 다음 순서대로 실행된다.

use strict

스크립트 상단에 기입하면
선언되지 않은 변수를 사용했을 때 console에 에러 메시지가 발생한다.
(기입하지 않으면 아무일도 일어나지 않는다.)

공부할 때 사용하여 좀 더 의미있는 스크립트를 쓰도록 하자!

Hoisting

변수 var 를 사용하지 않는 이유!

• 변수를 어디에서 선언하더라도 제일 위로 끌어 올린다. (=Hoisting)
• var는 block-scope가 적용되지 않는다.
  block 안에서 선언한 변수가 block 밖에서도 적용된다.
  -> 선언하지 않은 값들이 실행되는 문제가 발생한다.

Dynamic typing

변수는 Runtime에 따라 계속 변한다.

Typescript에서는 이 현상이 일어나지 않기 때문에 배우는 것을 추천추천한다.

특수 문자열

＼n 줄바꿈 ＼t 탭

++counter / counter++

++counter는 할당 후 실행. counter++은 실행 후 할당

let counter=2;
const preIncrement = ++counter; // counter: 3, preIncrement: 3
const postIncrement = counter++; // counter: 4, postIncrement: 3

True / False

• True: -1, 'hello', 'false', []
• False: 0, -0, '', null, undefined

  • check() True로 return되는 아이.
    -> 연산자 사용 시 마지막 순서로 두는 것이 중요하다.

const value1 = false;
const valus2 = 4 < 2;
console.log(`or: ${value1 || value2 || check()}`)

function check() {
  for (let i = 0; i < 10; i++){
    console.log();
  }
  return true;
}

• True와 &&

if (obj) {
  console.log(obj.name);
}

obj && console.log(obj.name);

Equality

===/== 같음 !==/!= 다름 > ===은 type까지 체크한다.

Ternary operator: ?

간단한 조건문일 때 간략하게 표현할 수 있다. ? true : false

console.log(name === 'Naeun' ? 'yes' : 'no');

Switch

const browser = 'IE';
switch (browser){
  case 'IE':
    console.log('go away!');
    break;
  case 'Chrome':
  case 'Firefox':
    console.log('love you!');
    break;
  default:
    console.log('same all!');
    break;
}

For / While loop

• nested loops
  i가 0~9까지, j가 0~9까지 반복해서 출력된다.

for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    console.log(`i: ${i}. j:${j}`);
  }
}

• break 다음 step으로 넘어가지 않고 중간에서 종료한다.
  0~10 까지 숫자 중 8까지 출력하기

for (let i =0; i < 11; i++){
  if (i > 8){
    break;
  }
  console.log(i);
}

• continue 다음 step으로 넘어간다.
  0~10 까지 숫자 중 홀수만 출력하기

for (let j =0; j < 11; j++){
  if (j % 2 === 0) {
    continue;
  }
  console.log(j);
}

for (let j =0; j < 11; j++){
  if (j % 2 === 0) {
    console.log(j);
}
}

드림코딩 by 엘리 Youtube