μ€μ½νλ μλ³μμ λν μ ν¨λ²μμ΄λ€. λ³μ,ν¨μ λ± λͺ¨λ μλ³μλ μμ μ΄ μ μΈλ μμΉμ μν΄ μμ μ΄ μ ν¨ν λ²μ, μ¦ λ€λ₯Έ μ½λκ° μμ μ μ°Έμ‘°ν μ μλ λ²μκ° κ²°μ λλ€. μ€μ½ν μμμ μ μΈλ μλ³μλ μ€μ½ν μμμλ μ°Έμ‘°ν μ μμ§λ§ μ€μ½ν λ°μμλ μ°Έμ‘°ν μ μλ€.
μ¦, μ€μ½νλ μλ³μκ° μ ν¨ν λ²μλ₯Ό λ§νλ€.
μλμ μ½λμ λμμ ν΅ν΄ μ€μ½νμ λν΄ λ μμΈν μμ보μ.
let name= 'Harry';
function foo() {
let name = 'Hyeok';
console.log(name); // Hyeok
}
foo();
console.log(name); // Harry
μ¬κΈ°μ μ€μ½νλ₯Ό νμ΅νκΈ° μν΄ μ£Όλͺ©ν μ μ μλμ κ°λ€.
name
μ΄λΌλ λ³μλ₯Ό λ λ² μ μΈνλ€.console.log
λ‘ name
μ νΈμΆνλ μμΉμ λ°λΌ name
μ κ°μ΄ λ¬λΌμ‘λ€.μ μ½λμμλ λ κ°μ μ€μ½νκ° μ‘΄μ¬νλ€. "μ μ μ€μ½ν"μ "foo ν¨μ μ€μ½ν"μ΄λ€. μ μ μ€μ½νμμ μ μΈλ λ³μ name
(Harry)λ μ½λ μ 체μμ μ°Έμ‘°ν μ μλ€. κ·Έλ¬λ foo ν¨μ μ€μ½νμμ μ μΈλ λ³μ name
(Hyeok)μ foo ν¨μμ λ΄λΆμμλ§ μ°Έμ‘°ν μ μλ€.
μ¦, κ°μ μλ³μλΌλ μ€μ½ν(μ ν¨ λ²μ)κ° λ€λ₯΄λ€. μ€μ½ν λ΄μμλ μλ³μλ μ μΌν΄μΌ νμ§λ§ λ€λ₯Έ μ€μ½νμλ κ°μ μλ³μκ° μμ΄λ μκ΄μλ€. μ€μ½νλ λ€μμ€νμ΄μ€μ΄λ€.
κ·Έλμ 첫λ²μ§Έ μλ¬Έμ μ λ΅νμλ©΄, μ μμμ μμ±ν λ³μμ fooν¨μ λ΄λΆμμ μ μΈν λ³μλ name
μ΄λΌλ κ°μ μλ³μλ₯Ό κ°μ§λ§ μ€μ½νκ° λ€λ₯Έ μ ν λ€λ₯Έ λ³μμΈ κ²μ΄λ€.
κ·Έλ°λ° fooλ΄λΆμμ μ°μ΄λ³Έ console.log
μμλ μ Harryκ° μλλΌ Hyeokμ΄ λμμκΉ? μ΄λ μλμ μ€μ½νμ²΄μΈ λΆλΆμμ λ€μ μμ보μ.
μ½λλ μ μκ³Ό μ§μμΌλ‘ ꡬλΆν μ μλ€. μ΄ λ μ μμ μ½λμ κ°μ₯ λ°κΉ₯ μμμ λ§νλ€. μ μμ μ μ μ€μ½νλ₯Ό λ§λ€κ³ , μ μμ λ³μλ₯Ό μ μΈνλ©΄ μ μ μ€μ½νλ₯Ό κ°λ μ μ λ³μκ° λλ€. μ μ λ³μλ μ΄λμλ μ§ μ°Έμ‘°ν μ μλ€. κ·Έμ λΉν΄ μ§μ λ³μλ λ³μκ° μ μΈλ μ€μ½ν λ΄λΆ(μ§μ)μμλ§ μ°Έμ‘°ν μ μλ€.
ES5κΉμ§μ μλ°μ€ν¬λ¦½νΈλ νΉμ΄νκ²λ μ€μ§ ν¨μμ μν΄μλ§ μ§μ μ€μ½νκ° μμ±λλ€. μμμ μ΄ν΄λ³Έ foo ν¨μ μ€μ½ν
κ° μ§μ μ€μ½νμ μμμ΄λ€. ES6λΆν°λ λͺ¨λ μ½λ λΈλ‘ (if, for, while λ±λ±)μ΄ μ§μ μ€μ½νλ₯Ό λ§λ λ€.
μ΄ λ, var
λ‘ μ μΈν λ³μλ ν¨μλ‘ λ§λ€μ΄μ§ μ€μ½νλ§μ μ§μ μ€μ½νλ‘ μΈμ νλλ°, μ΄λ¬ν νΉμ±μ "ν¨μ λ 벨 μ€μ½ν"λΌκ³ νλ€. μ΄λ λ¬Έμ λ₯Ό λ°μμν¬ μ μλλ°, μλμ μμ μ½λλ₯Ό ν΅ν΄ λ¬Έμ λ₯Ό μ΄ν΄λ³΄μ.
var i = 10;
for (var i=0; i<5; i++) {
console.log(i) // 0 1 2 3 4μμΌλ‘ μΆλ ₯
}
console.log(i) // 5
λ§μ§λ§ console.logλ₯Ό 보면 μ μ μκ² μ§λ§ i
μ κ°μ΄ μλμΉ μκ² λ³κ²½λμλ€. var
ν€μλλ‘ μ μΈν λ³μλ μ€λ³΅ μ μΈμ΄ κ°λ₯νλ€. λμμ ν¨μ λ 벨 μ€μ½νλ₯Ό κ°μ§κΈ° λλ¬Έμ forλ¬Έ μμμ μ μΈμ νλλΌλ i
λ μ μλ³μλ‘ μ μΈλλ€.
var
ν€μλλ‘ μ μΈν λ³μλ₯Ό μ€λ³΅ μ μΈνλ©΄ μ΄κΈ°νλ¬Έ μ 무μ λ°λΌ λ€λ₯΄κ² λμνλ€. μ΄κΈ°ν λ¬Έμ΄ μλ λ³μ μ μΈλ¬Έμ μλ°μ€ν¬λ¦½νΈ μμ§μ μν΄ var
ν€μλκ° μλ κ²μ²λΌ λμνκ³ , μ΄κΈ°νλ¬Έμ΄ μλ λ³μ μ μΈλ¬Έμ 무μλλ€.
κ·Έλ κΈ° λλ¬Έμ μμ κ°μ λ¬Έμ κ° λ°μλ κ²μ΄λ€.
μμμ μ΄ν΄λ³Έ κ²μ²λΌ var
ν€μλλ ν¨μ λ 벨 μ€μ½νλΌλ νΉμ±μ κ°μ§λ€. λ°λ©΄μ, let
,const
ν€μλλ "λΈλ‘ λ 벨 μ€μ½ν"λΌλ νΉμ±μ κ°μ§λ€. ν¨μλ‘ λ§λ€μ΄μ§ μ§μ μ€μ½ν λΏλ§ μλλΌ, λͺ¨λ μ½λ λΈλ‘(if, for, while λ±λ±)μΌλ‘ λ§λ€μ΄μ§ μ§μ μ€μ½νλ₯Ό μ§μ μ€μ½νλ‘ μΈμ νλ€λ λ»μ΄λ€.
let i = 10;
for (let i=0; i<5; i++) {
console.log(i) // 0 1 2 3 4μμΌλ‘ μΆλ ₯
}
console.log(i) // 10
μκΉμ κ°μ μμ μ½λλ₯Ό λ€κ³ μμ var
ν€μλλ§ let
μΌλ‘ λ°κΏλ΄€λ€. let
ν€μλλ‘ μ μΈλ λ³μλ λΈλ‘ λ 벨 μ€μ½νλ₯Ό λ°λ₯΄κΈ° λλ¬Έμ forλ¬Έ μμμ μμ±λ i
μ μ μμμ μμ±λ i
λ μλ³μκ° κ°μ§λ§ μ€μ½νκ° λ€λ₯Έ μ ν λ€λ₯Έ λ³μμ΄λ€.
λ§λΆμ΄μλ©΄ let
κ³Ό const
ν€μλλ λ³μ μ€λ³΅ μ μΈμ νμ©νμ§ μλλ€.
μ°λ¦¬λ μ½λλ₯Ό μμ±ν λ μ½λ λΈλμ μ€μ²©λκ² μμ±ν μ μλ€. forλ¬Έ μμ ifλ¬Έμ μμ±νκ±°λ, ν¨μ μμ try, catchλ¬Έμ μμ±ν μλ μκ³ ν¨μλ₯Ό ν¨μ λͺΈμ²΄ λ΄λΆμμ μ μν μλ μλ€. ν¨μ λ΄λΆμμ μ μν ν¨μλ₯Ό μ€μ²© ν¨μ(nested function), μ€μ²© ν¨μλ₯Ό ν¬ν¨νλ ν¨μλ₯Ό μΈλΆ ν¨μ(outer function)λΌκ³ νλ€.
μ΄λ° μμΌλ‘ ν¨μκ° μ€μ²©λκ² μμ±νλ©΄ μ€μ½νλ μ€μ²©λ μ μλ€. μ΄λ μ€μ½νκ° ν¨μμ μ€μ²©μ μν΄ κ³μΈ΅μ ꡬ쑰λ₯Ό κ°λλ€λ κ²μ μλ―Ένλ€. μ΄ λ μΈλΆ ν¨μμ μ€μ½νλ₯Ό μμ μ€μ½νλΌ νλ€.
let name = 'Harry';
let age = 23;
let mbti = 'ISTJ'
function outer() {
let name = 'Hyeok';
let age = 20;
console.log(name);
console.log(age);
console.log(mbti);
function inner() {
let name = 'Thumb';
console.log(name);
console.log(age);
console.log(mbti);
}
inner();
}
console.log(name);
console.log(age);
console.log(mbti);
outer();
// κ°κ° console.logμμ λ¬΄μ¨ κ°μ΄ μΆλ ₯λ μ§ μμν΄λ³΄λΌ.
μμ μμ μμ outer
, inner
ν¨μκ° μ§μ μ€μ½νλ₯Ό λ§λ€κ³ , inner
ν¨μλ outer
ν¨μμ μ€μ²©ν¨μμ΄λ€. outer
ν¨μκ° λ§λ μ§μ μ€μ½νλ inner
ν¨μκ° λ§λ μ§μ μ€μ½νμ μμ μ€μ½νμ΄λ€. μ μ μ€μ½νλ outer
ν¨μμ μ§μ μ€μ½νμ μμ μ€μ½νμ΄λ€.
μ΄μ²λΌ λͺ¨λ μ€μ½νλ νλμ κ³μΈ΅μ κ΅¬μ‘°λ‘ μ°κ²°λλ©°, λͺ¨λ μ§μ μ€μ½νμ μ΅μμ μ€μ½νλ μ μ μ€μ½νμ΄λ€. μ΄λ κ² μ€μ½νκ° κ³μΈ΅μ μΌλ‘ μ°κ²°λ κ²μ μ€μ½ν 체μΈ(scope chain)μ΄λΌκ³ νλ€.
λ³μλ₯Ό μ°Έμ‘°ν λ μλ°μ€ν¬λ¦½νΈ μμ§μ μ€μ½ν 체μΈμ ν΅ν΄ λ³μλ₯Ό μ°Έμ‘°νλ μ½λμ μ€μ½νμμ μμνμ¬ μμ μ€μ½ν λ°©ν₯μΌλ‘ μ΄λνλ©° μ μΈλ λ³μλ₯Ό κ²μ(identifier resolution)νλ€. μ΄λ νμ μ€μ½νμμ μμ μ€μ½νλ‘ λ¨λ°©ν₯μΌλ‘λ§ μ΄λνκΈ° λλ¬Έμ μμ μ€μ½νμ μλ³μλ νμ μ€μ½νμμ μ°Έμ‘°ν μ μμ§λ§, νμ μ€μ½νμ μλ³μλ μμ μ€μ½νμμ μ°Έμ‘°ν μ μλ€.
μ΄μ μμ μ½λμ console.logμμ μ΄λ€ κ°μ΄ μΆλ ₯λλμ§, λν κ·Έλ¬ν κ°μ΄ μ΄λ»κ² ꡬν΄μ§κ² λμλμ§μ κ³Όμ κΉμ§ μ΄ν΄λ³΄μ.
let name = 'Harry';
let age = 23;
let mbti = 'ISTJ'
function outer() {
let name = 'Hyeok';
let age = 20;
console.log(name); // Hyeok (outerν¨μ μ€μ½ν)
console.log(age); // 20 (outerν¨μ μ€μ½ν)
console.log(mbti); // ISTJ (outerν¨μ μ€μ½ν -> μ μ μ€μ½ν)
function inner() {
let name = 'Thumb';
console.log(name); // Thumb (innerν¨μ μ€μ½ν)
console.log(age); // 20 (innerν¨μ μ€μ½ν -> outerν¨μ μ€μ½ν)
console.log(mbti);
// ISTJ (innerν¨μ μ€μ½ν -> outerν¨μ μ€μ½ν -> μ μ μ€μ½ν)
}
inner();
}
console.log(name); // Harry (μ μ μ€μ½ν)
console.log(age); // 23 (μ μ μ€μ½ν)
console.log(mbti); // ISTJ (μ μ μ€μ½ν)
outer();
μ μ½λμμ μ μ μλ―μ΄ μλ°μ€ν¬λ¦½νΈ μμ§μ μ€μ½ν 체μΈμ ν΅ν΄ λ³μλ₯Ό μ°Έμ‘°νλ μ½λμ μ€μ½νμμ μμνμ¬ μμ μ€μ½ν λ°©ν₯μΌλ‘ μ΄λνλ©° μ μΈλ λ³μλ₯Ό κ²μ(identifier resolution)νλ€. μ μ½λλ₯Ό μμλ‘ λ€μ΄ μ€λͺ νκ² λ€.
inner
ν¨μ μμ μλ console.log(mbti)
λ¬Έμμ μλ°μ€ν¬λ¦½νΈ μμ§μ inner
ν¨μκ° λ§λ μ§μ μ€μ½νμμ mbti
λΌλ μλ³μλ₯Ό μ°Ύκ³ , μ μΈμ΄ μ‘΄μ¬νμ§ μμΌλ―λ‘ outer
ν¨μκ° λ§λ μ§μ μ€μ½νλ‘ μ΄λνμ¬ mbti
λΌλ μλ³μλ₯Ό μ°Ύκ³ , μ μΈμ΄ μ‘΄μ¬νμ§ μμΌλ―λ‘ μ΅μμ μ€μ½νμΈ μ μ μ€μ½νλ‘ μ΄λν΄ mbti
λΌλ μλ³μλ₯Ό μ°Ύμ ISTJ
λΌλ κ°μ μΆλ ₯νλ€.
μ΄μ μμ μ΄ν΄ λ³Έ λλ²μ§Έ μλ¬Έμ μΈ
μ λν λ΅μ λ§ν μ μμ κ²μ΄λ€. λ΅μ μ°Ύμ§ λͺ»νλ€λ©΄ κΈμ λ€μ μ½μ΄λ³΄κΈ°λ₯Ό μΆμ²νλ€. μ΄μ λν΄ λ μμΈν μ΄μΌκΈ°λ₯Ό μ€ν 컨ν μ€νΈλ₯Ό λ€λ£¨λ λ€μ κΈμμ λ€λ£° μμ μ΄κΈ° λλ¬Έμ μΆ©λΆν μ΄ν΄νκ³ λμ΄κ°κΈ°λ₯Ό λ°λλ€.
μΌλ°μ μΌλ‘ νλ‘κ·Έλλ° μΈμ΄λ μ΄λ€ ν¨μμ μμ μ€μ½νλ₯Ό κ²°μ ν λ λμ μ€μ½ν(dynamic scope)λ λ μ컬 μ€μ½ν(lexical scope) λλ μ μ μ€μ½ν(static scope)λΌκ³ λΆλ¦¬λ λκ°μ§ λ°©μ μ€μ ν κ°μ§ λ°©μμΌλ‘ ν¨μμ μμ μ€μ½νλ₯Ό κ²°μ νλ€.
μλ μμμ½λλ₯Ό ν΅ν΄ λμ μ€μ½νμ λ μ컬 μ€μ½νμ μ°¨μ΄λ₯Ό λΉκ΅ν΄λ³΄λλ‘ νκ² λ€.
let num = 10;
function foo() {
let num = 20;
boo();
}
function boo() {
console.log(num);
}
foo(); // ??
boo(); // ??
λμ μ€μ½νλ ν¨μλ₯Ό μ΄λμ νΈμΆνλμ§μ λ°λΌ ν¨μμ μμ μ€μ½νλ₯Ό κ²°μ νλ€.
boo
ν¨μλ νλ‘κ·Έλ¨ μ 체μμ λ λ² νΈμΆλλλ°, 첫λ²μ§Έλ foo
ν¨μ λ΄λΆμμ, λλ²μ§Έλ μ μμμ νΈμΆλλ€.
λμ μ€μ½νλ ν¨μκ° νΈμΆλλ μμ μ λμ μΌλ‘ μμ μ€μ½νκ° μ ν΄μ§κΈ° λλ¬Έμ, foo
ν¨μ λ΄λΆμμ νΈμΆλ λλ boo
ν¨μλ foo
ν¨μμ μ§μ μ€μ½νμ, μ μ μ€μ½νλ₯Ό μμ μ€μ½νλ‘ κ°μ§λ€. μ μμμ νΈμΆλ λλ μ μ μ€μ½νλ§μ μμ μ€μ½νλ‘ κ°μ§λ€.
let num = 10;
function foo() {
let num = 20;
boo();
}
function boo() {
console.log(num);
}
foo(); // 20
boo(); // 10
μ μ½λ κ²°κ³Όλ λ§μ½ μλ°μ€ν¬λ¦½νΈκ° λμ μ€μ½ν λ°©μμΌλ‘ μμ μ€μ½νλ₯Ό κ²°μ ν λμ κ²°κ³Όλ₯Ό 보μ¬μ€ κ²μ΄λ€. κ·Έλ¬λ, μλ°μ€ν¬λ¦½νΈλ λ μ컬 μ€μ½νλ₯Ό λ°λ₯Έλ€.
λ μ컬 μ€μ½νλ ν¨μλ₯Ό μ΄λμ μ μνλμ§μ λ°λΌ ν¨μμ μμ μ€μ½νλ₯Ό κ²°μ νλ€. μμμ μΈκΈνλ―μ΄ μλ°μ€ν¬λ¦½νΈλ λ μ컬 μ€μ½νλ₯Ό λ°λ₯Έλ€. κ·Έλ¬λ―λ‘ ν¨μλ₯Ό νΈμΆν μμΉλ μμ μ€μ½ν κ²°μ μ μ΄λ ν μν₯λ μ£Όμ§ μλλ€.
μ¦, ν¨μμ μμ μ€μ½νλ μΈμ λ μμ μ΄ μ μλ μ€μ½νμ΄λ€.
ν¨μ μ μκ° μ€νλμ΄ μμ±λ ν¨μ κ°μ²΄λ μ΄λ κ² κ²°μ λ μμ μ€μ½νλ₯Ό κΈ°μ΅νλ€. λμ μ€μ½ν λ°©μκ³Ό λ¬λ¦¬ ν¨μκ° νΈμΆλ λλ§λ€ ν¨μμ μμ μ€μ½νλ₯Ό μ°Έμ‘°ν νμκ° μκΈ° λλ¬Έμ΄λ€.
let num = 10;
function foo() {
let num = 20;
boo();
}
function boo() {
console.log(num);
}
foo(); // 10
boo(); // 10
var
ν€μλλ μ€λ³΅μ μΈμ΄ κ°λ₯νκ³ ν¨μ λ 벨 μ€μ½νλ₯Ό νΉμ±μΌλ‘ κ°λλ€let
, const
ν€μλλ μ€λ³΅μ μΈμ΄ λΆκ°λ₯νκ³ λΈλ‘ λ 벨 μ€μ½νλ₯Ό νΉμ±μΌλ‘ κ°λλ€μ½μ΄ μλ°μ€ν¬λ¦½νΈ
λͺ¨λ μλ°μ€ν¬λ¦½νΈ Deep Dive
μ°ν μ½ νλ‘ νΈμλJS λ 벨1 - 2022
good