TIL - 21.07.01 ๐จโ๐ป - JS
TIL - 21.07.01 ๐จโ๐ป
์์ ์๋ฃํ vs ์ฐธ์กฐ ์๋ฃํ
์์ ์๋ฃํ ( Primitive type data )
์์ ์๋ฃํ์ ๋ฌธ์์ด, ์ซ์์ด, ๋ถ๋ฆฌ์ธํ์
, null, undefined ์ ๋ณ์ ์ ์ธ์ผ๋ก ์ด๋ฆํ ๋ถ์ธ ์คํ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ๋ณ์ ํธ์ถ๋ก ์คํ์ ์ ์ฅ๋์ด ์๋ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค๋ ์๋ฃํ๋ค์ ๋งํ๋ค.
์คํ์ ๋ฐ์ดํฐ๋ฅผ ์ง์ ์ ์ฅํ๊ธฐ์ ํ ์คํ๋น ์ฆ ํ ๋ณ์๋น ํ๋์ ๋ฐ์ดํฐ๋ง ์ ์ฅ ๊ฐ๋ฅํ๋ค.
์ฐธ์กฐ ์๋ฃํ ( Reference type data )
์คํ์ด ์๋ Heap์ด๋ผ๋ ๋ณ๋ ๊ณต๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ๋ณ์ ์ ์ธ์ผ๋ก ์ด๋ฆ ๋ถํ ์คํ์๋ ํด๋น ๋ฐ์ดํฐ์ ์ฃผ์๋ง ์ ์ฅ๋๋ค.
๋ณ์๋ฅผ ํธ์ถํด ์คํ์์ ๋ฐ์์ค๋ ๊ฒ์ด ๋ฐ์ดํฐ๊ฐ ์๋ Heap์ ์๋ ๋ฐ์ดํฐ์ ์ฃผ์์ด๊ธฐ ๋๋ฌธ์ ์ฐธ์กฐํ๋ค๊ณ ํด์ ์ฐธ์กฐ ์๋ฃํ์ด๋ค.
์ฐธ์กฐ ์๋ฃํ์๋ ๋ฐฐ์ด๊ณผ ๊ฐ์ฒด๊ฐ ์๋ค.
๋ ์๋ฃํ์ ์ฐจ์ด
์ด ๋ ์๋ฃํ์ ๊ฐ์ฅ ํฐ ์ฐจ์ด๊ฐ ์์ ์๋ฃํ์ ๊ฒฝ์ฐ ์ ์ธ๋๊ณ ๊ฐ์ด ํ ๋น๋์ด ์๋ ๋ณ์(x)๋ฅผ ๋ค๋ฅธ ๋ณ์(y)์ ํ ๋นํ๋ฉด ํด๋น ์คํ์ ๋ฐ์ดํฐ๊ฐ ๋ณต์ ๋์ด ์๋ก์ด ๋ณ์(y)์ ์คํ์ ํ ๋น๋๋ค.
๊ทธ๋ ๊ธฐ์ ํ ๋นํ๊ณ ๋์๋ ์๋ก์ด ๋ณ์(y)๋ฅผ ์์ ํ๋ค๊ณ ํด๋ ๊ธฐ์กด ๋ณ์(x)์๋ ์ํฅ์ด ์ ํ ์๋ค.
๊ธฐ์กด ์คํ์ ๊ทธ๋๋ก ๋๊ณ ์๋ก ๋ณต์ ํ ์คํ์ ์๋ ๋ฐ์ดํฐ๋ฅผ ์ง์ง๊ณ ๋ณถ๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ด๋ค.
let x = 10; let y = x; if(true){ y++ }; console.log(x) // 10; console.log(y) // 11; ๋ณต์ ํ y์ ๊ฐ์ด ๋ณํด๋ x์ ๊ฐ์ ๋ณํ์ง ์๋๋ค.
๊ทธ๋ฐ๋ฐ ์ฐธ์กฐ ์๋ฃํ ๊ฐ์ ๊ฒฝ์ฐ๋ ๋ฐ์ดํฐ ์์ฒด๋ฅผ ๋ณต์ ํ๋ ๊ฒ์ด ์๋ ๋ฐ์ดํฐ์ ์ฃผ์๋ง ๋ณต์ ํ๊ธฐ ๋๋ฌธ์ ์๋ก์ด ๋ณ์(y)๋ฅผ ์์ ํ๋ฉด ๊ธฐ์กด ๋ณ์(x)์ ์ถ๋ ฅ ๊ฐ์๋ ์์ ์ด ๋ฐ์๋๋ค. ( ์ ์ด์ ๊ฐ์ ๊ฐ์ ๊ฐ์ง๊ณ ์ถ๋ ฅํ๋ ๊ฒ์ด๋ )
let x = { name: 'sunghoon', }; let y = x; if(1){ y.name = 'planet'; } console.log(x) // { name : 'planet' }; y๊ฐ์ด ๋ฐ๋๋ x๊ฐ๋ ๋ฐ๋์๋ค. console.log(y) // { name : 'planet' };
Scope
์ค์ฝํ์ ๋ฒ์๋ ์ค๊ดํธ(๋ธ๋ก) ๋๋ ํจ์์ ์ํด ๋๋๊ณ ๋ฐ๊นฅ์ชฝ ์ค์ฝํ์์ ์ ์ธํ ๋ณ์๋ ์์ชฝ ์ค์ฝํ์์ ํ์ฉ๊ฐ๋ฅํ๋ ์์ชฝ ์ค์ฝํ์์ ์ ์ธํ ๋ณ์๋ ๋ฐ๊นฅ์ชฝ ์ค์ฝํ์์ ํธ์ถํ ์ ์๋ค. ( var
๋ ์์ธ ๊ฒฝ์ฐ๊ฐ ์์. )
๋ฐ๊นฅ์ชฝ๊ณผ ์์ชฝ์ ์ด์ผ๊ธฐํ ๋ ๋์น์ฑ๊ฒ ์ง๋ง, ์ค์ฝํ๋ ์ค์ฒฉ์ด ๊ฐ๋ฅํ๋ค.
๊ฐ์ฅ ์ธ๊ฐ์ ์ค์ฝํ๋ฅผ ์ ์ญ ์ค์ฝํ(Global scope)๋ผ๊ณ ํ๊ณ ์์ ์ค์ฝํ๊ฐ ์กด์ฌํ๋ ๋ชจ๋ ์ค์ฝํ๋ค์ ์ง์ญ ์ค์ฝํ(Local scope)๋ผ๊ณ ํ๋ค.
์ ์ญ ์ค์ฝํ๋ ์ฝ๋ ์ด๋์๋ ์ฐธ๊ณ ๊ฐ ๊ฐ๋ฅํ๋ ์ง์ญ ์ค์ฝํ๊ฐ์ ๊ฒฝ์ฐ๋ ํจ์๋ธ๋ก ์์ฒด๋ ๊ทธ ํ์์ ์ฝ๋ ๋ธ๋ก์์๋ง ์ฐธ์กฐ๊ฐ๋ฅํ๋ค.
์ด์ ๊ฐ์ ํน์ง ๋์ ์ ์ญ์ ์ ์ธ๋์ด ์๋ ๋ณ์๋ฅผ ์ง์ญ์์ ๋ค์ ์ ์ธํ๊ณ ์ฌ์ฉ ํ ์ ์๋๋ฐ ์ด ๊ฐ์ ํน์ง์ ์๋์(Variable Shadowing)์ด๋ผ๊ณ ํ๋ค.
๊ฐ์ ๋ณ์๋ฅผ ์ฌ๋ฌ๋ฒ ์ ์ธ ํ ์์๋ ๋งํผ ๋ณ์ ๋ช ์ด ๊ฒน์น๋ฉด ์ค์ฒฉ๋ ์ค์ฝํ์์๋ ์ด๋ ๋ณ์๊ฐ ์ฐธ์กฐ๋๋์ง ํท๊ฐ๋ฆด ์ ์๋๋ฐ, ์ง์ญ ์ค์ฝํ ๊ฐ์ ๊ฒฝ์ฐ๋ ์ ์ญ ์ค์ฝํ ๋ณด๋ค ์ฐ์ ์์๊ฐ ๋์ผ๋ฉฐ ์ค์ฒฉ ์ค์ฝํ๊ฐ์ ๊ฒฝ์ฐ์๋ ์ธ์ ํ ๋ธ๋ก์ ์ฐ์ ํด์ ์ฐธ์กฐํ๋ค.
let x = 10; function func(){ let x = 20; function func1(x) { x = x + 10; // ์ฌ๊ธฐ์ ์ ์ญ์ ์ ์ธ๋ x๋ฅผ ์ฐธ์กฐํ๋๊ฒ ์๋ ๋ฐ๋ก ์์ ๋ธ๋ก์ ์ ์ธํ x = 20์ ์ฐธ์กฐํ๋ค. } return func1() } console.log(x) // 10; ํจ์ ์์์ ์ง์ง๊ณ ๋ณถ๋ ๋ง๋ ์ง์ญ์์ ์ ์ธ๋ ๋ณ์๋ ์ง์ญ ๋ฐ์ผ๋ก ๋์ค์ง ๋ชปํ๋ค.
scope์ ์ข ๋ฅ์ var, let, const
์ค์ฝํ๋ ์ค๊ดํธ๋ก ๋๋๋ ๋ธ๋ก ์ค์ฝํ์ ํจ์๋ก ๋๋ฌ์ผ ๋ฒ์์ธ ํจ์ ์ค์ฝํ๊ฐ ์๋ค.
ํ์ดํ ํจ์๋ ์ ๋งคํ ๋ฉด์ด ์์ผ๋ ๋ธ๋ก ์ค์ฝํ์ ํจ์ ์ค์ฝํ ์ฌ์ด ๊ทธ ์ด๋๊ฐ์ ์๋ค๊ณ ์น์.
๋ธ๋ก ์ค์ฝํ์์ ์ ์ธํ ๋ณ์๋ ๋ธ๋ก์ ๋ฒ์ด๋๋ ์๊ฐ ์ฌ์ฉํ ์ ์๋ค.
๋จ ์๊น๋ถํฐ ์ธ๊ธ ์ค์ธ ์ด var
๋ก ์ ์ธํ ๋ณ์๋ ํจ์ ์ค์ฝํ๋ง ๋ฐ๋ฅด๊ณ ๋ธ๋ก ์ค์ฝํ๋ ๋ฌด์ํ๋ฉด์ ์ฌ์ง์ด ๊ฐ์ ์ค์ฝํ ๋ด์์ ์ฌ์ ์ธ๋ ํ ์ ์๋ ์์ฃผ ๊ทผ๋ณธ ์๊ณ ๋ชป๋๋จน์ ๋์ด๋ค.
์ด๋ฌํ ํน์ฑ ๋๋ฌธ์ ์ต๊ทผ์๋ var
์ฌ์ฉ์ ์ง์๋๊ณ ์ฃผ๋ก const
๋ let
์ผ๋ก ๋ณ์๋ฅผ ์ ์ธํ๋ค.
const
์ let
๋ ๋ชจ๋ ํจ์ ์ค์ฝํ์ ๋ธ๋ก ์ค์ฝํ๋ฅผ ๋ฐ๋ฅด๋ฉฐ ์ฌ์ ์ธ์ด ๋ถ๊ฐ๋ฅํ๋ค๋ ์ ์ ๊ฐ์ง๋ง, const
๋ ์ฌํ ๋น๋ ์๋๋ ํค์๋๋ผ๋ ์ฐจ์ด๊ฐ ์๋ค. ๊ณ ๋ก ๊ฐ์ด ๊ณ ์ ๋์ด ์๋ ๋ณ์๋ const
๋ฅผ ์ฌ์ฉํ๊ณ , ์ฌํ ๋น์ด ํ์ํ ๋ณ์๋ let
์ ์ฌ์ฉํ๋ค.
๋ธ๋ผ์ฐ์ ์์ var
๋ ํจ์ ๋ฐ์์ ์ ์ธ๋ ๋ ์ ์ญ ๊ฐ์ฒด(window)์ ํ๋กํผํฐ๊ฐ ๋๋ค.
์ ์ญ ๋ณ์๋ฅผ ๋ง์ด์ฐ๋ฉด ์๋์น ์์ ๋ถ์ํจ๊ณผ(side-effect)๊ฐ ๋ฐ์ํ ๊ฐ๋ฅ์ฑ์ด ์ปค์ง๋ฏ๋ก ์ ์ญ ๋ณ์๋ ์ง์ํ๋๊ฒ ์ข๋ค.
์๋ฌต์ ์ ์ญ(implicit global)
์ ์ธ์์ด ๋ธ๋ก ์ค์ฝํ ๋ด์์ ๋ณ์๋ฅผ ํ ๋นํ๊ฒ ๋๋ฉด ์ ์ญ๊ฐ์ฒด์ ํ๋กํผํฐ๊ฐ ๋๋ฉด์ ์ ์ญ์์ ์ฐธ์กฐํ ์ ์๊ฒ ๋๋ค. ์ฆ var
๋ก ์ ์ธํ ๊ฒ๊ณผ ์ ์ฌํ ์ทจ๊ธ์ ๋ฐ๊ฒ ๋๋ค.
์ด๋ฅผ ์ญ์ ํ๋ ค๋ฉด delete window.๋ณ์๋ช
๋ฉ์๋
๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
let x = 10; if(1) { y = 20 } console.log(y) // 20; ๋ธ๋ก ์ค์ฝํ ๋ฐ์ผ๋ก ๋ชป๋์ค๋๊ฒ ๋ง์ง๋ง ์ ์ธ์์ด ํ ๋น์ ํด๋ฒ๋ ค ์ ์ญ๊ฐ์ฒด์ ํ๋กํผํฐ๊ฐ ๋์ด๋ฒ๋ ธ๋ค.
Closure Function ( ํด๋ก์ ํจ์ )
ํด๋ก์ ํจ์์ ์ ์๋ ํจ์์ ํจ์๊ฐ ์ ์ธ๋ ์ดํ์ ํ๊ฒฝ(lexical environment)์ ์กฐํฉ์ ๋งํ๋ค. ์ด ํ๊ฒฝ์ ํด๋ก์ ๊ฐ ์์ฑ๋ ์์ ์ ์ ํจ ๋ฒ์ ๋ด์ ์๋ ๋ชจ๋ ์ง์ญ ๋ณ์๋ก ๊ตฌ์ฑ๋๋ค.
์ด๋ค.
์ดํ์ ํ๊ฒฝ์ ๋ณ์ ๋ฐ ํจ์ ์ ์ธ์ ํํ ์ ๋๋ก๋ง ๊ธฐ์ตํด๋์.
๋ง์ด ์ด๋ ค์ด๋ฐ ์กฐ๊ธ ํ์ด์ฐ์๋ฉด ๋ฆฌํด๋ ๋ด๋ถํจ์(ํด๋ก์ ํจ์)๊ฐ ๋ด๋ถํจ์๋ฅผ ๊ฐ์ธ๊ณ ์๋ ์ธ๋ถํจ์์ ์คํ์ด ์ข
๋ฃ๋ ํ ์ธ๋ถ์์ ํธ์ถ๋์ด๋ ๊ทธ ํจ์๊ฐ ๋ฆฌํด๋๋ฉฐ ์ ์ธ๋์์ ๋น์ ํ๊ฒฝ์ ๊ธฐ์ตํด ๊ทธ ํ๊ฒฝ์ ์ ๊ทผ ํ ์ ์๊ฒ ํด์ฃผ๋ ๊ฒ์ด๋ค.
๋๊ฐ์ด ๋จธ๋ฆฌ์ํ๋ค
์กฐ๊ธ ๋ ๊ฐ๋จํ๊ฒ ํ์๋ฉด ์ธ๋ถ ํจ์์ ์ ๊ทผ ํ ์ ์๋ ๋ด๋ถ ํจ์์ ๋๋ก๋ง ๊ธฐ์ตํด๋์.
ํด๋ก์ ํจ์๋ ํจ์๊ฐ ๋ด๋ถ์ ์ธ๋ถ๋ก ๋๋์ด ์๊ณ ์ด๋ฅผ ๋ด๋ถ ํจ์, ์ธ๋ถ ํจ์๋ผ๊ณ ํ๋ค.
์ด ์ญ์ ๋ค๋ฅธ ์ค์ฝํ๋ค๊ณผ ๊ฐ์ด ์ธ๋ถ ํจ์์์ ๋ด๋ถ ํจ์์์ ์ ์ธํ ๋ณ์์ ์ ๊ทผ ๋ถ๊ฐ๋ฅํ๋ฉฐ,
๋ฐ๋๋ก ๋ด๋ถ ํจ์์์ ์ธ๋ถ ํจ์์์ ์ ์ธํ ๋ณ์์ ์ ๊ทผ ๊ฐ๋ฅํ๋ค.
function outer(x){ y += 1 return function inner(y){ x += 1 } } //outer์ ์ค์ฝํ์ inner์ ๋งค๊ฐ๋ณ์์ 1 ๋ํ๋ค๋ ๊ฒ ์ ํ์๋ค. //์ด๋ฐ ์์ผ๋ก ์ธ๋ถ ํจ์์์ ๋ด๋ถ ํจ์์์ ์ ์ธ๋ ๋ณ์๋ก์ ์ฐธ์กฐ๋ ๋ถ๊ฐํ๋ค.
์๋ ํจ์์ ๋งค๊ฐ๋ณ์ ๊ฐ๊น์ง ์ง์ ํด์ ํธ์ถํ๋ ๊ฒ์ ๋ณ์์ง์ ์ด ๋์ง ์๊ณ , ์ผ๋ฐ์ ์ธ ํจ์๋ ํจ์์คํ์ด ๋๋๋ฉด ํจ์ ๋ด๋ถ์ ์ ๊ทผํ ์ ์์ง๋ง, ํด๋ก์ ํจ์์ ๊ฒฝ์ฐ ์ดํ์ ํ๊ฒฝ์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํ๊ธฐ์ ์ธ๋ถ ํจ์ ๋ด ๋ณ์๊ฐ ๋ฉ๋ชจ๋ฆฌ ์์ ์ ์ฅ๋๋ค.
์์ฉ: ํด๋ก์ ๋ชจ๋ ํจํด
ํด๋ก์ ํจ์๋ ์ธ๋ถ ํจ์ ๋ด ๋ณ์๊ฐ ๋ฉ๋ชจ๋ฆฌ ์์ ์ ์ฅ๋๊ธฐ์ ์ธ๋ถ์์ ๋ณ์์ ์ ๊ทผํ์ง ๋ชปํ๊ฒ ํ๊ณ ๋ช๊ฐ์ง ์ ํด๋ ํจํด์ผ๋ก ํจ์๋ฅผ ํธ์ถํจ์ผ๋ก ๋ด๋ถ์ ์๋ ๋ฐ์ดํฐ๋ฅผ ๋ณ๊ฒฝ์ํค๋ ๋ฐฉ๋ฒ์ด ํด๋ก์ ๋ชจ๋ ํจํด์ด๋ค.
ํจ์์ ๋ฆฌํด ๊ฐ์ ๊ฐ์ฒด๋ก ์ ํ๊ณ ๊ฐ์ฒด์ ํ๋กํผํฐ ๋ฐธ๋ฅ์ ํจ์๋ฅผ ํ ๋นํ๋ฉด์ ๊ทธ๊ฑธ ์๋์ํฌ ํ๋กํผํฐ ํค๋ฅผ ์ค์ ํ๋ ๊ฒ์ด๋ค.
const makeCounter = () => { let count = 0; return { increase: () => count++, decrease: () => count--, getCount: () => count, } } let counter1 = makeCounter(); counter1.increase(); counter1.increase(); counter1.increase(); counter1.getCount(); // 3; let counter2 = makeCounter(); counter2.decrease(); counter2.decrease(); counter2.decrease(); counter2.getCount(); //-3; //์ดํ์ ํ๊ฒฝ์ ์ ์ฅํ๋ ํน์ฑ ๋์ ์ธ๋ถ ํจ์๋ฅผ ๋ค๋ฅธ ๋ณ์์ ์ง์ ํ๋ฉด, //๊ฐ์ ํจ์๋ก ์ฌ๋ฌ ๊ฐ์ ๊ฐ์ง๊ฒ ํ ์ ์๋ค.
GOOD ๐
์์ ์๋ฃํ๊ณผ ์ฐธ์กฐ ์๋ฃํ์ ์ฐจ์ด๋ฅผ ๋ณด๋ค ํ์คํ ํ๋ค.
์ค์ฝํ ๊ฐ๋
์ ๋ช
ํํ ํ๊ณ , ํด๋ก์ ๊ฐ๋
์ ๋ฐฐ์ ๋ค.
์ค๋์ ์๊ฐ์ด ๋ถ์กฑํ์ง ์์๋ค.
BAD ๐ฅ
์ญ์ ๋ค๋ฅธ ๊ณต๋ถ๋ฅผ ๋ชปํ๊ฒ ๋ง์์ ๊ฑธ๋ฆฐ๋ค.
TO DO ๐ฅ
- DOM ๊ตฌ์กฐ
- React
- ์ฌ๊ท ํจ์
- ์์นจ์ Spread, Rest ๋ฌธ๋ฒ๊ณผ js Koans ์์ต
Retrospect ๐ง
์ค๋์ ํ์ด๊ฐ ์๋ ์ฑํฐ๋ก ๊ฐ๋ํ ๋ง์ง๋ง ๋ ์ด๋ค.
์๋ง ์ค๋์ฒ๋ผ ์ฑํฐ์๊ฐ์ ์ฌ์ ๋กญ๊ฒ ๊ฐ์ง๋ฉฐ ๊ณต๋ถํ๋ ๋ ์ ์์ผ๋ก ์๊ฒ ์ง.
์ ์ ์ชผ์ผ๊ณ ์ ๋๋ก ๋ฌ๋ ค๋ณด์!
Reference ๐
https://poiemaweb.com/
https://developer.mozilla.org/
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(TIL - 21.07.01 ๐จโ๐ป - JS), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@planethoon/TIL-21.07.01์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค