์ฐ๋ฆฌ๊ฐ ์์ฑํ๋ ์ฝ๋์ ์ ๊ทผ ๋ฒ์๋ฅผ ๊ฒฐ์ ํ๋ ๊ฐ๋ ์ด๋ค.
var x = 'global';
function foo() {
var x = 'function scope';
console.log(x) // 'function scope'
}
foo();
console.log(x) // 'global'
์ ์์ ์์ ์ ์ญ์ ์ ์ธ๋ ๋ณ์ x
๋ ์ด๋์๋ ์ฐธ์กฐ๊ฐ ๊ฐ๋ฅํ๋ค. ํ์ง๋ง foo
๋ด์ ์ ์ธ๋ ๋ณ์ x
๋ ํจ์ foo
๋ด๋ถ์์๋ง ์ฐธ์กฐํ ์ ์๊ณ , ์ธ๋ถ์์๋ ์ฐธ์กฐํ ์ ์๋ค. ์ด๋ฌํ ๊ท์น์ ์ค์ฝํ๋ผ๊ณ ํ๋ค.
var x = 'global';
function foo() {
x = 'function scope';
console.log(x) // 'function scope'
}
foo();
console.log(x) // 'function scope'
ํจ์์ง์ญ์์ ์ ์ญ๋ณ์๋ฅผ ์ฐธ์กฐ ํ ์ ์์ผ๋ฏ๋ก, ์ง์ญ๋ณ์์ ๊ฐ์ด ๋ณ๊ฒฝ๋๋ฉด ์ ์ญ๋ณ์์ ๊ฐ๋ ๋ณ๊ฒฝ๋๋ค. ๋ด๋ถํจ์์ ๊ฒฝ์ฐ ์ ์ญ๋ณ์๋ ๋ฌผ๋ก ์์ ํจ์์์ ์ ์ธํ ๋ณ์์ ์ ๊ทผ/๋ณ๊ฒฝ์ด ๊ฐ๋ฅํ๋ค.
: ์ฝ๋ ์ด๋์์๋ ์ฐธ์กฐํ ์ ์๋ค. => ์ ์ญ๋ณ์
: var
๋ก ์ ์ธํ ์ ์ญ๋ณ์๋ ์ ์ญ๊ฐ์ฒด window
์ ํ๋กํผํฐ์ด๋ค.
var global = 'global';
function foo() {
var local = 'local';
console.log(global); // global
console.log(local); // local
}
foo();
console.log(global); // global
console.log(local); // Uncaught ReferenceError: local is not defined
: ์ฝ๋ ๋ธ๋ก์ด ๋ง๋ ์ค์ฝํ. ํจ์ ์์ ๊ณผ ํ์ ํจ์์๋ง ์ฐธ์กฐํ ์ ์๋ค. => ์ง์ญ๋ณ์
if(true) {
var x = 5;
}
console.log(x); // 5
// ๋ณ์ x๋ ์ฝ๋๋ธ๋ก ๋ด์์ ์ ์ธ๋์๋ค.
// ํ์ง๋ง javascript๋ ํจ์ ๋ ๋ฒจ ์ค์ฝํ์ด๊ธฐ ๋๋ฌธ์,
// ์ฝ๋๋ธ๋ก ๋ด์ ์ ์ธ๋์๋ค ํ ์ง๋ผ๋
// ๋ชจ๋ ์ ์ญ์ค์ฝํ๋ฅผ ๊ฐ๊ฒ ๋๋ค.
// ๋ณ์ x๋ ์ ์ญ๋ณ์์ด๋ค.
var a = 10; // ์ ์ญ๋ณ์
(function () {
var b = 20; // ์ง์ญ๋ณ์
})();
console.log(a); // 10
console.log(b); // Error: 'b' is not defined
var x = 'global';
function foo () {
var x = 'local';
console.log(x); // local
function var () {
console.log(x); // local
}
bar();
}
foo();
console.log(x) // global
๋จ, let
์ ์ฌ์ฉํ๋ฉด ๋ธ๋ก ๋ ๋ฒจ ์ค์ฝํ(Block-level scope) ๋ฅผ ์ฌ์ฉ ํ ์ ์๋ค. ๋ธ๋ก ๋ ๋ฒจ ์ค์ฝํ๋ ๋ง ๊ทธ๋๋ก ๋ธ๋ก {} ์ด ์์ฑ๋ ๋ ๋ง๋ค ์๋ก์ด ์ค์ฝํ๊ฐ ํ์ฑ๋๋ ๊ฒ์ ์๋ฏธํ๋ค. let
๊ณผ const
์ ๋ฑ์ฅ์ผ๋ก ๋ธ๋ก์ค์ฝํ๋ฅผ ํ์ฑํ๋ ๊ฒ๋ ๊ฐ๋ฅํด์ก๋ค.
ํ ์ธ์ด๋ค์ ๋ชจ๋ ๋ธ๋ก ๋ ๋ฒจ ์ค์ฝํ๋ฅผ ๋ฐ๋ฅธ๋ค. ์ด๋ ์ฝ๋ ๋ธ๋ก ๋ด์์ ์ ํจํ(์ฐธ์กฐ ๊ฐ๋ฅํ) ์ค์ฝํ์ด๋ค.
var x = 0;
{
var x = 1;
console.log(x); // 1
}
console.log(x); // 1
let y = 0;
{
let y = 1;
console.log(y); // 1
}
console.log(y); // 0
function loop () {
for (var i = 0; i < 5; i++) {
console.log(i);
}
console.log(i, "final");
}
loop();
/*
0
1
2
3
4
5 final
*/
-> var
๋ ํจ์๋ ๋ฒจ์ค์ฝํ๋ฅผ ๋ฐ๋ฅด๊ธฐ ๋๋ฌธ์, loop
ํจ์ ์คํฌํธ ์์ i
๊ฐ ๋ชจ๋ ์กด์ฌํ๋ค.
function loop () {
for (let i = 0; i < 5; i++) {
console.log(i);
}
console.log(i, "final");
}
loop();
// Error: i is not defined
-> let
์ผ๋ก ๋ธ๋ก๋ ๋ฒจ์ค์ฝํ๊ฐ ๊ฐ๋ฅํด์ก๊ธฐ ๋๋ฌธ์ i
๋ for๋ฌธ ์ฝ๋๋ธ๋ก ์์๋ง ์กด์ฌํ๋ค.
var x = 1;
function foo () {
var x = 10;
bar();
}
function bar () {
console.log(x); // 1
}
foo();
bar();
bar
๋ ์ ์ญ์ ์ ์ธ๋์๋ค. ๊ทธ๋ฌ๋ฏ๋ก bar
์ ์์ ์ค์ฝํ๋ ์ ์ญ์ค์ฝํ์ด๊ณ , 1
์ ๋๋ฒ ์ถ๋ ฅํ๋ค. ์์ Global Scope
-> Person Scope
-> displayName Scope
ํ์
โญ๏ธ
Scope ๊ณ์ธต์์ ๊ฐ์ฅ ์ค์ํ ํน์ง์
- ์์์์ ํ์ ๋ด๋ถ์ ๋ณด๋ฅผ ์ ๊ทผ
ํ ์ ์๋ค.- ํ์ง๋ง ํ์์์ ์์ scope์ ์ ๋ณด๋ ์ ๊ทผ ๊ฐ๋ฅํ๋ค !!
- ๊ทธ๋ฆฌ๊ณ , ์คํ๋ฌธ์ ์์น๋ฅผ ๊ธฐ์ค์ผ๋ก ํ์ Scope ๋ถํฐ ์์ํ์ฌ, ์ํ๋ ๊ฐ์ ์ฐพ์ ๋ ๊น์ง ์์๋ก ํ์์ด ๊ฐ๋ฅํ๋ค.
var x = 10;
function foo () {
y = 20;
console.log(x + y);
}
foo(); // 30
y
๋ฅผ ์ ์ธํด์ฃผ์ง ์์๋๋ฐ ์ 30์ด๋ผ๋ ๊ฐ์ด ๋์ฌ๊น?
foo
ํจ์์ ์ค์ฝํ์ ์ ์ญ ์ค์ฝํ ์ด๋์์๋ ๋ณ์ y
์ ์ ์ธ์ ์ฐพ์ ์ ์์ผ๋ฏ๋ก ์๋ฌ๊ฐ ๋ฐ์ํด์ผ ํ์ง๋ง, ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ y = 20
์ window.y = 20
์ผ๋ก ํด์ํ์ฌ ํ๋กํผํฐ๋ฅผ ๋์ ์์ฑํ๋ค. ๊ฒฐ๊ตญ y
๋ ์ ์ญ ๊ฐ์ฒด์ ํ๋กํผํฐ๊ฐ ๋์ด ์ ์ญ๋ณ์์ฒ๋ผ ๋์ํ๋๋ฐ ์ด๋ฌํ ํ์์ ์๋ฌต์ ์ ์ญ(implicit global) ์ด๋ผ๊ณ ํ๋ค.
console.log(x); // undefined - ์ ์ญ ๋ณ์ x๋ ํธ์ด์คํ
๋ฐ์ํ๋ค.
console.log(y); // Error : y is not defined - ์ ์ญ๋ณ์๊ฐ ์๋, ๋จ์ง ์ ์ญ ํ๋กํผํฐ์ธ y๋ ํธ์ด์คํ
์ด ๋ฐ์ํ์ง ์๋๋ค.
var x = 10; // ์ ์ญ ๋ณ์
function foo () {
y = 20; // ์ ์ธํ์ง ์์ ๋ณ์
console.log(x + y);
}
foo(); // 30
var globalObj = {};
globalObj.person = {
name: 'Midohree',
gender: 'female'
};
console.log(globalObj.person.name);
(function () {
var globalObj = {};
globalObj.person = {
name: 'Midohree',
gender: 'female'
};
console.log(globalObj.person.name); // Midohree
}());
console.log(globalObj.person.name); // Error: globalObj is not defined