[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 5회차 미션

강의

09 변수의 유효 범위

scope of variables 변수가 선언되고 사용되는 공간이 어느 범위에서 유효한 지 기준을 정해주는 규칙

const, let의 유효 범위

블록 스코프

블록

{} 중괄호로 이루어진 하나의 덩어리
중괄호로 선언된 공간 안에서만 유효

// 블럭
{
  const name = "Mark";
  console.log(name); // 문제 없이 출력
}
console.log(name); // name이 정의되지 않았다는 에러 뜸

// 밖에서 안으로
let age = 37;
{
  age++; // 블럭 밖에서 선언한 것은 안에서 사용가능
  console.log(age); // 38
}
console.log(age); // 38

// 중첩
let age = 10;
{
  {
    {
      // 아무리 들어가도 바깥에 있는 변수 알 수 있음!
      console.log(age); // 10
    }
  }
}

조건문과 반복문에서도 블록을 사용한다!
블록 안에서 사용한 변수는 블록 밖에서 알 수 없다.
함수 정의 할 때도 블록을 사용 -> 마찬가지로 블록 내부 선언된 변수는 밖에서 알 수 없다.
블록 내에서만 유효

function hello(){
    const name = 'Mijeong';
    console.log(name);
}
// console.log(name); 사용불가

//arrow 함수
function hello2 = () => {
    const age = 37;
    console.lg(age);
}
// console.log(name); 사용불가

var 의 유효 범위

함수 스코프

일반적으로 const와 let처럼 블록 스코프를 가짐 but JS는 함수 스코프를 가진 변수 선언 방법인 var를 가짐
ES5까지 JS의 가장 대표적 선언 방법이었음
ES6부터 const, let을 사용
블록스코프가 보다 직관적으로 코드 이해가 되므로 함수스코프보다 많이 사용

function() {} 함수

함수 선언 영역이 하나의 유효 범위가 됨!

아래와 같이 작성한 코드는 문제없음

var a = 0;

(function () {
  a++;
  console.log(a);
})();
console.log(a);

아래 코드는 에러 발생!

(function () {
  var b = 0;
  console.log(b);
})();

b++;
console.log(b); // b is not defined

var를 블록스코프에서 사용하면?

블록스코프 바깥에서 선언된 var 변수를 블록 안에서 사용하는 경우

아래와 같은 코드는 블록스코프 변수인 const와 let처럼 var도 문제가 없음

// 블록 스코프
var c = 0;

{
  c++;
  console.log(c);
}

블록스코프 안에서 선언된 변수 var를 블록 바깥에서 사용하는 경우

var는 블록스코프는 영향을 미치지 않음

// var에서는 문제가 없음!
{
  var d = 0;
  console.log(d);
}
console.log(d);

var보다는 let이나 const를 많이 사용하게 됨!

25 - 09 변수의 유효 범위

10 var 와 호이스팅

MDN web docs의 용어 설명

자바스크립트에서는 함수 선언하고 호출하는 경우, 호출하고 선언하는 경우 모두 가능

// 함수 먼저
function hello1() {
  console.log("hello1");
}
hello1();

// 함수 호출을 먼저
hello2();

function hello2() {
  console.log("hello2");
}

hoisting

아래 있는 선언(만)을 끌어올리다

함수 뿐 아니라 변수에서도 사용 후 선언이 가능!

age = 6;
age++;
console.log(age);

var age;

console.log(name); // undefined
name = "Mijeong";
console.log(name); // Mijeong
var name;

아래 결과도 위와 동일

why? 선언부만 위로 올라가기 때문!

console.log(name); // undefined
name = "Mijeong";
console.log(name); // Mijeong
var name = "Lala";

이 코드는 즉

var name;
console.log(name);
name = Mijeong;
console.log(name);
name = "Lala";

와 동일하다

let을 사용할 경우 호이스팅 문제가 없어짐 -> 먼저 선언을 해야 사용이 가능!

// let name; 이렇게 올라가는 호이스팅 현상이 일어나지 않음!
console.log(name);
name = "mijeong";
console.log(name);
let name;

25 - 10 var 와 호이스팅

5회차 인증샷

올인원 패키지 : 프론트엔드 개발👉https://bit.ly/3m0t8GM