[JS] Scope

·2022년 10월 10일
0

JavaScript

목록 보기
8/25

Scope

유효 범위
변수의 접근성과 생존 기간을 제어

let func1 = function(){
let a = 1;
let b = 2;
	console.log(a+b);
	return a+b
};
let a = 20;
func1();
//
3

비록 변수 이름이 a로 같지만 첫번째 a는 func1 함수 안에서만 존재하기 때문에 전역에 있는 두번째 a와는 상관이 없다

밖에서 b의 값이 알고 싶다면 ?

let func1 = function(){
let a = 1;
let b = 2;
	console.log(a+b);
	return a+b
};
console.log(b);
// error

전역에서는 함수 스코프 안에 접근할 수 없다
스코프는 이름이 충돌하는 문제를 덜어주고 자동으로 메모리를 관리

  • 자바스크립트의 유효범위
  1. 전역 스코프
  2. 함수 스코프
  3. 블록 스코프(ES6)

전역 스코프

스크립트 어디서든 접근 가능하고 사용이 쉬움
때문에 타인과의 협업이나 라이브러리 사용시 충돌 가능성(지양)

함수 스코프

함수 내부에서 정의된 변수와 매개변수는 함수 외부에서 접근 X
함수 내부에서 정의된 변수라면 함수의 어느 부분에서도 접근 O

function test(){
val = "hello";
var val2 = "world";
}
test()
console.log(val2); // error

전역에서 함수 스코프 안에 있는 변수 접근 안됩니다!
그 런 데

function test(){
val = "hello";
var val2 = "world";
}
test()
console.log(val); // "hello"

?!
가능한 이유 val이 선언된 함수가 아니기 때문에! 전역 변수로 인식된다 헉

let func = function(){
let a = 1;
let b = 2;
	let func2 = function(){
	let b = 5;
	let c = 6;
		a = a + b + c;
		console.log(a);
	};
    func2();
}
func(); // 12

func 함수 안에 func2 함수가 있고
func 함수가 실행되면 func2(); 자동 실행하고 그럼 안에 있는

let func2 = function(){
	let b = 5;
	let c = 6;
		a = a + b + c;
		console.log(a);
	};

코드가 자동으로 작동될 것
func(); 실행해보자 // 12
func2 함수에서 a 선언한 적 없지만 부모 함수 탐색 가능 부모 함수에서 선언되었네?
그래서 변수 a를 쓸 수 있다!
1 + 5 + 6 // 12

블록 스코프

중괄호 안에서만 접근 가능
블록 내부에 정의된 변수는 블록 실행이 끝나면 해제됨

if(true){
var value = "hello";
}
console.log(value); // "hello"

if(true){
let value = "world";
}
console.log(value); // "hello"

let -> 중괄호 블록 스코프 안에서만 존재하는 변수
전역 공간에서 value = "world" 값에 접근하지 못하고
전역에 설정했던 value = "hello" 값을 사용한 것이다
let value = "world";을 var value = "world"; 라고 하면 "world" 출력

profile
주니어 프론트엔드 웹 개발자 🐛

0개의 댓글