자바스크립트 기초 정리
1. 자바스크립트 역사와 현재, 미래
사용자가 다이나믹한 동적 웹사이트 이용가능하게끔 하는 것이 script 언어이다
현재는 많은 버전이 나왔는데 ECMA Script 6 문법을 표준으로 사용되며, JQuery 없이도 모든 브라우저에 적합한 것을 만들 수 있다.
* SPA : Single Page Application
* React : 필요한 부분만 업데이트하는 웹 프레임워크
2.
developer.mozilla.org -> 자바스크립트 공식사이트
자바스크립트를 html과 연동하는 방법
1. head안에 script를 포함한다. : page load가 오래걸린다.
2. body 맨 아래에 script를 포함한다.
: page content를 빨리 볼 수 있다. 하지만 정상적인 페이지가 나올 때까지 fetching, 실행 시간 기다려야한다.
3. head + async
: 병렬로 js를 다운한다. fetching(다운받는) 시간을 줄인다. DOM으로 진행시, 아직 원하는 html요소가 안 만들어져 있을 수 있다.
4. head + defer ⭐️효율 안전
: js 다운 받으라는 명령만 해놓고 html을 parsing한다.
* ECMA Script 5 'use strict';
자바스크립트는 약 2주라는 시간정도를 걸려 빠르게 만들어진 언어이다.
그래서 유연하지만, 상식 밖의 것도 허용해주어 위험하다.
- 실수를 방지하기 위해 상식적인 범위 안에서 개발하는 것이 좋다.
- 자바스크립트 엔진을 빠르게 실행하여 성능을 개선할 수 있다.
3.
가장 중요한 것은 입력, 연산, 출력이다.
- CPU 최적화된 연산
- 메모리 사용 최소화
let : 변수. (mutable) ES6 에서 추가 되었다. (현대적)
let name = 'ahntoday' 이런 식으로 하면 메모리에 저장되어, 포인터를 활용해 값 변경이 가능하다.
const : 상수. (immutable)
한 번 값을 선언 할당하면 변경이 불가능하다. 보안성, thread safety.
메모리 포인터를 잠가놨다.
* thread safety : 다양한 스레드를 동시에 하면, 값이 변경될 수 있다.
* 바꿔야할 이유 없으면 const로 선언한다!
* object를 상수로 선언했으면 바로 가리키고 있는 ref은 포인터가 잠겨 있는데, name, age 등 속성은 변경이 가능하다.
BlockScope : 블록 밖에서는 블록 안의 내용을 볼 수 없다. 블록 밖은 전역변수공간이다!
var를 쓰면 안 되는 이유 !!!
javascript 선언 전에도 변수를 쓸 수 있으며, block 선언을 무시한다.
그래서 변수를 선언할 때는 let을 써야한다.
* hoisting : 언제 선언했는지와 상관없이 선언을 맨 위로 끌어올리는 것을 의미한다.
4. Datatype
- primitive type ( single item ) : number, string, boolean, null, undefined, symbol
* C에서는 숫자를 short, int, long 등으로 하는데 JS에서는 그냥 number로 통일시켰다.
- object, box container ( single item을 묶어서 관리 )
- function, first-class function
함수도 변수에 할당 가능하여, 함수의 인자로도 전달이 가능하며, 리턴타입으로도 가능하다!
* immutable : premitive, frozen objects
* mutable : object
1) number ( - 2의 53제곱 ~ 2의 53제곱 )
< 특별 사례 >
infinity 극한 1 / 0
negative Infinity 음극한 - 1 / 0
' not a number '/ 2
2) string
변수 출력시 ' 문자열 ' + 변수 + ' 문자열 ' + 변수 => 귀찮음
' 문자열 + ${변수} + 문자열 + ${변수} ' => 편함
3) boolean
false : 0, null, undefined, NaN, ' ' (비어있는 값)
true
4) null
비어있는 값
5) undefined
선언은 되었으나, 텅텅 비어있는지 값이 들어가 있는지도 정해져 있지 않은 상황
6) symbol
고유한 식별자. 우선순위 주고 싶을 때 사용한다.
symbol.description 해서 string으로 변환해서 출력해야한다.
7) object
box 형태
* 변수++ : 먼저 변수를 할당한 후 count를 증가시킨다.
++변수 : 변수를 바로 업데이트해서 할당한다.
* logical : ||(or) &&(and) !(not)
함수 호출할 때 맨 뒤에 있는 것이 좋음
* == 타입 변경해서 체크한다
=== 타입까지 엄격하게 체크한다.