๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Frontend Dev/JavaScript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ž๋ฃŒํ˜• - ์›์‹œ ํƒ€์ž…(primitive type)๊ณผ ๊ฐ์ฒด ํƒ€์ž…(object type)์˜ ํŠน์ง•

๋ฐ˜์‘ํ˜•

๐Ÿ‘พ ์›์‹œ ํƒ€์ž…(primitive type)

  1. ๋ณ€์ˆ˜์— ํ• ๋‹น์‹œ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์— ๊ฐ’ ์ž์ฒด๊ฐ€ ์ €์žฅ๋œ๋‹ค.
  2. ์›์‹œ ๊ฐ’์„ ๊ฐ–๋Š” ๋ณ€์ˆ˜๋ฅผ ๋‹ค๋ฅธ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜๋ฉด ์›์‹œ ๊ฐ’ ์ž์ฒด๊ฐ€ ๋ณต์‚ฌ๋˜์–ด ์ „๋‹ฌ๋œ๋‹ค. (pass-by-value)
    โ†’ ์›๋ณธ์„ ๋ณ€๊ฒฝํ•ด๋„ ๋ณต์‚ฌ๋ณธ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š๋Š”๋‹ค.
  3. ์›์‹œ ๊ฐ’์€ Immutable value(๋ณ€๊ฒฝ ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฐ’). ์ฆ‰, ํ•œ ๋ฒˆ ์ƒ์„ฑ๋œ ์›์‹œ ์ž๋ฃŒํ˜•์€ ์ฝ๊ธฐ ์ „์šฉ(read only) ๊ฐ’์ด๋‹ค.
    โ†’ ๋ณ€์ˆ˜์— ๋‹ค๋ฅธ ๊ฐ’์„ ์žฌํ• ๋‹น์‹œ ์ƒˆ๋กœ์šด ์›์‹œ๊ฐ’์ด ์ƒ์„ฑ๋˜๋ฉฐ, ๋ณ€์ˆ˜๊ฐ€ ๋‹ค๋ฅธ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ์ฐธ์กฐํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ธฐ์กด์— ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฐ’์€ ์ž๋™์œผ๋กœ ๋ฉ”๋ชจ๋ฆฌ์—์„œ ์‚ญ์ œ๋œ๋‹ค. (JavaScript์˜ ๊ฐ€๋น„์ง€ ์ฝœ๋ ‰ํ„ฐ(garbage collector) ์ž‘๋™)

 

๐Ÿ‘พ ๊ฐ์ฒด ํƒ€์ž…(object/reference type)

  1. ๋ณ€์ˆ˜์— ํ• ๋‹น์‹œ ์ €์žฅ ๊ณต๊ฐ„์„ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋Š” ์ฃผ์†Œ๊ฐ’(address)์ด ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์— ์ €์žฅ๋œ๋‹ค.
    โ†’ ์ด๋•Œ ์ฐธ์กฐ ์ž๋ฃŒํ˜•์„ ์ €์žฅํ•˜๋Š” ๊ณต๊ฐ„์„ ํž™(heap)์ด๋ผ๊ณ  ํ•œ๋‹ค.
  2. ์ฐธ์กฐ ๊ฐ’์„ ๊ฐ–๋Š” ๋ณ€์ˆ˜๋ฅผ ๋‹ค๋ฅธ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜๋ฉด ์ฃผ์†Œ๊ฐ’์ด ๋ณต์‚ฌ๋˜์–ด ์ „๋‹ฌ๋œ๋‹ค. (Pass-by-reference)
    โ†’ ๊ฐ™์€ ์ฃผ์†Œ๋ฅผ ์ฐธ์กฐํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์›๋ณธ์„ ๋ณ€๊ฒฝํ•˜๋ฉด ๋ณต์‚ฌ๋ณธ๋„ ์˜ํ–ฅ์„ ๋ฐ›๋Š”๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๋‘ ๋ณ€์ˆ˜๋Š” ๊ฐ™์€ ์ฃผ์†Œ๋ฅผ ์ฐธ์กฐํ•˜๊ณ  ์žˆ์„ ๋ฟ ๊ฐ’ ์ž์ฒด๊ฐ€ ๋ณต์‚ฌ๋˜์—ˆ๋‹ค๊ณ  ํ•  ์ˆ˜ ์—†๋‹ค.
  3. ์ฐธ์กฐ ๊ฐ’์€ Mutable value(๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ๊ฐ’)

 

๐Ÿ‘พ MORE ๐Ÿฅณ

1. ๋ฌธ์ž์—ด์€ immutableํ•œ ๊ฐ’์ด๊ธฐ ๋•Œ๋ฌธ์— ์ƒ์„ฑ๋œ ๋ฌธ์ž์—ด์˜ ์ผ๋ถ€ ๋ฌธ์ž๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค.

 โ€ข ๋ฌธ์ž์—ด์€ ํ•œ ๋ฒˆ ์ƒ์„ฑ๋˜๋ฉด, ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค.


  
let str = "Hello";
str = "JavaScript";

 โ†’ ์ฒซ๋ฒˆ์งธ ๊ตฌ๋ฌธ์ด ์‹คํ–‰๋˜๋ฉด ๋ฉ”๋ชจ๋ฆฌ์— ๋ฌธ์ž์—ด "Hello"๊ฐ€ ์ƒ์„ฑ๋˜๊ณ  ์‹๋ณ„์ž str์€ ๋ฉ”๋ชจ๋ฆฌ์— ์ƒ์„ฑ๋œ ๋ฌธ์ž์—ด "Hello"์˜ ๋ฉ”๋ชจ๋ฆฌ ์ฃผ์†Œ๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค. ๋‘๋ฒˆ์งธ ๊ตฌ๋ฌธ์ด ์‹คํ–‰๋˜๋ฉด ์ด์ „์— ์ƒ์„ฑ๋œ ๋ฌธ์ž์—ด "Hello"๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์ƒˆ๋กœ์šด ๋ฌธ์ž์—ด "JavaScript"๋ฅผ ๋ฉ”๋ชจ๋ฆฌ์— ์ƒ์„ฑํ•˜๊ณ  ์‹๋ณ„์ž str์€ ์ด๊ฒƒ์„ ๊ฐ€๋ฆฌํ‚จ๋‹ค. ์ด๋•Œ ๋ฌธ์ž์—ด "Hello"์™€ "JavaScript"๋Š” ๋ชจ๋‘ ๋ฉ”๋ชจ๋ฆฌ์— ์กด์žฌํ•˜๊ณ  ์žˆ๋‹ค. ๋ณ€์ˆ˜ str์€ ๋ฌธ์ž์—ด "Hello"๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๋‹ค๊ฐ€ ๋ฌธ์ž์—ด "JavaScript"๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋„๋ก ๋ณ€๊ฒฝ๋˜์—ˆ์„ ๋ฟ์ด๋‹ค.

 

 โ€ข ๋ฌธ์ž์—ด์€ ๋ฐฐ์—ด์ฒ˜๋Ÿผ ์ธ๋ฑ์Šค๋ฅผ ํ†ตํ•ด ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ์œ ์‚ฌ๋ฐฐ์—ด์ด๋‹ค.


  
let str = "JavaScript";
for (let i = 0; i < str.length; i++) {
console.log(str[i]);
}
str[6] = 's';
console.log(str); // JavaScript

 โ†’ str[6] = 's' ์ฒ˜๋Ÿผ ์ด๋ฏธ ์ƒ์„ฑ๋œ ๋ฌธ์ž์˜ ์ผ๋ถ€๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค. (read only ๊ฐ’์ด๋ฉฐ, immutable ํ•˜๋‹ค.)

 

 โ€ข ์ƒˆ๋กœ์šด ๋ฌธ์ž์—ด์„ ์žฌํ• ๋‹น ํ•˜๋Š” ๊ฒƒ์€ ๊ฐ€๋Šฅํ•˜๋‹ค.


  
let str = "JavaScript";
console.log(str) // JavaScript
str = "Hello, world";
console.log(str) // Hello, world
str = str.toUpperCase();
console.log(str) // HELLO, WORLD

 

 

2. Pass-by-reference์™€ Pass-by-value

โ€ข Pass-by-reference

 ๊ฐ์ฒด ํƒ€์ž…์€ ๊ฐ์ฒด์˜ ๋ชจ๋“  ์—ฐ์‚ฐ์ด ์‹ค์ œ๊ฐ’์ด ์•„๋‹Œ ์ฐธ์กฐ๊ฐ’์œผ๋กœ ์ฒ˜๋ฆฌ๋œ๋‹ค. ๊ฐ์ฒด ํƒ€์ž…์€ ํ”„๋กœํผํ‹ฐ๋ฅผ ๋ณ€๊ฒฝ, ์ถ”๊ฐ€, ์‚ญ์ œ๊ฐ€ ๊ฐ€๋Šฅํ•œ mutableํ•œ ๊ฐ’์ด๋‹ค. ๋™์ ์œผ๋กœ ๋ณ€ํ™”ํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์–ด๋А ์ •๋„์˜ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ํ™•๋ณดํ•ด์•ผ ํ•˜๋Š”์ง€ ์˜ˆ์ธกํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋Ÿฐํƒ€์ž„์— ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ํ™•๋ณดํ•˜๊ณ  ๋ฉ”๋ชจ๋ฆฌ์˜ ํž™ ์˜์—ญ(Heap Segment)์— ์ €์žฅ๋œ๋‹ค.

 ๋ณ€์ˆ˜ a์— b๋ฅผ ํ• ๋‹น์‹œ ๊ฐ์ฒด๋Š” ๋ณต์‚ฌ๋˜์ง€ ์•Š๊ณ , ์ฐธ์กฐ(Reference) ๋ฐฉ์‹์œผ๋กœ ์ „๋‹ฌ๋œ๋‹ค.


  
// Pass-by-reference
let obj = { num: 100 }
let copy = obj;
console.log(obj.num, copy.num) // 100 100
console.log(obj === copy) // true
copy.num = 200;
console.log(obj.num, copy.num) // 200 200
console.log(obj === copy) // true

 โ†’ ๋ณ€์ˆ˜ obj๋Š” ๊ฐ์ฒด ์ž์ฒด๊ฐ€ ์•„๋‹Œ ์ƒ์„ฑ๋œ ๊ฐ์ฒด์˜ ์ฐธ์กฐ๊ฐ’์„ ์ €์žฅํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ณ€์ˆ˜ copy์—๋„ ๊ฐ™์€ ์ฐธ์กฐ๊ฐ’์ด ์ €์žฅ๋œ๋‹ค. ๋”ฐ๋ผ์„œ ์ฐธ์กฐํ•˜๊ณ  ์žˆ๋Š” ๊ฐ์ฒด์˜ num ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜๋ฉด ๋ณ€์ˆ˜ obj, copy ๋ชจ๋‘ ๋ณ€๊ฒฝ๋œ ๊ฐ’์„ ์ฐธ์กฐํ•˜๊ฒŒ ๋œ๋‹ค.

 


  
let obj = { num: 100 };
let obj2 = { num: 100 };
console.log (obj === obj2) // false

 โ†’ obj์™€ obj2๋Š” ๋‚ด์šฉ์€ ๊ฐ™์ง€๋งŒ ๋ณ„๊ฐœ์˜ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ์ฐธ์กฐ๊ฐ’์„ ํ• ๋‹นํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋‘ ๋ณ€์ˆ˜์˜ ์ฐธ์กฐ๊ฐ’์€ ๊ฐ™์ง€ ์•Š๋‹ค.

 

โ€ข Pass-by-value

 ์›์‹œ ํƒ€์ž…์€ ๊ฐ’(value)์œผ๋กœ ์ „๋‹ฌ๋œ๋‹ค. ์ฆ‰, ๋ณต์‚ฌ๋˜์–ด ์ „๋‹ฌ๋˜๋ฉฐ ์ด๋ฅผ pass-by-value(๊ฐ’์— ์˜ํ•œ ์ „๋‹ฌ)๋ผ ํ•œ๋‹ค.


  
// Pass-by-value
let a = 1;
let b = a;
console.log(a, b); // 1 1
console.log(a === b); // true
a = 10;
console.log(a, b); // 10 1
console.log(a === b); // false

 โ†’ ๋ณ€์ˆ˜ a๋Š” ์›์‹œ ํƒ€์ž…์ธ ์ˆซ์ž ํƒ€์ž… 1์„ ์ €์žฅํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ์›์‹œ ํƒ€์ž…์€ ๊ฐ’์ด ๋ณต์‚ฌ๋˜์–ด ๋ณ€์ˆ˜์— ์ €์žฅ๋œ๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๋ณ€์ˆ˜ b์— ๋ณ€์ˆ˜ a๋ฅผ ํ• ๋‹นํ•œ ๊ฒฝ์šฐ, ๋ณ€์ˆ˜ a์˜ ๊ฐ’ 1์ด ๋ณต์‚ฌ๋˜์–ด ๋ณ€์ˆ˜ b์— ์ €์žฅ๋œ๋‹ค.

 


์ž๋ฃŒ์ถœ์ฒ˜: poiemaweb

โœ๏ธ ๊ณต๋ถ€ํ•˜๋ฉฐ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ์ž˜๋ชป๋œ ์ •๋ณด๋‚˜ ๋” ๊ณต์œ ํ•  ๋‚ด์šฉ์ด ์žˆ์œผ๋ฉด ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์„ธ์š”!

์ฝ์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ๐Ÿ˜Š

๋ฐ˜์‘ํ˜•