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/

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ