[JS] Chapter 7. 스코프

 

 

 

 

 

 

 

스코프

 

 

실습) 개념 학습 전 개발자 도구로 실행해보기

 

 

let username = 'kimcoding';
if (username) {
  let message = `Hello, ${username}!`;
  console.log(message); // Hello, kimcoding!
}

console.log(message); // undefined

 

첫 번째 콘솔 출력 결과 → Hello, kimcoding!

두 번째 콘솔 출력 결과 → undefined

why? 함수 안에 선언된 변수 message가 바깥쪽에 접근 할 수 없기 때문!

 

 

스코프

 

변수에 접근할 수 있는 범위가 존재하는데 이를 스코프라고 함

 

 

 

스코프의 정의와 규칙

 

 

 

 

 

기억해두자!

 

1. 바깥쪽 스코프에서 선언된 변수는 안쪽 스코프에서 사용 가능
2. 안쪽에 선언한 변수는 바깥쪽 스코프에서는 사용 불가능
3. 지역 스코프에서 선언한 변수 : 지역 변수
4. 전역 스코프에서 선언한 변수 : 전역 변수
5. 지역 변수보다 전역 변수에 우선순위를 줌

 

 

실습) 아래 실습으로 출력된 콘솔 결과 확인해보기

 

let name = '김코딩';

function showName() {
  let name = '박해커'; // 지역 변수
  console.log(name); // 두 번째 출력
}

console.log(name); // 첫 번째 출력
showName();
console.log(name); // 세 번째 출력

 

 

출력 결과

 

김코딩

박해커

김코딩

 

스코프의 종류

 

블록 스코프(block scope) : 중괄호, 화살표로 둘러싼 범위

함수 스코프(function scoope) : 함수로 둘러싼 범위

 

스코프 변수 선언

 

let, var, const 키워드 비교

 

 

 

스코프 변수 선언에서 주의할 점

 

☑️ var로 선언된 전역 변수 및 전역 함수는 window 객체에 속함

 

-브라우저에는 window라는 객체가 존재

var로 선언된 전역 변수와 전역 함수가 window 객체에 속함

 

 

var myName = '김코딩';
console.log(window.myName); // 김코딩

function foo() {
	console.log('bar');
}

console.log(foo === window.foo); // true

 

☑️ 전역 변수는 최소화 하기

☑️ let, const를 주로 사용하기

☑️ 선언 없는 변수 할당 금지

 

→ strick mode를 사용하면 실수 방지

 

age = 90; // 선언이 없기 때문에 전역 변수 취급