자바스크립트의 독특한 특징 #2

자바스크립트 범위

var를 사용해 선언하기 : 함수범위

var를 사용하면 변수를 어디에 선언하든 변수 선언이 함수의 맨 앞으로 이동 (함수 호이스팅)
스크립트 실행시 변수가 가장 마지막에 선언 됐다 하더라도 해당 선언 코드가 가장 마지막에 실행되는 것이 아님

예시

function scope1() {
	var top = "top";
    bottom = "bottom";
    console.log(bottom);
        
    var bottom;
}
scope1(); // "bottom"을 출력하며 오류 X

이 코드는 다음 코드와 동일하다

function scope1() {
	var top = "top";
    var bottom;
    bottom = "bottom";
    console.log(bottom);
}
scope1(); // "bottom"을 출력하며 오류 X

뒤에 나온 예시처럼 var bottom이 나중에 선언 됐다 하더라도 var가 존재하는 이상 변수 선언이 맨 앞으로 이동함

var 키워드에서 주목해야할 것은 해당 변수의 범위가 가장 가까운 함수 범위라는 것

function scope2(print) {
	if (print) {
    	var insideIf = '12';
    }
    console.log(insideIf);
}
scope2(true) // 12를 출력하며 오류 X

이 함수는 다음 함수와 동일

function scope2(print) {
	var insideIf;

	if (print) {
    	var insideIf = '12';
    }
    console.log(insideIf);
}
scope2(true) // 12를 출력하며 오류 X

만약 자바였다면 위의 구문은 오류를 일으켰을 것
insideIf 변수가 if문 블록 내에서만 사용 가능하고 if문 블록 외부에서는 사용 할 수 없기 때문

마지막 예시를 보면 이해가 간다

var a = 1;
function four() {
	if (true) {
    	var a = 4;
	}
    
    console.log(a); // '4'를 출력한다.
}

전역변수 값인 1이 아니라 4가 출력됨 a 변수가 four 함수 범위 내에서 재선언 됐고 사용이 가능하기 때문

let을 활용한 선언 : 블록범위

let은 가장 가까운 블록 범위를 가짐 (즉, 변수가 선언된 { } 내에서 유효)

function scope3(print) {
	if(print) {
    	let insideIf = '12';
	}
    console.log(insideIf);
}
scope3(true) // '' 를 출력

앞서 말한대로 insideIf 변수가 if문 블록 내에서만 사용이 가능하기 때문

등가와 형

변수형

자바스크립트의 기본 자료형은 7가지가 있다.
boolean, number, string, undefined, object, function, symbol

여기서 특이한 것은 선언만 되고 값이 할당 되지 않았으면 변수에 undefined가 할당된다는 것
typeof 는 변수의 형을 반환하는데 사용하는 기본연산자

let is20 = false;
typeof is20 // boolean

참/거짓 확인

false로 평가되는 경우

• false, 0, 빈 문자열, NaN, undefined, null

true로 평가되는 경우

• true, 0이 아닌 숫자, 문자열, 객체

===대 ==

자바스크립트는 스크립트 언어기 때문에 변수선언시에 변수에 형이 할당되지 않고 코드가 실행될 때 변수의 형이 해석됨

===는 등가를 좀 더 엄격히 확인
==는 값만 확인하고 ===는 형과 값 모두를 확인

"5" == 5 // true : "5"가 비교 전에 숫자로 강제 변환 되기 때문
"5" === 5 // false : "5"는 문자열이고 5는 숫자로 취급

객체

var o1 = {};
var o2 = {};

o1 == o2 // false
o1 === o2 // false

당연하게도 각 객체는 다른 메모리 주소를 가리키므로 동일하지 않다고함
이것이 자바스크립트 애플리케이션이 lodash나 undercore와 같은 유틸리티 라이브러리를 사용하는 이유

이 두 라이브러리에는 두 객체 혹은 두 값을 정확하게 확인할 수 있는 isEqual 함수가 있음

isEqual 함수는 속성 기반 등가 비교 방식으로 구현 됐기 때문

---

요약

var는 함수 범위 내에서 변수를 선언하고
let은 블록 범위 내에서 변수를 선언
값에 대해서는 ==
값과 형 모두에 대해서는 ===

하지만 둘 모두는 숫자, 문자열, 불린과 같은 비객체형에만 사용할 수 있음