λ©΄μ κ΄ μμμ λ΄ λͺ¨μ΅
λ©΄μ κ΄μκ² μ΄ μ§λ¬Έμ λ°λλ€λ©΄ λλ΅ν μ μμκΉ? π€
λ©΄μ μμ μ€μ λ‘ λμ¬ μ μλ μ£Όμ μ΄κΈ°μ μμν μ μλ 꼬리μ§λ¬ΈκΉμ§ νλ² μ 리ν΄λ³΄μ.
ν΄λ‘μ λ ν¨μμ ν¨μκ° μ μΈλ μ΄νμ νκ²½μ μ‘°ν©μΌλ‘ μΈλΆ ν¨μμ λ³μμ μ κ·Όν μ μλ λ΄λΆ ν¨μμ λλ€.
μ΄νμ νκ²½μ μ‘°ν©μ΄λ βλ³μμ ν¨μμ μ μΈ ννμ μ‘°ν©βμ λ§νλ κ²μΈλ°μ, μλ°μ€ν¬λ¦½νΈλ ν¨μκ° νΈμΆλλ νκ²½κ³Όλ λ³κ°λ‘, κΈ°μ‘΄μ μ μΈλμλ νκ²½μ κΈ°μ€μΌλ‘ λ³μλ₯Ό μ‘°ννλ €λ νΉμ±μ΄ μκΈ° λλ¬Έμ λλ€.
μ¦, ν΄λ‘μ κ° μμ±λ μμ μ μ ν¨ λ²μμ μλ λͺ¨λ μ§μ λ³μλ₯Ό μ¬μ©νλ νκ²½μ λ§νλ κ²μ λλ€.
ν΄λ‘μ λ μΊ‘μνμ λͺ¨λνμ νΉμ§μ κ°μ§κ³ μμ΅λλ€. μΈλΆ ν¨μμ λ³μκ° ν¨μ λ°μΌλ‘ λ ΈμΆλμ§ μμ μ 보μ μ κ·Όμ μ νν΄ ν΄λ‘μ λ‘ μλ°μ€ν¬λ¦½νΈμμ μΊ‘μνλ₯Ό ꡬνν μ μμ΅λλ€. λν ν΄λ‘μ λ λ°μ΄ν°λ₯Ό 보쑴νλ ν¨μμ λλ€. μΈλΆ ν¨μμ μ€νμ΄ λλλλΌλ μΈλΆ ν¨μ μμ λ³μκ° λ©λͺ¨λ¦¬μ μ μ₯λμ΄ κ°μ κΈ°μ΅νκ³ μμ΅λλ€. μ΄λ¬ν νΉμ§μΌλ‘ ν΄λ‘μ λͺ¨λ ν¨ν΄μ ꡬνν μ μμ΅λλ€.
ν΄λ‘μ μμ λ΄λΆ ν¨μλ₯Ό νλλ§ λ¦¬ν΄νλ κ²μ΄ μλλΌ, κ°μ²΄μ μ¬λ¬κ°μ λ΄λΆ ν¨μλ₯Ό 리ν΄νλλ‘ λ§λ κ²μ
λλ€. μΈλΆ ν¨μμ μλ value
λ³μλ μ€μ½ν κ·μΉμ μν΄ κ°μ μμ νκ±°λ μλ‘κ² ν λΉν μ μμ΅λλ€. μ 보μ μ κ·Όμ μ ννλ μΊ‘μνμ νΉμ§μ κ°μ§κ³ μμ΅λλ€. ν΄λ‘μ λ₯Ό ν΅ν΄ λΆνμν μ μ λ³μμ μ¬μ©μ μ€μ΄κ³ μμ νκ² κ°μ 보νΈν μ μμ΅λλ€. λν counterA
μ counterB
μ value
λ μλ‘μκ² μν₯μ μ£Όμ§ μμ΅λλ€. makeCounter
λ₯Ό μμ ν λ
립λ ννλ‘ μ¬μ¬μ©ν μ μλ κ²μ
λλ€.
const makeCounter = () => {
let value = 0
return {
increase: () => {
value = value + 1
},
decrease: () => {
value = value - 1
},
getValue: () => {
getValue: () => value
}
}
}
const counterA = makeCounter()
const counterB = makeCounter()
μΈλΆ ν¨μ μ€μ½νκ° λ΄λΆ ν¨μμ μν΄ μΈμ λ μ§ μ°Έμ‘°λ μ μκΈ° λλ¬Έμ, ν΄λ‘μ ν¨ν΄μ λ©λͺ¨λ¦¬ μμ λ¨κ² λ©λλ€. μ΄λ μΌλ° ν¨μμλ€λ€λ©΄ μ€ν μ’ λ£ ν μλ°μ€ν¬λ¦½νΈ λ©λͺ¨λ¦¬ κ΄λ¦¬μ μν΄ κ°λΉμ§ 컬λ μ μ΄ λμμ κ°μ²΄κ° λ¨μμκ² λλ κ²μ λλ€. λ°λΌμ ν΄λ‘μ λ₯Ό λ¨λ°ν κ²½μ° νΌν¬λ¨Όμ€ μ νκ° λ°μν μ μλ€κ³ μκ³ μμ΅λλ€.
λ€, μλ₯Ό λ€μ΄ λ€μκ³Ό κ°μ΄ x
μ y
μ ν©μ ꡬνλ ν¨μκ° μλ€κ³ ν λ, λ€μκ³Ό κ°μ΄ μμ±ν μ μμ΅λλ€.
let add = function(x) {
let sum = function(y) {
return x + y
}
return sum
}
ν¨μ ννμμΌλ‘ μ μΈλ add
ν¨μλ x
λ₯Ό 맀κ°λ³μλ‘ νλ©°, λ΄λΆ ν¨μ sum
μ λ°ννκ³ μμ΅λλ€. μ¬κΈ°μ λ°ννλ ν¨μμΈ sum
μ μΈλΆ ν¨μμΈ add
μ 맀κ°λ³μ x
μ μ κ·Όν μ μμΌλ―λ‘ ν΄λ‘μ ν¨μμ
λλ€.
let addOne = add(1)
addOne(5) // 6
addOne
ν¨μμ μ λ¬μΈμλ‘ 1
μ λ°λ add
ν¨μλ₯Ό ν λΉνλ©΄, addOne
μ ν¨μ κ·Έ μ체λ₯Ό μ¬ν λΉνκΈ° μ κΉμ§λ μΈλΆ λ³μx
μΈ 1
μ μ κ·Όν μ μκΈ° λλ¬Έμ μΊ‘μνλ₯Ό ν μ μλ κ²μ
λλ€.
ν΄λ‘μ κ° μ μ©νκ² μ¬μ©λλ μλ νμ¬ μνλ₯Ό κΈ°μ΅νκ³ λ³κ²½λ μ΅μ μνλ₯Ό μ μ§νλ μν©μ
λλ€. μλ₯Ό λ€λ©΄ toggle
λ²νΌμ ꡬνν λ, isShow
λΌλ ν¨μκ° μλ€κ³ κ°μ νλ€λ©΄ λ€μκ³Ό κ°μ΄ μ μ©ν μ μμ΅λλ€.
const element = document.querySelector('.element')
let toggleHandler = function(element) {
let isShow = false
return function() {
element.style.display = isShow ? 'block' : 'none'
isShow = !isShow
}
}
toggleBtn.onclick = toggleHandler
λ€λ₯Έ μμλ‘, ν΄λ‘μ λ₯Ό μ΄μ©ν΄ HTML νκ·Έλ₯Ό μμ±νλ κ²½μ°μ
λλ€. tag
λ₯Ό μΈλΆ ν¨μ λ³μμ λ΄μλμ΄ μ€μ½ν μμ κ°λμ΄ λ μ± μ¬μ¬μ©μ ν μ μμ΅λλ€.
const tagMaker = tag => content => `<${tag}>${content}</${tag}>`
const divMaker = tagMaker('div')
divMaker('hello') // <div>hello<div>
divMaker('code') // <div>code</div>
const anchorMaker = tagMaker('a')
anchorMaker('go') // <a>go</a>
anchorMaker('class') // <a>class</a>
λλ¦ κ°κ²°νκ² ν΅μ¬μ μ λ¬νλ©΄μ λ΄μ©μ΄ λΉμ΄λ³΄μ΄μ§ μλλ‘ νλλ°, ν π€Β λ©΄μ λ μ€λΉν λ΄μ©μ μμ°μ€λ½κ² μκΈ°ν μ μμκΉ? μ counter μμλ νμ΅μ λμ¨ μμμ΄κΈ°λ νκ³ ν΄λ‘μ λ₯Ό μ€λͺ ν λ μμ£Ό μκ°λλ μμλΌκ³ νλ€.
μ 리νλ©΄μ μ‘°κΈ λ 곡λΆν΄λ³΄κ³ μΆμ λ΄μ©μ ν΄λ‘μ λ‘ κ΅¬νν 컀λ§κ³Ό IIFE(μ¦μμ€νν¨μνΈμΆ)μ νμ©κ³Ό μλ°μ€ν¬λ¦½νΈμ μλνμ λν΄μλ€.
π 리μ‘νΈμμ IIFE μ¬μ©νκΈ° | 2022.1.5 μμ±
ν΄λ‘μ | μ½λμ€ν
μ΄μΈ μ μ΄ν΄λμ€
ν΄λ‘μ | MDN
ν΄λ‘μ , κ·Έλ¦¬κ³ μΊ‘μνμ μλν | NHN Cloud Meetup!
ν΄λ‘μ λ©΄μ λ΅λ³μ€μ μ΅κ³ μΈκ²κ°μμ >< b