Logo
Hyunsu Blog
peep

๐Ÿ“†Published :Mar 23, 2024 โ€ข

๐Ÿ“†Updated :Mar 23, 2024 โ€ข

โ˜•๏ธ3min

๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ์™€ ์ฐธ์กฐํ˜• ๋ฐ์ดํ„ฐ๋ฅผ ์•Œ์•„์•ผ ํ•˜๋Š” ์ด์œ 

๋“ค์–ด๊ฐ€๋ฉฐ

์ฝ”์–ด์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฑ…์˜ ์ฑ•ํ„ฐ 1. ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ์ฝ๊ณ  ๋‚œ ํ›„ ์ดํ•ดํ•œ ์ ์„ ๋ฐ”ํƒ•์œผ๋กœ ์žฌ๊ตฌ์„ฑํ•˜์—ฌ ์“ด ๊ธ€์ด๋‹ค.

์ด ์ฑ•ํ„ฐ๋ฅผ ์ฝ์œผ๋ฉด์„œ ์™œ ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ์™€ ์ฐธ์กฐํ˜• ๋ฐ์ดํ„ฐ๋ฅผ ์•Œ์•„์•ผ ํ•˜๋Š” ๊ฑด์ง€, ๊ทธ๋ฆฌ๊ณ  ์ด ์ง€์‹์„ ์•Œ์•˜์„ ๋•Œ ์–ด๋–ค ๊ฐ€์น˜๋ฅผ ๊ฐ€์ ธ๋‹ค ์ฃผ๋Š”์ง€๋ฅผ ๊ณ„์† ์ƒ๊ธฐํ•˜๋ฉด์„œ ์ดํ•ดํ•˜๋ ค๊ณ  ํ–ˆ๋‹ค. ์ฑ•ํ„ฐ๋ฅผ ์ฝ๊ณ  ๋‚œ ํ›„์˜ ํฐ ๊ฒฐ๋ก ์„ ์ด์•ผ๊ธฐ ํ•˜์ž๋ฉด ๊ฒฐ๊ตญ ๋ฉ”๋ชจ๋ฆฌ ๊ด€๋ฆฌ์˜ ํšจ์œจ์„ฑ์„ ์œ„ํ•œ ๊ฒƒ์ด๋‹ค.

๋ฉ”๋ชจ๋ฆฌ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ์“ด๋‹ค๋Š” ๊ฒƒ์€ ๋ฐ์ดํ„ฐ ํƒ€์ž…์—์„œ๋Š” ๋ณ€์ˆ˜์— ํ• ๋‹น ๋œ ๋ฐ์ดํ„ฐ๋“ค์„ ๋งค๋ฒˆ ์ƒˆ๋กœ ์ƒ์„ฑ ํ•˜์ง€ ์•Š๊ณ  ๊ฐ™์€ ๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋ฐ์ดํ„ฐ ์˜์—ญ(๋’ค์— ์„ค๋ช…๋  ๊ฒƒ์ด๋‹ค) ์˜ ๋ฉ”๋ชจ๋ฆฌ์—์„œ ์ฃผ์†Œ๊ฐ’์„ ์ฐธ์กฐ ํ•œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.(์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅ)

๊ทธ๋ฆฌ๊ณ  ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ์™€ ์ฐธ์กฐํ˜•๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ณผ์ •์—์„œ ์šฐ๋ฆฌ๋Š” ๋งค ์—ฐ์‚ฐ๋งˆ๋‹ค ์ด๋“ค์ด ์–ด๋–ป๊ฒŒ ๋ฉ”๋ชจ๋ฆฌ์—์„œ ํ™œ์šฉ๋˜๊ณ  ์žˆ๋Š”์ง€, ์ด ๋ฐ์ดํ„ฐ๋“ค์ด ์–ด๋–ป๊ฒŒ ๋ณ€ํ•˜๋Š”์ง€ ์˜ˆ์ธก ํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ๊ทธ ์ด์œ ๋Š” ์ด ๋‘˜์€ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ์‹์ด ๋‹ค๋ฅธ๋ฐ ํ”„๋กœ๊ทธ๋ž˜๋จธ๋กœ์„œ ๋ฐฉ์‹์„ ์•Œ๊ณ  ์žˆ๋‹ค๋ฉด ์ž‘์„ฑํ•˜๋Š” ๋กœ์ง์˜ ์˜ˆ์ธก์ด ๋” ์‰ฌ์›Œ์งˆ ๊ฒƒ์ด๋ผ๊ณ  ์˜ˆ์ƒํ•œ๋‹ค.

๊ฐ์ฒด๋Š” ๊ฐ€๋ณ€์ (mutable) ์ด๋ผ๊ณ  ํ•˜๋Š”๋ฐ, ๋‚ด๋ถ€ ๋™์ž‘ ์›๋ฆฌ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋˜๋Š”์ง€? ๊ทธ๋ฆฌ๊ณ  "๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ๊ฐ€ ๋ถˆ๋ณ€(immutable)ํ•˜๋‹ค" ๋ฅผ ๋ฉ”๋ชจ๋ฆฌ ๊ด€์ ์—์„œ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ๋Š”์ง€? ์— ๋Œ€ํ•œ ๊ถ๊ธˆ์ฆ์ด ํ•ด์†Œ๊ฐ€ ๋  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ์˜ ๋ถˆ๋ณ€์„ฑ(immutability) ์ฆ๋ช…ํ•˜๊ธฐ

์ „์ œ : ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ๊ฐ€ ๋ถˆ๋ณ€์ด์ง€ ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด์€ ๋ณ€์ˆ˜๊ฐ€ ๋ถˆ๋ณ€์ธ ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค.

  • ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ๋Š” ์ฑ…์—์„œ ๋งํ•˜๋Š” ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ๋ฐ์ดํ„ฐ ์˜์—ญ๊ณผ ๋ณ€์ˆ˜ ์˜์—ญ์œผ๋กœ ๊ตฌ๋ถ„ ํ•œ ๊ฒƒ์—์„œ, ๋ฐ์ดํ„ฐ ์˜์—ญ์˜ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ์ด์•ผ๊ธฐ ํ•œ๋‹ค.
  • ๋ฐ์ดํ„ฐ ์˜์—ญ์˜ ๋ฉ”๋ชจ๋ฆฌ๋ž€ ์ฃผ์†Œ์ธ๋ฐ ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ ๊ฐ’์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋Š” ์ฃผ์†Œ๋กœ ์ดํ•ด ํ•ด๋„ ๋  ๊ฒƒ ๊ฐ™๋‹ค.(์•„๋ž˜ ์ด๋ฏธ์ง€์˜ ํšŒ์ƒ‰&ํŒŒ๋ž€์ƒ‰ ๋ฉ”๋ชจ๋ฆฌ์ฃผ์†Œ ๋ถ€๋ถ„ ์ฐธ๊ณ )
  • ๋ณ€์ˆ˜ ์˜์—ญ์€ ๋ฐ์ดํ„ฐ๊ฐ€ ๋‹ด๊ธด ๋ฐ์ดํ„ฐ ์˜์—ญ์˜ ๋ฉ”๋ชจ๋ฆฌ ์ฃผ์†Œ๊ฐ€ ํ• ๋‹น๋œ๋‹ค.
var a = 10; var b = a; console.log(b) // 10 b = 0; console.log(b) // 0 console.log(a) // 10
  • ๋ถˆ๋ณ€์„ ์„ค๋ช…ํ•˜๊ธฐ ์œ„ํ•ด์„  b๋ผ๋Š” ๋ณ€์ˆ˜๊ฐ€ 0์œผ๋กœ ์žฌํ• ๋‹น ๋˜์—ˆ์„ ๋•Œ, ๋ฐ์ดํ„ฐ ์˜์—ญ์˜ 5000๋ฒˆ์—์„œ ๋ฐ์ดํ„ฐ ๊ฐ’์ด 10->0 ์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋Š”๊ฑธ ๊ธฐ๋Œ€ํ–ˆ์„ ์ˆ˜๋„ ์žˆ๊ฒ ์ง€๋งŒ, ๊ทธ๋ ‡๊ฒŒ ๋˜๋ฉด ๋ถˆ๋ณ€์„ฑ์ด ์•„๋‹ˆ๋‹ค. ๊ทธ ์ด์œ ๋Š” ์ด๋ฏธ 10์ด๋ผ๋Š” ๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋ฉ”๋ชจ๋ฆฌ์—์„œ ๊ฐ’์„ ๋ณ€๊ฒฝ ์‹œํ‚ค๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค(๊ฐ€๋ณ€). ๋ถˆ๋ณ€์„ฑ์„ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด 0์˜ ๊ฐ’์„ ๊ฐ€์ง„ ๋ฐ์ดํ„ฐ ์˜์—ญ(๋ผ์ดํŠธ๋ธ”๋ฃจ&๊ทธ๋ ˆ์ด)์—์„œ ์ƒˆ๋กœ์šด ์ฃผ์†Œ๊ฐ€ ๋งŒ๋“ค์–ด ์กŒ๊ณ , ๋ณ€์ˆ˜b์˜ ์ฃผ์†Œ์—์„œ 0์˜ ๊ฐ’์„ ๊ฐ€์ง„ ๋ฐ์ดํ„ฐ์˜์—ญ์˜ 5001๋ฒˆ์„ ์ฐธ์กฐํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋ณ€๊ฒฝ๋˜์—ˆ๋‹ค.

  • ๋ฐ์ดํ„ฐ์˜ ์˜์—ญ์— ์žˆ๋Š” ์ฃผ์†Œ์˜ ๋ฐ์ดํ„ฐ๋Š” ๋ณ€๊ฒฝ ๋˜์ง€ ์•Š๋Š”๋‹ค. ์ƒˆ๋กœ ์ƒ์„ฑ๋  ๋ฟ, ์ด๊ฒƒ์ด ๋ถˆ๋ณ€์„ฑ์„ ๋งํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด๊ฒŒ ์˜ค์ง ๋ฐ์ดํ„ฐ ์˜์—ญ์—์„œ ์ผ์–ด๋‚˜๊ณ , ๋ฐ์ดํ„ฐ ์˜์—ญ์€ ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ ํƒ€์ž…์œผ๋กœ๋งŒ ์ €์žฅ ๋  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๊ฒฐ๊ตญ ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ๋Š” ๋ถˆ๋ณ€์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

  • ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด์€ ๋ณ€์ˆ˜๋Š” ๋ถˆ๋ณ€์ด ์•„๋‹ˆ๋‹ค. ๋ณ€์ˆ˜๋Š” ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ๋‹ค. ์•„๋ž˜ ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ ์‹๋ณ„์ž b ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์ฃผ์†Œ 1004์˜ ๊ฐ’์ด ์ฃผ์†Œ 5000 ->5001 ๋กœ ๋ณ€๊ฒฝ๋จ์œผ๋กœ์จ ๋ณ€์ˆ˜๊ฐ€ ๋ถˆ๋ณ€์ด ๋˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค๋ฅผ ์ฆ๋ช…ํ•œ๋‹ค.

๋ฐ์ดํ„ฐํƒ€์ž…1


๊ทธ๋Ÿผ ์ฐธ์กฐํ˜• ๋ฐ์ดํ„ฐ๋Š” ๊ฐ€๋ณ€์ผ๊นŒ? ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ์™€๋Š” ์–ด๋–ป๊ฒŒ ๋‹ค๋ฅธ๊ฐ€?

์—ฌ๊ธฐ์„œ ์ค‘์š”ํ•œ ์ ์€ ์œ„์—์„œ ๊ธฐ๋ณธํ˜•์€ ๋ถˆ๋ณ€์ด๋ผ๊ณ  ํ–ˆ๋‹ค๋ฉด, ์ฐธ์กฐํ˜• ๋ฐ์ดํ„ฐ๋Š” ๊ฐ€๋ณ€์ ์ธ ์„ฑ์งˆ์„ ๋„๊ณ  ์žˆ๋Š”์ง€, ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ์™€๋Š” ์–ด๋–ป๊ฒŒ ๋‹ค๋ฅธ์ง€ ๊ฐ์ฒด๋Š” mutable ํ•˜๋‹ค์˜ ๋‚ด๋ถ€์  ๋™์ž‘์„ ์•Œ์•„๋ณด์•˜๋‹ค.

var obj = { "c" : 0, "d" : "10" } var anotherObj = obj; anotherObj.d = 0 console.log(obj === anotherObj) // true โ—๏ธanotherObj.d ๋ฅผ ๋ณ€๊ฒฝํ•˜์˜€์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  obj๋Š” anotherObj์™€ ์ผ์น˜ํ•œ๋‹ค. ์™œ์ผ๊นŒ?
์ฐธ์กฐํ˜•์ด ๊ฐ€๋ณ€์  ์„ฑ์งˆ์ด ์žˆ์Œ์„ ์ฆ๋ช…
  • ๊ฐ์ฒด์˜ ๋ณ€์ˆ˜ ์˜์—ญ์ด ์กด์žฌํ•œ๋‹ค๋Š” ์ ์ด๋‹ค.(3000~). ๊ทธ๋ฆฌ๊ณ  ๊ทธ ๋ณ€์ˆ˜์˜ ๊ฐ’์€ ๊ธฐ์กด ๋งŒ๋“ค์–ด ๋‘์—ˆ๋˜ ๋ฐ์ดํ„ฐ 0,10 ์„ ๊ทธ๋Œ€๋กœ ํ™œ์šฉํ•˜๊ณ  ์žˆ๋‹ค.
  • ๊ฐ์ฒด ๋‚ด ํ”„๋กœํผํ‹ฐ๋“ค์˜ ๊ฐ’์€ ๊ธฐ๋ณธํ˜• ๊ฐ’์ด๋ฏ€๋กœ ๋ฐ์ดํ„ฐ ์˜์—ญ์— ์ €์žฅ๋œ ๋ถˆ๋ณ€ ๊ฐ’๋“ค์ด๋‹ค. ํ•˜์ง€๋งŒ ๊ฐ์ฒด๋Š” ๋ฉ”๋ชจ๋ฆฌ ๋ณ€์ˆ˜ ์˜์—ญ์— ์žˆ์œผ๋ฏ€๋กœ anotherObj.d์˜ ๊ฐ’์˜ ๋ณ€๊ฒฝ ์ฆ‰, ๋ณ€์ˆ˜ 3001 ์€ ์›๋ž˜ 5000์ฃผ์†Œ๋ฅผ ์ฐธ์กฐํ•˜๋˜ ๊ฒƒ์—์„œ 5001์„ ์ฐธ์กฐํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋ฐ”๋€” ๋ฟ ์ด๊ฑธ ์ฐธ์กฐํ•˜๋Š” ์ฃผ์†Œ๊ฐ’ 2000์„ anotherObj,obj๋Š” ๊ฒฐ๊ตญ ๊ฐ™์€ ๊ฐ’์„ ๊ฐ–๊ฒŒ ๋œ๋‹ค.
  • ์ด๊ฒŒ ์ฐธ์กฐํ˜• ๋ฐ์ดํ„ฐ๋Š” ๋ถˆ๋ณ€ํ•˜์ง€ ์•Š๋‹ค ๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

mutable_data_type

์œ„์˜ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ๊ฐ์ฒด ๋ฐ์ดํ„ฐ ํƒ€์ž…์—์„œ ๊ฐ€๋ณ€์„ฑ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•œํŽธ์œผ๋กœ ์ด๋Ÿฌํ•œ ๊ฐ€๋ณ€์„ฑ์€ ๋ฌธ์ œ์ ์„ ์•ˆ๊ณ  ์˜ค๊ธฐ๋„ ํ•œ๋‹ค. ์›๋ณธ๊ฐ์ฒด๊ฐ€ ๋ฐ”๋€Œ์ง€ ๋ง์•„์•ผ ํ•  ์ƒํ™ฉ์—์„œ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธด๋‹ค.

// ๊ฐ์ฒด ๋ฐ์ดํ„ฐ ํƒ€์ž…์—์„œ ๊ฐ€๋ณ€์„ฑ์œผ๋กœ ์ธํ•œ ๋ฌธ์ œ์  // ๊ฐ์ฒด ๋ฐ์ดํ„ฐ ํƒ€์ž…์€ ๊ฐ€๋ณ€์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค. var user = { name: "Sue", gender: "male", }; const changeName = (user, newName) => { const newUser = user; newUser.name = newName; return newUser; // โ—๏ธ ๋‚˜๋ฆ„ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด์„œ ๋ฆฌํ„ดํ•œ ๋…ธ๋ ฅ ! ๋ฆฌํ„ดํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์‹ค์ œ๋กœ๋Š” user์™€ newUser๊ฐ€ ๊ฐ™์€ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— user์˜ ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒƒ์ด๋‹ค. }; const user2 = changeName(user, "Sue2"); if (user !== user2) { console.log("์œ ์ € ์ •๋ณด๊ฐ€ ๋ณ€๊ฒฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค."); } console.log(user.name, user2.name); // โ—๏ธSue2 , Sue2 console.log(user === user2); //โ—๏ธ true

์›๋ณธ ๊ฐ์ฒด๊ฐ€ ๋ฐ”๋€Œ์ง€ ๋ง์•„์•ผ ํ•  ์ƒํ™ฉ์ด๋ผ ํ•œ๋‹ค๋ฉด ๊ฐ€๋ น, ์œ ์ €๊ฐ€ ์ •๋ณด๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š”๋ฐ changeNameํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ๋ณ€๊ฒฝ ํ•˜๊ณ  ๋‚œ ํ›„์˜ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์—์„œ๋Š” ๋ฐ”๋€์ •๋ณด๋ฅผ, ์ผ๋ฐ˜ ๋ชจ๋“œ์—์„œ๋Š” ๋ณ€๊ฒฝ์ „ ๊ธฐ์กด ์œ ์ € ์ •๋ณด๋ฅผ ๋™์‹œ์— ๋ณด์—ฌ์ค˜์•ผ ์ƒํ™ฉ์ด๋ผ๋ฉด,

๋ถˆ๋ณ€ ๊ฐ์ฒด๊ฐ€ ํ•„์š”ํ•˜๋‹ค.

๊ทธ๋Ÿฌ๋‹ˆ๊น ๋ณต์‚ฌ๋ณธ์ด ์ˆ˜์ • ๋˜๋”๋ผ๋„ ์›๋ณธ์€ ์ˆ˜์ •์ด ๋˜๋ฉด ์•ˆ๋œ๋‹ค. ์œ„์˜ ๊ฐ์ฒด๊ฐ€ ๊ฐ€์ง„ ๊ฐ€๋ณ€์„ฑ์„ ๋ง‰๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ๋Š” ๊ฐ์ฒด์— ์ƒˆ๋กœ์šด ๊ฐ’์„ ํ• ๋‹น ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ํ”„๋กœํผํ‹ฐ ๋ณ€๊ฒฝ /ํ• ๋‹น์ด ์•„๋‹Œ, ์ƒˆ๋กœ์šด ๋ฐ์ดํ„ฐ ์ž์ฒด๋ฅผ ๋งํ•œ๋‹ค.

const changeName = (user, newName) => { const newUser = user; newUser.name = newName; return newUser; // โ—๏ธ ๋‚˜๋ฆ„ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด์„œ ๋ฆฌํ„ดํ•œ ๋…ธ๋ ฅ ! ๋ฆฌํ„ดํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์‹ค์ œ๋กœ๋Š” user์™€ newUser๊ฐ€ ๊ฐ™์€ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— user์˜ ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒƒ์ด๋‹ค. };

๊ทธ๋Ÿฐ๋ฐ ์ด ์˜ˆ์ œ๋Š” ์ฑ…์—์„œ๋„ ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด, "์ฐธ์กฐํ˜• ๋ฐ์ดํ„ฐ๊ฐ€ ๊ฐ€๋ณ€๊ฐ’์ด๋ผ๊ณ  ์„ค๋ช…ํ•  ๋•Œ์˜ ๊ฐ€๋ณ€์€ ์ฐธ์กฐํ˜• ๋ฐ์ดํ„ฐ ์ž์ฒด๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์•„๋‹ˆ๋ผ ๊ทธ ๋‚ด๋ถ€์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ๋ณ€๊ฒฝํ•  ๋•Œ๋งŒ ์„ฑ๋ฆฝํ•ฉ๋‹ˆ๋‹ค." ์— ๋Œ€ํ•œ ๋ฐ˜์ฆ์ด๋‹ค.

๊ฐ€๋ณ€์ ์ธ ์ฐธ์กฐํ˜• ๋ฐ์ดํ„ฐ๋Š” ํ•จ์ˆ˜ ํ”„๋กœํผํ‹ฐ๋งŒ ๋ณ€๊ฒฝ ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ฐธ์กฐํ˜• ๋ฐ์ดํ„ฐ๊ฐ€ ๊ฐ€๋ณ€์ ์ด๋‹ค๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค. ํ”„๋กœํผํ‹ฐ ๋ณ€๊ฒฝ์ด ์•„๋‹Œ ์ƒˆ๋กœ์šด ๊ฐ’์„ ๊ฐ€์ง„ ๊ฐ์ฒด๋ฅผ ๋ฆฌํ„ดํ•œ๋‹ค๋ฉด ๊ฐ€๋ณ€์€ ๋ถˆ๋ณ€์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ๋ฆฌํ„ดํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ๋Š”,

  • object literal ๋ฐฉ์‹
  • object literal ๋ฐฉ์‹์ด ๋ฒˆ๊ฑฐ๋กœ์šฐ๋‹ˆ ๋ชจ๋“  ํ”„๋กœํผํ‹ฐ๋ฅผ ๋ณต์‚ฌํ•˜๋Š” ํ•จ์ˆ˜
  • Object.create()
  • Object.assign()
  • object spread operator

๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด๋Ÿฐ ๋ฐฉ์‹์€ ์ค‘์ฒฉ๋œ ๊ฐ์ฒด์—์„œ ๋ณต์‚ฌ๊ฐ€ ๋˜์ง€ ์•Š๋Š”๋‹ค. ๊ทธ ์ด์œ ๋Š” ์ฐธ์กฐํ˜• ๋ฐ์ดํ„ฐ๊ฐ€ ์ €์žฅ๋œ ํ”„๋กœํผํ‹ฐ๋ฅผ ๋ณต์‚ฌํ•  ๋•Œ ์ฃผ์†Œ๊ฐ’๋งŒ ๋ณต์‚ฌํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด๋ฅผ ์–•์€ ๋ณต์‚ฌ๋ผ ํ•œ๋‹ค. ํ•ด๊ฒฐ๋ฐฉ๋ฒ•์œผ๋กœ๋Š” ๊นŠ์€ ๋ณต์‚ฌ ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•˜๋‹ค.

๊นŠ์€ ๋ณต์‚ฌ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•๋“ค

  • ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜์—ฌ ๋‚ด๋ถ€ ํ”„๋กœํผํ‹ฐ๋“ค์„ ์ผ์ผ์ด ์ˆœํšŒํ•œ๋‹ค. ๋งŒ์•ฝ ํ”„๋กœํผํ‹ฐ๊ฐ€ ๊ฐ์ฒด๋ผ๋ฉด ๊ทธ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋“ค์„ ๋‹ค์‹œ ์ˆœํšŒํ•˜์—ฌ ๊ฐ’๋“ค์„ ๋ณต์‚ฌํ•˜๋Š” ๋ฐฉ๋ฒ•.
  • JSON.parse(JSON.stringify( object )) ์ด์šฉ
  • (์ฑ…์—๋Š” ์•„์ง ๊ธฐ์žฌ๋˜์ง€ ์•Š์€) WebAPIs ์—์„œ ์ œ์‹œํ•œ structuredClone() .MDN structuredClone ์ฐธ๊ณ 
  • Lodashโ€™s cloneDeep()

์ •๋ฆฌํ•˜๋ฉฐ

๋ถˆ๋ณ€์„ฑ์„ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ์™์™ ๋“ค์–ด์˜ค๋Š” ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋ž€ ์ฑ…์—์„œ๋Š” ์นดํ”ผ-์˜จ-๋ผ์ดํŠธ์™€ ๋ฐฉ์–ด์  ๋ณต์‚ฌ๋ฅผ ์†Œ๊ฐœ ํ•œ๋‹ค. ํŠนํžˆ๋‚˜ ๋ ˆ๊ฑฐ์‹œ ์ฝ”๋“œ๋‚˜ ์‹ ๋ขฐํ•  ์ˆ˜ ์—†๋Š” ์ฝ”๋“œ๋กœ๋ถ€ํ„ฐ ๋ถˆ๋ณ€์„ฑ์„ ์ง€ํ‚ค๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๋Š”๋ฐ, ์˜ค๋Š˜ ํฌ์ŠคํŒ…์œผ๋กœ ๊ฐ์ฒด์—์„œ ๊ฐ€๋ณ€์„ฑ์˜ ์›๋ฆฌ๋ฅผ ์•Œ์•˜์œผ๋‹ˆ ์—ฐ์žฅ์„ ์œผ๋กœ ์ข‹์€ ๋ฐฐ์›€์ด ๋  ๊ฒƒ ๊ฐ™๋‹ค.


์ฐธ๊ณ ์ž๋ฃŒ

Hi, I'm Hyunsu ๐Ÿ‘‹

Profile Image

์•ˆ๋…•ํ•˜์„ธ์š”. ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ฃผํ˜„์ˆ˜์ž…๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ํ’๋ถ€ํ•˜๊ณ  ๊ฐ€์น˜ ์žˆ๋Š” ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋Š” ์ผ์— ๋ฟŒ๋“ฏํ•จ์„ ๋Š๋‚๋‹ˆ๋‹ค.

์˜ต์‹œ๋””์–ธ(Obsidian)์—์„œ ํ˜„์žฌ ๋ธ”๋กœ๊ทธ๋กœ ํ•˜๋‚˜์”ฉ ๊ธ€์„ ์˜ฎ๊ธฐ๋Š” ๊ณผ์ •์— ์žˆ์–ด์š”. โ˜•๏ธ ๐Ÿ‘ฉโ€๐Ÿ’ป โ›ท

Github on ViewReach Me Out