[JavaScript] JS_개념 및 동작원리 4. Scope & Hoisting

jungeundelilahLEE·2020년 9월 15일
0

# INDEX

1. Values & Data type
2. Operators
3. Control flow
4. Scope & Hoisting
   4-1. Concept of Scope
   4-2. local scope & global scope
   4-3. Rule
   4-4. var vs let vs const
   4-5. Global variable
   4-6. Concept of Hoisting

5. Object & Array
6. This
7. Prototype & Inheritance
8. Function
9. Callback function
10. Closuer
11. Class
12. Others

4. Scope & Hoisting


4-1. Scope (스코프) 개념

- Scope : 변수 접근 규칙에 따른 유효 범위 (변수와 그에 할당된 값이, 어떤 범위 안에서 사용되는지를 판단하는 범위)

  • 변수는 어떠한 환경 내에서만 사용 가능함 (모든 프로그래밍 언어는 각각 언어마다 변수 접근 규칙이 있음)
  • JS는 기본적으로 함수가 선언되는 동시에 자신만의 scope를 가짐

// ex) let의 유무

let name = "richard";	// 전역변수
function isName() {
  let name = "jack";	// 지역변수 => 위의 변수name과는 완전히 별개의 변수
  console.log(name);	// 2번) jack
}
console.log(name);	// 1번) richard
isName();		// isName함수가 실행됨(go up!)
console.log(name);	// 3번) richard
// console출력 : richard jack richard
// ex) let의 유무

let name = "richard";	// 전역변수
function isName() {
  name = "jack";	// 전역변수 => 선언(let)이 없기 때문에 전역변수 name을 그대로 가져옴
  console.log(name);	// 2번) jack
}
console.log(name);	// 1번) richard
isName();		// isName함수가 실행됨(go up!)
console.log(name);	// **3번) jack
// console출력 : richard jack jack

4-2. local scope & global scope

  • 지역변수와 전역변수의 사용범위에 주의할 것!
  • 선언문 var 와 let으로도 인해 크게 달라질 수 있음
  • 안쪽 scope에서 바깥 변수나 함수를 접근하는 것은 가능
  • 바깥쪽 scope에서 안쪽 변수나 함수를 접근하는 것은 불가능
  • local scope 안쪽에서 선언된 변수는 바깥에서 사용할 수 없음

4-3. Rule

  • scope는 중첩이 가능 (함수 안에 함수를 넣는 등..)
  • global scope는 최상단의 scope이므로, 전역변수는 어디서든 접근이 가능
  • 지역변수는 해당 함수 내에서 전역변수보다 더 높은 우선순위를 가짐

4-4. var vs let vs const

  • var : JS는 기본적으로, 함수 단위로 자신만의 scope를 가짐
  • let : block단위로 scope를 구분했을 때 예측하기 쉬운 코드를 작성할 수 있음
  • const :
    - 값이 변하지 않는 변수, 즉 상수를 정의할 때 사용
    - let 키워드와 동일하게 "block scope"를 따름
    - 값을 재정의하려고 하면, typeerror를 띄움

키워드 정리

letconstvar
유효범위block scopeblock scopefunction scope
값의 재할당가능불가능가능
재선언불가능불가능가능
// ex)

for (var i = 0; i < 5; i++) {
  console.log(i); // 0,1,2,3,4
}
console.log("final i:" , i); //final i: 5

=> block범위를 벗어나도 같은 function scope안에서는 사용 가능

// ex) var

function greetSomeone (firstName) {	//firstName = "Steve"
  var time = "night";			//time = "night"
  if (time === "night") {    
    var greeting = "Good night";	//greeting = "Good night"
  }
  return greeting + " " + firstName;
};
greetSomeone("Steve"); 			//"Good night Steve"
// ex) let

function greetSomeone (firstName) { //first = "Steve"
  let time = "night";	//time = "night"
  if (time === "night") {    
    let greeting = "Good night";
    //여기서는?? all 사용 가능??
  }
  return greeting + " " + firstName;
};
greetSomeone("Steve");

4-5. Global variable (전역변수)

전역범위를 대표하는 객체 : window

  • global scope에서 선언된 함수, var 키워드를 이용해 선언된 변수는 window객체와 연결됨
    (**let 키워드로 선언한 변수는 window객체와 연결되지 않음)
  • 전역 볌위에 변수를 사용하는 것은 항상 주의할 것!

선언없이 초기화된 전역 변수

  • never ever ever! 선언 키워드 (var, let, const) 없이 변수를 초기화하지 말 것!
function foo () {
  age = 1;		// age는 전역변수로 취급됨 // age === window.age
  console.log(age);	// error가 날까? 안남..
}
foo (); // 1
console.log(age) // 1

=> "use strict" : 위와 같은 실수를 막기 위해 사용 (문법적 실수를 error로 판단)

4-6. Hoisting (호이스팅) 개념

** Hoist : to lift something heavy, sometimes using ropes or a machine

- Hoisting : 함수 내의 모든 변수 선언문이 스코프 내에서 최상위로 끌어올려져, 해당 함수 block의 최상단에 선언되는 것

  • JS는 함수가 실행되기 전, 함수 내에서 필요한 변수값들을 모두 모아 function block의 최상단에 선언함
  • 대상 : var 변수 선언 & 함수 선언문 (only 2) / var 변수 선언이 함수 선언보다 우위
  • 주의할 것 : 선언 부분만 호이스팅되며, 할당 부분은 해당되지 않음

** tip! 함수, 변수가 호이스팅으로 인해 스코프가 혼란스럽게 될 수 있으므로 되도록 코드 상단부분에 선언하기!

// ex1) 다음 코드 비교해보기
var a = 1;
console.log(a);	// 1

console.log(a);	// undefined	
var a = 1;
// 여기서 에러가 나지 않는 이유는? 다음의 순서로 진행되기 때문!
// 1) var a;		// 선언 부분이 호이스팅
// 2) console.log(a);	// a를 찾을 수 없음 (undefined)
// 3) a = 1;		// a에 1이 할당됨
profile
delilah's journey

2개의 댓글

comment-user-thumbnail
2021년 1월 4일

와우.. 정리 쩌러주시네
유익하게 잘봤습니다!

선언없이 초기화된 전역 변수
age : 1 -> age = 1 (오타 수정)

function foo () {
  age = 1;		// age는 전역변수로 취급됨 // age === window.age
  console.log(age);	// error가 날까? 안남..
}
foo (); // 1
console.log(age) // 1
1개의 답글