'use strict'

use strict란?
JS에서 보다 안전된 코딩을 가능하게 한다!

ES5에서 추가된 문법이다
이는 제한된 문법을 사용하게 하는 method이다

기존에 사용하던 느슨한 문법을 억제하고
엄격한 문법을 적용한다.

이는 일반 JS에서 사용 가능한

a = 10;

이러한 애매한 문법들을 제한하는 역할을 한다.

'use stcit'는 문서 최상단에 위치해야하며 중간에 작동을 중지시킬 수 없다.
하지만 이는 모듈과 클래스 문법을 사용하면서 자연스럽게 사용하지 않게 되었다.

const & let

공통점

a = 10; 와 같이 변수를 지정하면 window 에 binding된다
이는 전역 오염의 문제가 생긴다

이는 앞서 언급한 'strict mode' 를 적용하게 되면 해결된다

const 와 let은 변수 설정시 window에 binding되진 않지만 최상위 객체는 존재한다

const 와 let을 사용하면 같은 변수를 중복해서 선언할 수 없다

차이점

let은 값을 재할당이 가능하지만 const의 경우 재할당이 불가능하다
또한 const는 초기값 설정이 필수이다

var

치명적인 단점

var로 변수를 지정하게 되면 window에 binding이 되어(a=10; 과 비슷) 전역오염을 일으킨다
a=10; 와의 차이는 var로 지정된 변수는 delete를 사용해서 삭제할 수 없다

해결책

HTML문서에서 script파일을 import할때 type="module"로 설정을 하게 되면 이를 방지할 수 있다.(추후 자세히 설명)

특징

블록 스코프가 존재하지 않아 임시 변수로 사용하기 어렵다
따라서 statement와 같은 블록에서 var로 변수를 설정하고 statement 외부에서 호출이 가능하다

이를 해결하기 위해선 함수를 생성하여 그 안에서만 생성되고 삭제되도록 유도한다.
하지만 이는 예전에 사용하던 방식이다

이를 IIFE(Immediately Invoked Function Expression) 이라고 칭한다

IIFE는 캡슐화(encapsulation)를 진행하여 전역오염을 방지한다

const & let과 가장 큰 차이점은 중복선언이 가능하다는 점에 있다.

코드블럭

처음 이 단어를 들었을 때는 코드블럭이 대체 뭐야...? 라는 생각이었다
하지만 생각보다 간단한 단어였다!

문(Statement)

보통 우리가 부르는 if문 혹은 반복문을 떠올리면 된다
이는 { } 로 묶어서 나타낸다

이것을 코드블럭이라고 칭한다

만약 코드블럭 앞에 변수가 선언되면 그것은 객체라고 칭한다

const user = {age:10 , name:"John"}

또한 함수로 된 코드블럭도 존재한다

const sum = (a,b) => {
 return a+b;
}

함수의 경우 호출됨과 동시에 생성되고 호출이 끝남과 동시에 값들이 사라진다(return은 추후 설명)

Hoisting과 TDZ

Hoisting이란?

Hoisting의 사전적 정의

Hoisting은 말 그대로 끌어올리기를 실행시킨다
그렇다면 대체 뭘..?
바로 선언부를 끌어올리는 것이다
이는 코드로 살펴보자

console.log(test01); //undefined

var test01 = 'hello';

일반적인 java나 c++의 코드를 생각해보았을때 이는 출력이 되지 않아야 정상이다
하지만 js에선 선언부를 최상단으로 배치한다고 판단한다
그렇다면 호출이 'hello'가 되는 것인가?
그렇지 않다 왜냐하면 선언부만 hoisting이 되고 할당부는 여전히 제자리에 위치한다
따라서 출력 결과는 undefined가 된다

이번엔 const와 let의 hoisting에 대해서 살펴보자

console.log(test02); //Cannot access 'test02' before initialization

const test02 = '02';

// ---------------------------------------------------------------------------

console.log(test02); //Cannot access 'test02' before initialization

let test02;

이것도 hoisting이 일어나니까 당연히 undefined가 출력되야 하지 않을까?
하지만 결과는 Cannot access '변수' before initialization이다

그렇다면 이 결과를 천천히 뜯어보자
보통의 경우 정의가 되지 않았다면 Undefined를 포함한 오류메세지가 출력되어야 정상이다.
하지만 이 경우 오류 메세지가 살짝 다르다
그렇다면 우선은 정의가 됐다는 소리인가? 라고 생각할 수 있다.

TDZ(Temporal Dead Zone)

이는 말 그대로 해석하면 일시적 사각지대이다
TDZ에 위치하는 변수들은 값이 define은 됐지만 값은 할당되진 않았고, 초기화 즉, 선언부에 도달하기 전까진 접근할 수 없는 영역을 의미한다.

그렇다면 이제 다시 위의 오류 메세지를 살펴보자
Cannot access '변수' before initialization
말 그래도 초기화 되기 전까진 변수에 접근할 수 없다는 의미이다.

JS 자료형

JS의 특징

자료의 타입은 존재하지만 이건 원한다면 언제든 변환이 가능하다
우리는 이를 동적타입언어라고 부른다

JS의 자료형(8가지)

• 숫자형

1. 우선 숫자형은 말 그대로 숫자를 나타낸다. 따라서 정수와,유리수를 포함한다.
2. 이는 사칙연산이 가능하다
3. 특이한 값으로는 Infinity , -Infinity , NaN(not a nubmer) 와 같은 것들이 존재한다
4. 2**53 - 1 까지가 '안전한' 정수 범위이다. (이보다 절대값이 큰 값들은 보안 issue가 발생 가능하다)

• BigInt

1. 절대값이 2**53 - 1 보다 큰 값들을 나타낼 때 주로 사용한다
2. 하지만 10이나 100과 같이 비교적 작은 수들도 나타낼 수 있다
3. 일반 숫자형 뒤에 n을 붙여 나타낸다 ex) const a = 123n

• 문자형

1. " "(double quotation) , ' '(single quotation) , ``(backtick) 으로 묶어서 나타낸다
2. ``으로 묶인 문자열 안에는 ${}를 사용해 값을 삽입할 수 있다
3. ``은 template literal이라 불리고 ${}는 interpolation이라 불린다

• Boolean
  1.참, 거짓을 나타낼 때 사용한다

2. 비교 연산자의 참, 거짓을 나타낼 수 있다.

• null

1. 어디에도 속하지 않는다.
2. JS에선 empty, nothing, unknown의 의미로 쓰인다

• undefined

1. 어디에도 속하지 않는다
2. 값이 할당되지 않은 상태를 나타낸다
3. 변수에 값을 할당하지 않았다면 자동으로 undefined가 할당된다(const 예외)

• 객체

1. object는 특수한 자료형이다
2. 객체를 제외한 다른 자료형은 한 가지만 표현할 수 있기 때문에 원시 자료형(primitive value)라고 불린다
3. 함수와 배열은 이 안에 포함된다

• symbol

1. 라이브러리 개발자들이 주로 사용한다
2. 고유한 식별자를 만들 때 사용한다

typeof

변수의 자료형을 출력하는 함수

사실 설명할 것이 많진 않지만 특이한 점이 있어 적었다
null도 자료형의 일부라고 소개를 했지만
typeof null을 실행하면 object를 반환한다
이는 단순한 언어상의 오류이다
이를 수정하기 위해 위에서 언급한 'use strict'를 사용해도 효과가 없다