[TIL 18] 컨텍스트 예제 풀기

💁‍♀️ 컨텍스트 생성 및 제거 과정과 그에 따른 콘솔 출력 값을 구하기💁‍♀️

const global = '전역입니다.';
const text = '안녕하세요';
let name = 'Kim';

const sayHello = (text, name) => `${text}. ${name}입니다.`

const print = (text) => {
	let name = 'Lee';
	const innerFunc = () => {
		let name = 'park';
		console.log(global);
		console.log(name);
	}
	console.log(text);
	console.log(name);
	innerFunc();
	console.log(sayHello(text,name));
}

print('반갑습니다!');
console.log(sayHello(text,name));

1. 전역

• console.log(sayHello(text,name)) 호출
• const sayHello = (text, name) => "${text}. ${name}입니다." 실행
• 전역에 있는 const text = '안녕하세요' let name = 'Kim'; 을 가져옴.
• "안녕하세요 Kim" 출력.

2. print('반갑습니다!')

• print('반갑습니다!') 호출
• const print = (text) text에 반갑습니다.
• print안에 변수 찾기
• let name ="Lee" 찾으면 name은 Lee
• const sayHello = (text, name) => "${text}. ${name}입니다." 가지고 있던, 반갑습니다와 Lee를 입력.
• console.log(sayHello(text, name)); 실행.
• "반갑습니다 Lee" 출력.

3. innerFunc();

• innerFunc() 호출
• innerFunc 안에 실행문장 확인 name 출력 변수 선언 되있음. Park
• innerFunc 안에 global 변수 선언 없어서 바깥(전역)으로 찾으러 감.
• 전역에 const global = "전역입니다." global 변수를 찾음. 전역입니다.
• console.log(text); console.log(name); 실행
• "전역입니다."와 "Park" 출력.

4. 컨텍스트 실행 순서

sayHello 실행 -> print 실행 -> innerFunc 실행 -> innerFunc 종료 -> print 종료 -> sayHello 종료

(이게 맞는 순서인가..🤨 몰겟다...)

💁‍♀️ bar의 name 값을 어떻게 참조하는지 설명해보기💁‍♀️

function foo() {
	let name = 'Kim'
	function bar() {
		console.log(name);
	}
	bar();
}

foo();

var name = 'lee';

정답은 Kim

1. foo를 호출해라
2. foo라는 함수안에 name은 Kim이라는 변수가 선언되있다.
3. bar 함수를 호출해라.
4. bar라는 함수안에 콘솔창에 출력해라 현재 name 값은 foo안에 선언되있던 Kim.
5. foo를 호출시키면 Kim 출력.