๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Front-end/JS

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ data ๋ฅผ ์ €์žฅํ•˜๋Š” ๋ฐฉ๋ฒ• (๋ฉ”๋ชจ๋ฆฌ ์ €์žฅ ๋ฐฉ์‹)

by ciocio 2022. 2. 15.

๐Ÿ“  ๋‹น์‹ ์ด ์„ ์–ธํ•œ ๋ณ€์ˆ˜๋Š” ์Šค์Šค๋กœ์—๊ฒŒ ํ• ๋‹น๋œ ๊ฐ’์„ ๋ชจ  ๋ฅธ  ๋‹ค.

 

 

์šฐ๋ฆฌ๊ฐ€ ๋ณ€์ˆ˜๋กœ ์„ ์–ธํ•˜๊ณ  ์ง€์ •ํ•˜๋Š” ๋ชจ๋“  ๊ฒƒ์€ "์‹๋ณ„์ž"์ด๋‹ค.

์‹๋ณ„์ž๋ž€, ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์— ์ €์žฅ๋˜์–ด ์žˆ๋Š” ์–ด๋–ค ๊ฐ’์„ ๊ตฌ๋ณ„(์‹๋ณ„)ํ•ด ๋‚ผ ์ˆ˜ ์žˆ๋Š” ๊ณ ์œ ํ•œ ์ด๋ฆ„์ด๋‹ค.

์ฆ‰, ์‹๋ณ„์ž๋Š” ๊ฐ’์ด ์•„๋‹ˆ๋ผ ๊ฐ’์ด ์ €์žฅ๋œ ๋ฉ”๋ชจ๋ฆฌ ์ฃผ์†Œ๋ฅผ ๊ธฐ์–ตํ•œ๋‹ค.

--> ์›์‹œ ํƒ€์ž…๊ณผ ๊ฐ์ฒด ํƒ€์ž… ๋ชจ๋‘์— ํ•ด๋‹น๋˜๋Š” ๋‚ด์šฉ์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ต‰์žฅํžˆ ์ค‘์š”ํ•จ

 


 

๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ์›์‹œ ํƒ€์ž…์˜ ๊ฐ’์„ ๋ณต์‚ฌํ•˜๊ฒŒ ๋˜๋ฉด 1๋˜๋Š” 2์™€ ๊ฐ™์€ ์ผ์ด ์ผ์–ด๋‚œ๋‹ค.

 

const num = 5;
const copyNum = num;

console.log(num === copyNum) // true
// ์›์‹œ ๊ฐ’์„ ํ• ๋‹นํ•œ ๋ณ€์ˆ˜๋ฅผ ๋‹ค๋ฅธ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜๋Š” ๊ฒƒ์„ "๊นŠ์€ ๋ณต์‚ฌ"๋ผ๊ณ  ๋ถ€๋ฅด๊ธฐ๋„ ํ•œ๋‹ค. (๊ณต์‹ x)

 

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

2. ๋‹ค๋ฅธ ๊ฐ’์ด ํ• ๋‹น๋˜๊ธฐ ์ „๊นŒ์ง€ ๊ฐ™์€ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ๊ณต์œ ํ•œ๋‹ค. (ํ• ๋‹น๋œ ๊ฐ’๋„ ๊ฐ™๊ณ  ๋ฉ”๋ชจ๋ฆฌ ์ฃผ์†Œ๋„ ๊ฐ™๋‹ค)

-->  ECMAScript์—์„œ ๋‚ด๋ถ€ ๋™์ž‘์ด ์–ด๋–ป๊ฒŒ ์ผ์–ด๋‚˜๋Š”์ง€ ์„ค๋ช…ํ•ด๋†“์ง€ ์•Š์•„์„œ ์ผ๋‹จ ๊ฐ€์ •

 

 

์œ„์™€ ๋™์ผํ•œ ํ˜•์‹์œผ๋กœ ๊ฐ์ฒด ํƒ€์ž…์˜ ๊ฐ’์„ ๋ณต์‚ฌํ•˜๊ฒŒ ๋˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ผ์ด ์ผ์–ด๋‚œ๋‹ค.

 

const obj = {
  number : 5
};
const copyObj = obj;

console.log(obj === copyObj) // true
// ๊ฐ์ฒด๋ฅผ ํ• ๋‹นํ•œ ๋ณ€์ˆ˜๋ฅผ ๋‹ค๋ฅธ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜๋Š” ๊ฒƒ์„ "์–•์€ ๋ณต์‚ฌ"๋ผ๊ณ  ๋ถ€๋ฅด๊ธฐ๋„ ํ•œ๋‹ค. (๊ณต์‹ x)

 

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

 


 

๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์— ์ €์žฅ๋˜๋Š” ๊ฐ’์ด, ์›์‹œ ํƒ€์ž…์€ ๊ฐ’ ๊ทธ ์ž์ฒด์ด์ง€๋งŒ,

๊ฐ์ฒด ํƒ€์ž…์€ ๊ฐ’์˜ ์ฃผ์†Œ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋น„๊ต ์—ฐ์‚ฐ์ž ๊ตฌ๋ฌธ์—์„œ ์ฐจ์ด๊ฐ€ ์ƒ๊ธด๋‹ค.

 

// ๋ชจ๋‘ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์— ์ €์žฅ๋œ ๊ฐ’์„ ๋น„๊ตํ•œ๋‹ค.

// ์›์‹œ ํƒ€์ž…
const name = 'lee';
const holy = 'lee';

console.log(name === holy) // true
// ์ƒ๊น€์ƒˆ๋„ ๊ฐ™๊ณ  ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์— ์ €์žฅ๋œ ๊ฐ’๋„ ๊ฐ™๋‹ค.

// ๊ฐ์ฒด ํƒ€์ž…
const nameObj = {
  name: 'lee'
};

const holyObj = {
  name: 'lee'
};

console.log(nameObj === holyObj) // false
// ์ƒ๊น€์ƒˆ๋Š” ๊ฐ™์ง€๋งŒ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์— ์ €์žฅ๋œ ์ฐธ์กฐ ๊ฐ’์ด ๋‹ค๋ฅด๋‹ค.

 

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€