var, let, const의 차이점
var
- var로 선언된 변수는 전역 범위 또는 함수 범위이다.
- 범위 내에서 업데이트 및 재선언할 수 있다.
- 호이스팅했을 경우 undefined로 초기화된다.
let
- let으로 선언된 변수는 중괄호 안에 있는 블록 범위 내에서만 사용 가능하다.
예를들어
let greeting = "say Hi";
let times = 4;
if (times > 3) {
let hello = "say Hello instead";
console.log(hello);// "say Hello instead"
}
console.log(hello) // hello is not defined중괄호로 감싸진 hello 변수가 정의된 블록 외부에서 hello를 사용했더니 에러가 반환되는 것을 확인할 수 있다. let 변수는 블록 범위이기 때문이다.
let은 업데이트될 수 있지만, 재선언은 불가능하다.
var와 마찬가지로 let으로 선언된 변수는 해당 범위 내에서 업데이트될 수 있다. 하지만, var와 달리 let 변수는 범위 내에서 다시 선언할 수 없다.
let greeting = "say Hi";
greeting = "say Hello instead"; // 에러X
변수 범위 내에서 다시 선언하면 에러 발생
let greeting = "say Hi";
let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared그러나 동일한 변수가 다른 범위 내에서 정의된다면, 에러는 더 이상 발생하지 않는다.
let greeting = "say Hi";
if (true) {
let greeting = "say Hello instead";
console.log(greeting); // "say Hello instead"
}
console.log(greeting); // "say Hi"const
- let 선언처럼 const 선언도 선언된 블록 범위 내에서만 접근 가능하다.
const는 업데이트도, 재선언도 불가능하다.
const로 선언된 변수의 값이 해당 범위 내에서 동일하게 유지됨을 의미한다. 업데이트 하거나 다시 선언할 수가 없는 것이다.
따라서 모든 const 선언은 선언하는 당시에 초기화되어야 한다.
하지만 개체의 경우는 다소 다른 점이 있다. const 개체는 업데이트할 수 없지만, 개체의 '속성'은 업데이트할 수 있다. const 객체를 다음과 같이 선언했다면:
const greeting = {
message: "say Hi",
times: 4
}아래와 같은 작업은 불가능하지만:
greeting = {
words: "Hello",
number: "five"
} // error: Assignment to constant variable.다음의 코드는 가능하다.
greeting.message = "say Hello instead";호이스팅
호이스팅이란?
: Javascript에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅시 변수를 초기화하지 않는다.
함수 호이스팅
function 함수를 호이스팅하는 예시를 보면 호이스팅의 개념을 쉽게 이해할 수 있다.
test(); // 이 코드가 과연 실행될까..?
function test() {
document.writeln("Hoisting");
}
test();함수를 할당하는 function test(){...} 코드가 함수를 실행하는 test() 코드 보다 아래에 작성된 경우, 호이스팅 개념 없이 이론적으로 생각해 보면 맨 첫째줄 라인의 test()는 실행되지 않아야한다.
하지만 JS는 함수를 Hoisting하기 때문에 최상단의 test()코드도 정상 작동한다.
변수 호이스팅
var로 선언한 변수 호이스팅
위의 개념을 먼저 접근하고 변수 호이스팅을 보게 되면 호이스팅의 개념이 다소 헷갈릴 수 있다. 왜냐하면 변수가 호이스팅 될 때는 선언, 초기화만 된 채로 호이스팅 되고 할당까지 호이스팅 되지 않기 때문이다.
console.log(name); // undefined
var name = "James";
console.log(name); //James그래서 위의 예제에서는 var name = "James"가 작성되기 전 console.log(name)은 초기화된 var name을 출력한다는 의미로 undefined를 출력하는 것이다.
const, let으로 선언한 변수 호이스팅
const와 let은 var의 모호하고 too much로 유연한 문제점을 보완하기 위해 등장한 개념인 만큼 const와 let으로 변수가 선언되기 이전 라인에 해당 변수를 출력하는 코드를 작성한 경우 참조 오류가 발생한다.
console.log(name); // ReferenceError
const name = "James"; console.log(name); // ReferenceError
let name = "James";하지만 오류가 발생했다고 해서 const와 let으로 선언한 변수는 호이스팅의 예외가 되는 것은 아니다.
여기서 TDZ(Temporal Dead Zone)에 대한 개념이 나온다.
TDZ(Temporal Dead Zone)
console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "James";최상단 콘솔 로그에서 에러가 발생했기 때문에 let name="James"가 호이스팅이 안되는 것으로 보일 수 있다.
단순하게 말하자면 호이스팅이 안되는 것이 아니다. let, const로 선언한 변수는 호이스팅되었지만, !접근만!하지 못하게 된 것이다.
여기서 console.log(name)가 작성된 라인, 해당 zone을 일시적으로 죽은 구역이라고 이해하면 된다.'name'의 선언문이 나오기 전까지는 'name'에 접근할 수 없다는 말이 된다.
코드카타
3번문제
javascript에서 몫과 나머지를 구하는 방법(일단 JS에는 파이썬에서의 //가 존재하지 않는다.)
1. Math.floor
2. parseInt
Math.floor - 소수값이 존재할 때 소수값을 버리는 역할(내림)
const a = Math.floor(13/5)
console.log(a) // 2(참고로 올림 함수는 'Math.ceil', 반올림 함수는 'Math.round')
parseInt - 정수형으로 바꾸는 역할
const a = parseInt(13/5)
console.log(a) // 2