[JavaScript / ES6] 변수 신문법 총정리하기

💡 실습 포인트!

📌 JavaScript 에서 변수 사용하기

var name = 'Seoyun';

• 변수는 자료를 임시로 저장하는 공간이다.
• var 라는 키워드의 오른쪽에 변수 이름을 짓고, 변수에 저장할 자료를 등호를 이용하여 넣어주면 된다.
• 변수에는 object, array, function 등 모든 자료를 담을 수 있다.
• var name 이라는 부분은 선언, name='Seoyun' 이라는 부분은 값 할당이라고 표현하며, 일반적으로 변수를 만들 때에는 선언과 할당을 동시에 사용한다.
• 변수를 만들 때에는 var 외에도 let, const 라는 키워드를 사용가능한데, 다만 키워드마다 선언, 할당, 범위에서 차이가 있다.

---

💜 var

🤍 재선언 O

var name1 = 'name1-1';
var name1 = 'name1-2';

• 맨 처음에 var 키워드를 이용하여 name1 이라는 변수를 선언하였음에도, 두번째줄처럼 다시 var 키워드를 이용하여 동일하게 name1 이라는 변수를 선언할 수 있다.

🤍 재할당 O

var name1 = 'name1-1';
name1 = 'name1-3';

• 변수에 값을 재할당한다는 것은 위 코드처럼 맨처음에 변수를 만들어 할당해놓은 상태에서, 두번째줄에서 이미 만들어놓은 name1 이라는 변수에 'name1-3' 이라는 값을 집어넣는 것을 말한다.
  (할당은 값을 할당하지 않고 변수만 만들어놓은 상태에서, 나중에 변수에 값을 집어넣는 것을 말하며, 변수의 선언과 할당은 동시에도 가능하다.)

🤍 범위 : function scope

function func1(){
  var name1 = 'Seoyun';
  console.log(name1);  // Seoyun
}

console.log(name1);  // 에러

• 모든 변수에는 존재할 수 있는 범위가 정해져있는데, var 변수는 존재 범위가 function 이다.
• 위처럼 var 변수를 function 내에서 만들면 function 내에서만 사용이 가능하기 때문에, function 의 외부에서 부르면 에러가 발생한다.
• 즉, 이러한 function scope 를 가지는 변수는 함수 안에서 선언되면 함수 밖에서 접근하지 못한다. 하지만 블록 안에서 선언된 변수는 블록 밖에서 참조가 가능하다.

---

💜 let

🤍 재선언 X

let age2 = 10;
let age2 = 20;  // 에러

• let 키워드로 변수를 만들면 같은 이름의 변수를 두 번 이상 재선언할 수 없다.
• 만약 재선언하게 된다면 에러가 발생하는데, 이는 나중에 변수 이름을 실수로 중복해서 만드는 실수를 방지해주기 위함이다.

🤍 재할당 O

let age2 = 10;
age2 = 30;  // 가능

• let 키워드도 var 키워드와 동일하게 재할당이 가능하다.

🤍 범위 : block scope

if (true) {
    let age2 = 50;
    console.log(age2);  // 50
}

console.log(age2);  // 에러

• let 키워드로 선언한 변수는 중괄호 내에서 만들었을 때 중괄호 내에서만 사용이 가능하다.
• 따라서, 중괄호의 외부에서 부르면 에러가 발생한다.
• 즉, 이러한 block scope 를 가지는 변수는 중괄호 안에서 선언되면 중괄호 밖에서 참조가 불가능하다.

---

💜 const

🤍 재선언 X 

const place3 = 'place3-1';
const place3 = 'place3-2';  // 에러

• const 키워드로 변수를 만들면 let 키워드와 마찬가지로, 같은 이름의 변수를 두 번 이상 재선언할 수 없다.
• 만약 재선언하게 된다면 에러가 발생하는데, 이는 나중에 변수 이름을 실수로 중복해서 만드는 실수를 방지해주기 위함이다.

🤍 재할당 X

const place3 = 'place3-1';
place3 = 'place3-3';  // 불가능

• var 키워드와 let 키워드와는 달리, const 키워드로 변수를 만들면 값을 재할당하는 것이 불가능하다.
• 즉, const 키워드를 이용하면 나중에 등호를 이용해 값을 변경하는 게 안된다는 것이다.
• 애초에 const 는 constant 의 약자로 바뀌지 않는 일정한 값을 의미하므로, 값이 바뀌면 심각한 문제가 발생할 수 있는 경우에 사용하면 좋다.

// const 로 object 를 만들었을 때, object 의 내부 값을 변경해도 에러가 발생하지 않는다. (const 변수 자체를 재할당한 것이 아니므로!)
const person1 = { name1 : 'Jihyeon'};
person1.name1 = 'Seoyun';  

// 수정이 불가능한 object 를 만들고 싶을 때는 .freeze() 사용하면 된다.
const person2 = { name2 : 'Jihyeon'};
Object.freeze(person2); // 이제 person2 object 를 수정하지 못하게 된다.
person2.name2 = 'Seoyun';

• const 변수에 object 를 담으면 object 내의 데이터는 변경이 가능하다.
• 왜냐하면 이 경우는 엄밀하게 말하자면 변수를 재할당한 것이 아니기 때문이다.
• 완전히 변경불가능한 object 를 만들고 싶다면, Object.freeze() 라는 JavaScript 내장함수를 사용하면 된다.
  (하지만, object 내의 object 까지 freeze 해주지는 않는다는 점을 기억하자!.)

🤍 범위 : block scope

• const 키워드로 선언한 변수도 let 키워드로 선언한 변수와 동일하게 중괄호 내에서 만들었을 때 중괄호 내에서만 사용이 가능하다.
• 따라서, 중괄호의 외부에서 부르면 에러가 발생한다.
• 즉, 이러한 block scope 를 가지는 변수는 중괄호 안에서 선언되면 중괄호 밖에서 참조가 불가능하다.