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

💡 실습 포인트!

💜 JavaScript 에서의 변수, 함수 Hoisting 현상 알아보기

• JavaScript 는 변수나 함수를 선언하면, Hoisting 이라는 현상이 발생한다.
• Hoisting 이란 변수나 함수의 선언 부분만 변수의 범위 맨 위로 강제로 끌고 올라가서 가장 먼저 해석하는 것을 말한다.

function func(){
  
  console.log('hello');
  var name = 'Seoyun';
  
}

• 예를 들어, 위와 같은 func() 함수가 있고, 그 함수 안에 name 이라는 변수를 만들었다고 가정하자.

 

function func(){

  var name;
  console.log('hello');
  name = 'Seoyun';
  
}

• 그럼 JavaScript 가 func() 함수의 코드를 해석하는 순서는 위와 같다.
• 변수의 선언 부분인 var name 을 강제로 변수의 범위 맨 위로 끌고 올라가서 해석하고 지나가는 것이다.
• 이러한 Hoisting 현상은 함수를 만들어도, 변수를 let, const 키워드를 사용해도 똑같이 발생한다.

---

💜 변수 여러 개 만들기

var name, age, sex;

• 변수를 콤마( , ) 로 구분하면 여러 개를 동시에 만들 수 있다.
• 위와 같이 코드를 작성하면 var 키워드를 변수의 개수만큼 사용하지 않아도 변수가 3개가 생성이 된다.

 

var name = 'Seoyun', age, sex;

 

• 일부 혹은 전체 변수에 선언과 동시에 할당을 하고 싶으면 위와 같은 형식으로 코드를 작성하면 된다.

---

💜 전역변수와 변수의 참조 알아보기

🤍 변수의 참조 알아보기

var age = 20;

function showAge(){
  console.log(age)
}

showAge();  // 20

• 변수의 특징 중에는 바깥의 변수는 안에서 자유롭게 사용이 가능하다는 점이 있다.
• 이것을 개발자용어로 참조 가능하다라고 표현하는데, JavaScript 에서는 이 현상을 closure 라고 한다.
• 예를 들어, 위와 같은 코드가 있으면 showAge() 함수 밖에 있는 age 를 showAge() 함수 안에서 가져다 사용하는 것이 가능하다는 것이다.
• 만약, showAge() 함수 안에 age 라는 변수를 정의해놓은 게 있다면 그 변수를 가져다 사용하겠지만, 없으면 자연스럽게 밖에 있는 변수를 가져다 참조하여 사용한다.

---

🤍 전역변수 알아보기

<script>
  var age = 20;

  function showAge(){
    console.log(age)
  }
</script>

• 프로그래밍에서는 전역변수라는 것이 있다.
• 전역변수란, 모든 함수나 if 문, 혹은 for 문 내부에서 공통적으로 사용(참조)할 수 있는 유용한 변수를 의미한다.
• 전역변수를 만들어 사용하고 싶다면 <script></script> 안의 제일 바깥 영역에 변수를 만들어주면 된다. 
• 위와 같이 age 라는 전역변수를 만들어두면, 그 밑에 for 문, if 문, 함수 등에서 모두 age 라는 변수를 사용할 수 있다.

 

<script>
  var age = 20;
  
  console.log(age);  // 20
  console.log(window.age);  // 20
</script>

• 만약 var 키워드로 전역변수를 만들면 이는 window 라는 object 에도 보관이 된다.
• 따라서, 위 경우에 window.age 와 같이 코드를 작성해도 var 키워드로 만든 age 와 동일하게 출력이 가능하다.

 

<script>
  window.age = 20;  // 전역변수 만들기
  console.log(window.age);  // 전역변수 사용하기
  window.age = 30;  // 전역변수 변경하기
</script>

• 전역변수를 엄격하게 관리하거나 구분하고 싶다면, 전역변수를 만들 때 혹은 사용 및 변경할 때 window 를 활용해보는 것도 좋다.
• node.js 환경에서는 window 대신 global 이라는 object 를 활용할 수 있다.