moon

요약

1. 선언

var - 중복 선언 가능

let, const - 중복 선언 불가능

2. 초기화

var, let - 초기화를 안 해도 된다.

const - 선언과 동시에 초기화를 해야 한다.

3. 재할당

var, let - 재할당 가능

const - 재할당 불가능

4. 호이스팅

var - 호이스팅 O

let, const - 호이스팅 X

5.스코프(참조 가능한 영역)

var - function

let, const - 블럭{}

1. 선언  및 초기화

var v; //초기화를 안해도 된다.
var v = 'var'; //중복선언 가능

let l; //초기화를 안해도 된다.
let l = 'let'; //중복선언 불가능(Uncaught SyntaxError: Identifier 'l' has already been declared)

const c; //Error(Uncaught SyntaxError: Missing initializer in const declaration)
const c = 'const'; //중복선언 불가능(Uncaught SyntaxError: Identifier 'c' has already been declared)

2. 재할당

var v = 'var';
console.log(v); //output : var
v='var2';
console.log(v); //output : var2

let l = 'let';
console.log(l); //output : let
l = 'let2';
console.log(l); //output : let2

const c = 'const';
c= 'const2'; //Error(Uncaught TypeError: Assignment to constant variable.)

3. 호이스팅

호이스팅이란?

javascript 엔진이 작동할 때(실행 컨텍스트 단계) var, function 등 선언 한 변수, 함수 등을 메모리에 저장하는 걸 의미합니다.

아래의 코드를 예를 들어보겠습니다.

 example();

function example() {
	console.log('Test');
}

한 줄씩 차례대로 진행하면 위와 같은 코드는 오류가 발생해야 정상이지만 호이스팅이 발생하면서 example 함수를 메모리에 저장했기 때문에 오류가 발생하지 않습니다.

var와 let, const 호이스팅 차이

아래의 코드를 보면 var는 에러가 안 나고 let, const는 Uncaught ReferenceError가 발생하는 걸 확인할 수 있습니다.

console.log(v)
var v = 'var';
//output : undefined

console.log(l)
let l = 'let';
//output : Uncaught ReferenceError: Cannot access 'l' before initialization

console.log(c)
const c = 'const';
//output : Uncaught ReferenceError: c is not defined

변수는 선언, 초기화, 할당의 단계를 걸쳐 선언되는데 이때 var와 let, const 차이가 발생합니다.

var의 경우 선언 시 선언과 초기화를 동시에 진행하고 (이때 undefined로 초기화 됩니다)

let, const의 경우 선언 시에 선언 단계만 진행합니다.(선언 단계에만 있을 때 TDZ 영역에 있다고 말합니다)

(※TDZ란? 초기화되지 않은 변수가 있는 영역)

호이스팅이 발생할때 TDZ에 있는 영역을 제외 하고 발생하기 때문에 위와 같은 차이가 발생합니다.

(※참고로 let, const, class는 TDZ에 영향을 받습니다.)

호이스팅 참고 URL : https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

4. 스코프

스코프란 변수, 함수, 클래스의 유효 범위를 의미합니다.

스코프는 선언된 위치에 따라 전역 스코프, 지역 스코프로 구분합니다.

전역 스코프 - 어디서든 참조 가능

지역 스코프 - 선언한 지역 범위에서 참조 가능

let g = 1; // 전역 스코프
function print() { 
	let l = 1; //지역 스코프
}
//변수 g는 어디서든 접근이 가능하지만 변수 l은 print 함수 안에서만 접근이 가능합니다.
//만약 변수 l을 print 함수 밖에서 접근시 ReferenceError가 발생합니다.

-var : function 스코프

-let, const : 블럭{} 스코프

if(true) {
	var v = "var";
}
console.log(v);
//output : var

if(true) {
	let l = "let";
}
console.log(l);
//output : Uncaught ReferenceError: l is not defined

if(true) {
	const c = "const";
	console.log("{} scope :"+c)
}
console.log("function scope"+c);
//output : 
//{} scope :const
//Uncaught ReferenceError: c is not defined

위의 코드를 보면 var는 function 스코프 let, const는 {}스코프 단위로 변수에 참조할 수 있단 걸 알 수 있습니다.

이렇게 var, let, const 차이를 알아보았습니다.

var 변수로 선언된 변수는 for문 같은 반복문이 끝나고도 접근이 가능하기고 중복 선언 등과 같은 문제점이 있기 때문에  let, const를 사용하시는 걸 추천드립니다.

console.time()

-사용 방법

console.time('time');
for(var i=0; i<50000; i++){}
console.timeEnd('time');

-결과

time: 0.971923828125 ms

-참고 URL : https://developer.mozilla.org/en-US/docs/Web/API/console/time

Performance.now()

-사용방법

var time0 = performance.now();
for(var i=0; i<50000; i++){}
var time1 = performance.now();
console.log("time: " + (time1 - time0) + ' ms');

-결과

time: 0.7999999523162842 ms

-참고 URL : https://developer.mozilla.org/en-US/docs/Web/API/Performance

console.time() , performance.now() 비교

console.time('console.time()');
for(var i=0; i<50000; i++){}
console.timeEnd('console.time()');

var time0 = performance.now();
for(var i=0; i<50000; i++){}
var time1 = performance.now();
console.log("performance.now(): " + (time1 - time0) + ' ms');

console.time(): 0.965087890625 ms
performance.now(): 0.7999999523162842 ms

결과를 보면 performance.now()이 더 정확하게 나오는 걸 확인이 가능합니다.

대신 간단하게 쓸 수 있는 건 console.time()입니다.

performance은 .mark() , .measure() 등등 많은 기능이 있으니 참고 URL에서 확인하고 사용하시면 됩니다.

function 으로 값을 넘길때 공백으로 인해 오류가 생길경우 아래와 같이 공백을 치환해서 넘겨주면 된다.

function Test1()
{
	var text = "테스트 중 입니다."
    Test2(text.replace(/ /gi, ' '));
}

function Test2(text)
{
	console.log(text);
}

replace는 처음 한개만 바꿔주기 때문에 문자열에 있는 모든 공백을 바꿔주기 위해선 gi라는 정규식을 쓰면 됩니다.