공부/Javascript

Vanilla JS 주요 특징 정리 1

도리암 2022. 8. 6. 23:16

#1.0 ❤️ 무료 강의 ❤️ – 노마드 코더 Nomad Coders

 

All Courses – 노마드 코더 Nomad Coders

초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요!

nomadcoders.co

위의 강의를 들으면서 내가 몰랐거나 중요한 사실을 정리해보았다.

JS나 CSS파일은 HTML을 통해서 실행된다.

브라우저를 통해 바로 JS나 CSS 파일을 열게 되면 내부 코드만 그대로 출력될 뿐 실행되지 않는다.

브라우저에는 CSS와 JS를 구동하는 2가지 엔진이 존재하는데 HTML을 통해 엔진에 입력돼야 실행된다.

JS는 타입을 알아서 이해한다.

따로 타입을 지정하지 않고 변수에 넣어준 값에 따라 변수의 타입이 결정된다.

변수의 이름은 카멜케이스(camelCase)를 주로 사용한다.

var 대신 let과 const를 사용하라

var는 다음의 문제점을 가지고 있다.

1. 변수를 중복하여 선언 가능하므로, 의도하지 않은 값을 반환할 수 있다.

2. 함수 레벨의 스코프이므로 함수 외부에 선언한 변수는 모두 전역변수가 된다.

 - let이나 const는 블록(if, for, while, try/catch)레벨의 변수이므로 다음과 같은 차이점이 생긴다.

let a = 1

if (true) {
  let a = 5
}

console.log(a) // output: 1

 

  var를 사용했다면 마지막 a의 값은 5가 된다.

3. 변수 선언문 이전에 변수를 참조하면 언제나 undefined가 된다.

null, undefined, NaN

null은 개발자가 의도적으로 넣은 '공백'의 의미를 가지는 변수

undefined는 의도하지 않고 생긴 '비어있는' 변수

NaN은 문자를 숫자와 함께 계산하는 등, 숫자가 아니게 돼버린 변수 (Not a Number)

prompt(), alert()

이 함수들은 브라우저의 고유 modal 창을 띄워 메세지를 출력하거나 값을 입력받는 함수인데

자바스크립트의 진행을 일시정지 시키므로 요즘에는 사용하지 않는 추세이다.

parseInt()

string 타입의 문자열을 정수로 바꾸어주는 함수. 만약 숫자로 변환할 수 없다면 NaN을 반환한다.

isNaN(인수)

인수의 값이 NaN이면 True, number면 False를 반환한다.