8_JavaScript

charlie_·2021년 6월 7일

목록 보기

8/42

# 오늘 한 일

자바스크립트 공부 (드림코딩)

1. 스크립트 선언 위치의 차이

1) head 
	- 페이지를 로딩하는 시간이 길어진다.

2) body 하단
	- 페이지가 뜨더라도 동적인 요소를 사용하기 위해서는 기다려야 한다.

3) async 
	- 병렬로 다운로드하되 파싱 도중에 동적인 요소를 실행하게 되면 페이지를 로딩하는 시간이 길어진다.

4) defer 
	- 병렬로 다운로드하되 파싱이 끝난 후에 동적인 요소를 실행한다.

2. 'use strict';

script 파일 최상단에 'use strict';를 선언하면, 선언되지 않은 변수에 값을 할당했을 때 에러가 발생한다. 그러므로 예기치 못한 문제를 미연에 방지할 수 있다.

'use strict';
 a = 6; // 결과값: error (a is not defined)

let a;
a = 6; // 결과값: 6

3. 바닐라 자바스크립트

브라우저를 통해 제공된 자바스크립트로 라이브러리나 프레임워크가 없는 날 것 그대로의 자바스크립트를 말한다.

4. 변수

전역변수는 최소한으로 사용하고, 필요한 부분에서만 지역변수로 정의하여 사용한다.

1) Variable (특징: mutable, rw**)

var: 재할당, 재선언, hoisting 가능, 무조건 전역변수로 취급

console.log(price); // 결과값: undefined
	-  hoisting** 가능

{
var price = 350;
}
console.log(price); // 결과값: 350

var price = 70;
console.log(price); // 결과값: 70
	- redeclaration(재선언)

** rw: read and write

** hoisting: 어느 곳에서 변수를 선언하든 제일 위로 선언을 끌어올려주는 것. 다시 말해서, 선언을 나중에 하더라도 사용 가능.

let: 재할당만 가능

console.log(weight); // 결과값: error
	- hoisting 불가

let weight = 350; 
console.log(weight); // 결과값: 350

let weight = 300;
console.log(weight); // 결과값: error
	- redeclaration(재선언) 불가

weight = 500;
console.log(weight); // 결과값: 500 
	- reassignment(재할당) 가능

weight++; // 결과값: 501

2) Constant (특징: immutable, r)

const: 재할당 불가, 재선언 불가

const height = 350;
console.log(height); // 결과값: 350

const height = 70;
console.log(height); // 결과값: error

height = 500;
console.log(height); // 결과값: error

height++;
console.log(height); // 결과값: error

단, 인자(argument)는 변경가능

const a = function(b,c){
	      let d = b + c;
	      return d;
}
console.log(a(3,6)); //결과값: 9
console.log(a(5,7)); //결과값: 12

6. 숫자를 0으로 나눌 경우 infinity값이 리턴되고, 숫자가 아닌 것을 연산할 경우 NaN(Not a Number)이 리턴된다.

7. Template liters

따옴표가 아닌 backtick(`)을 사용한다.

형식: `${}`

let myNmae = 'Gildong'
let myCity = 'Seoul'
console.log(`Name is ${myName}, City: ${myCity}`); // 결과값: Name is Gildong, City: Seoul

8. null과 undefined의 차이

null: 값이 빈 채로 선언이 되어있는 것
undefined: 선언만 되어있는 것

let a = ''
console.log(a) // 결과값: null
let b
console.log(b) // 결과값: undefined

9. Dynamic Typing

let text = 'hello';
console.log(text.charAt(0)); // 결과값: h
console.log(`value - ${text}, type - ${typeof text}`); // 결과값: value - hello, type - string

text = 1;
console.log(`value - ${text}, type - ${typeof text}`); // 결과값: value - 1, type - number

text = '7' + 5;
console.log(`value - ${text}, type - ${typeof text}`); // 결과값: value - 75, type - string

text = '8' / '2'
console.log(`value - ${text}, type - ${typeof text}`); // 결과값: value - 4, type: number