✅ var & let (mutable data type)
🔔 var는 변수 중복 선언 가능, hositing 현상, no block scope 으로 인해 사용하지 않는 것을 추천한다!
- 변수 중복 선언:
var x = 1;
var x =50;
var x; // 이때는 값을 할당하지 않았으므로,
console.log(x); // 50
위의 예제처럼 var는 변수를 중복해서 선언+초기화 가 가능하다. 만약 사용자가 동일한 이름의 변수가 이미 선언되어 있다는 것을 모르고 의도치 않게 중복 선언을 하고 값을 할당한다면, 먼저 선언된 변수값이 변경되는 부작용이 발생하게 된다.
📍 let 은 var와 달리 변수 중복 선언이 불가능하다. 위의 예시처럼 이름이 같은 변수를 중복 선언할 경우, 문법 에러가 발생한다.
- hositing : 어디에 선언했는지 상관없이, 항상 젤 위로 선언을 올려준다. 에러는 발생하지 않지만, 프로그램의 흐름상 맞지않고, 가독성을 떨어뜨리며, 오류를 발생시킬 여지를 남긴다.
// 이때 변수 age는 undefined 로 초기화된다.
console.log(age); //undefined
age = 50;
console.log(age); // 50
var age;이처럼 호이스팅 현상이 일어나는 이유는 var 키워드로 선언한 변수는 런타임 이전에, 암묵적으로 "선언 단계"와 "초기화 단계" 가 일어나기 때문이다. 선언단계에서 스코프에 변수 식별자를 등록하여, 자바스크립트 엔진에 변수의 존재를 알린다. 그렇기 때문에 초기화 단계에서 undefined 로 변수를 초기화하게 되고, 변수 선언문 전에 변수에 접근해도 이미 스코프에 변수가 존재하기 때문에 에러가 발생하지 않고, undefined로 초기화한 변수를 반환하게 된다.
📍 let 은 var와 달리 호이스팅 현상이 일어나지 않는데, 그 이유는 "선언 단계"와 "초기화 단계" 가 분리되어 발생하기 때문이다. var 키워드는 선언단계와 초기화 단계가 동시에 진행되었지만, let는 선언단계만 먼저 실행되며, 초기화단계는 변수 선언문에 도달했을 때 실행된다. 즉 변수선언문에 도달하기 전에 먼저 변수에 접근하려고 하면, 참조 에러가 발생한다.
(❔ 알고보니, let과 const 는 호이스팅 현상이 일어나지 않는 것처럼 보일 뿐.. 일어난다고 한다...😭 다시한번 자세히 공부해봐야 할것같다!)
- block scope
{
let age;
age = 5;
}
console.log(age);
즉 블럭 안에 선언된 변수는 블럭 안에서만 사용이 가능하지만, var 는 블럭 안에 선언된 변수도 블럭 밖에서 사용이 가능하다. (단, 함수의 코드 블록은 제외한다.)
📍 let 은 var와 달리 모든 코드 불록을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.
let i = 50;
function example(){
let i=70;
for(let i=1; i<3; i++){
console.log(i); // 1,2
}
console.log(i); // 70
}
example();
console.log(i); // 50✅ const (immutable data type)
값을 한 번 할당하면, 값이 변하지 않는데 (재할당 x), 반드시 선언과 값 할당을 동시에 해야한다. let 과 마찬가지로 호이스팅 현상이 일어나지 않는다.
const age = 50;const 를 쓰면 좋은 이유에는 security(보안성), thread safety(여러 스레드에서 값을 변경하려고 하는 것을 보호), reduce human mistakes 이 있다.
단, const 키워드로 선언된 변수에 객체를 할당할 경우에는 값을 변경할 수 있다!
const student = {
name: 'Kim';
};
student.name = 'Park';
console.log(name); // {name: "Park"}✅ 연산문
// 1. String concatenation
console.log('my'+'cat');
console.log('1'+2);
console.log(`string literals: 1+2=${1+2}`);
//2. Increment and decrement operators
let counter = 2;
const preIncrement = ++counter;
// counter = counter = 1;
// preIncrement = counter;
const postIncrement = counter++;
// postIncrement = counter;
// counter = counter + 1;
//3. Logical operators : || (or), && (and), ! (not)
//4. Equality == , ===
const ellie1 = {name: 'ellie'};
const ellie2 = {name: 'ellie'};
const ellie3 = ellie1;
console.log(ellie1 == ellie2); // false -> 레퍼런스가 다름
console.log(ellie1 === ellie2); // false -> 레퍼런스가 다름
console.log(ellie1 === ellie3); // true
console.log(0 == false); // true
console.log(0 === false); // false
console.log(''== false); // true
console.log('' === false); // false
console.log(null == undefined); // true
console.log(null === undefined); // false연산문의 경우 드림코딩 강의 내용만 간단히 정리하였다.
드림코딩 과 모던 자바스크립트 Deep Dive 을 참고하여 작성하였습니다.😀
