JS중급_변수의 부가개념

Adrian·2022년 3월 1일
post-thumbnail

▶️ 변수의 호이스팅 현상

	function sayHi(){
    	console.log('hello');
      	var name = "Kim";
    }

	sayHi();

이렇게 변수를 만들었다고 가정해보자.

	function sayHi(){
      	var name;
    	console.log('hello');
      	var name = "Kim";
    }

	sayHi();
  • 자바스크립트에선 변수의 선언부를 강제로 변수 범위의 맨 위로 끌고가서 해석하고 지나간다. 이것을 호이스팅이라고 한다.
  • 자바스크립트에서는 변수들을 최상위로 끌고 와서 undefined를 할당해두고, 이후 함수 선언을 끌고 온 뒤 변수의 할당과 함수의 실행문을 가져온다.
  • var와 동일하게 let, const도 호이스팅이 발생한다. 다만 var가 undefined를 출력하는 것과는 달리 둘은 참조에러를 발생시켜 원치않는 버그를 방지한다. 이때문에 실무에서 var키워드는 쓰이지 않는 경향이 있다.

▶️ 변수 여러개 동시에 만들기

var name, age, gender;

변수를 콤마로 구분하면 여러개를 동시에 만들 수 있다.

var name = Kim, age, gender;

선언과 동시에 할당도 할 수 있다. 이 경우 키워드를 여러번 안 써도 된다는 장점이 있다.

var age, 
    gender, 
    name;

보기 편하게 여러줄로 쓸 수도 있다.


▶️ 전역변수와 변수의 참조

	var age = 20;

	function func() {
    	console.log(age);
    }

	func();

변수에는 이런 특징이 있다. 바깥에 있는 변수는 안쪽에서 자유롭게 사용 가능하다. (=참조 가능하다.) 이를 자바스크립트에서는 closure 라고 한다.


▶️ Window 오브젝트

	window.age= 20;//전역변수 만들기
	console.log(window.age);// 전역변수 사용하기
	window.age = 30;//전역변수 변경
  • window는 전역함수, 전역변수 등을 보관하는 객체이다.
  • 즉 쌩으로 전역변수를 만들면 window에도 보관이 된다. (var 키워드 한정)
  • 전역변수를 엄격하게 관리하거나 구분짓고 싶다면, 전역변수를 만들 때와 사용할때 window를 활용해보자.(전역변수는 에러 방지를 위해 되도록 안쓰는 것이 좋다.)

더 자세한 내용을 알고 싶다면,

https://ko.javascript.info/var //(오래된 'var')
https://ko.javascript.info/global-object //(전역객체)
https://ko.javascript.info/closure //(클로저)

를 참조해보자.

profile
관조, 사유, 끈기

0개의 댓글