πŸ—‚οΈ μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λ³€μˆ˜μ™€ 데이터 νƒ€μž…

thumb_hyeokΒ·2022λ…„ 2μ›” 21일
1

🟑 JavaScript

λͺ©λ‘ 보기
1/15
post-thumbnail
post-custom-banner

πŸ€” λ³€μˆ˜λž€ 무엇이고 μ™œ ν•„μš”ν•œκ°€?

μš°λ¦¬λŠ” ν”„λ‘œκ·Έλž˜λ°μ„ ν•˜λ‹€κ°€ μ–΄λ–€ 값을 μž¬μ‚¬μš©ν•΄μ•Όν•˜λŠ” 상황에 직면할 λ•Œκ°€ μžˆλ‹€. μ–΄λ–€ κ°’μ˜ μž¬μ‚¬μš©μ„ μœ„ν•΄ ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄λŠ” κΈ°μ–΅ν•˜κ³  싢은 값을 λ©”λͺ¨λ¦¬μ— μ €μž₯ν•˜κ³ , μ €μž₯된 값을 읽어 λ“€μ—¬ μž¬μ‚¬μš©ν•˜κΈ° μœ„ν•΄ λ³€μˆ˜(variable)λΌλŠ” λ©”μ»€λ‹ˆμ¦˜μ„ μ œκ³΅ν•œλ‹€.

λ³€μˆ˜λŠ” μ–΄λ–€ 값을 μ €μž₯ν•˜κΈ° μœ„ν•΄ ν™•λ³΄ν•œ λ©”λͺ¨λ¦¬ 곡간이닀.


πŸ—οΈ μ‹λ³„μž

μ•„κΉŒ λ³€μˆ˜λŠ” μ–΄λ–€ 값을 μ €μž₯ν•˜κΈ° μœ„ν•΄ ν™•λ³΄ν•œ λ©”λͺ¨λ¦¬ 곡간이라고 ν–ˆλŠ”λ°, ν•΄λ‹Ή λ©”λͺ¨λ¦¬ 곡간을 μ‹λ³„ν•˜κΈ° μœ„ν•΄μ„œλŠ” λ³€μˆ˜μ—κ²Œ 이름을 μ§€μ–΄μ€˜μ•Ό ν•œλ‹€.
λ³€μˆ˜ 이름을 μ‹λ³„μž(identifier)라고 ν•˜κΈ°λ„ ν•œλ‹€. μ‹λ³„μžλž€ μ–΄λ–€ 값을 κ΅¬λ³„ν•΄μ„œ 식별할 수 μžˆλŠ” κ³ μœ ν•œ 이름을 λ§ν•œλ‹€. μ‹λ³„μžλΌλŠ” μš©μ–΄λŠ” λ³€μˆ˜ μ΄λ¦„μ—λ§Œ κ΅­ν•œν•΄μ„œ μ‚¬μš©ν•˜μ§€ μ•ŠλŠ”λ‹€. λ³€μˆ˜, ν•¨μˆ˜, 클래슀 λ“±μ˜ 이름은 λͺ¨λ‘ μ‹λ³„μžλ‹€.


πŸ“ λ³€μˆ˜ μ„ μ–Έκ³Ό ν• λ‹Ή

let num = 30; 

μœ„ 식은 numμ΄λΌλŠ” λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜κ³  30μ΄λΌλŠ” 값을 ν• λ‹Ήν•˜λŠ” 과정이닀. var , let, const μ˜ˆμ•½μ–΄λ₯Ό μ‚¬μš©ν•΄ λ³€μˆ˜λ₯Ό μ„ μ–Έν•  수 μžˆλ‹€.

μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 λ³€μˆ˜ 선언을 λ‹€μŒκ³Ό 같은 2단계λ₯Ό 거쳐 μ‹€ν–‰ν•œλ‹€

  • μ„ μ–Έ 단계: λ³€μˆ˜ 이름을 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— λ“±λ‘ν•œλ‹€.

  • μ΄ˆκΈ°ν™” 단계: 값을 μ €μž₯ν•˜κΈ° μœ„ν•œ λ©”λͺ¨λ¦¬ 곡간을 ν™•λ³΄ν•˜κ³  μ•”λ¬΅μ μœΌλ‘œ undefinedλ₯Ό ν• λ‹Ήν•΄ μ΄ˆκΈ°ν™” ν•œλ‹€. (var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” μ„ μ–Έκ³Ό ν•¨κ»˜ undefinedκ°€ ν• λ‹Ήλ˜μ—ˆλ‹€κ°€ 30이 μž¬ν• λ‹Ήλ˜λŠ”λ° let, constλŠ” 그렇지 μ•Šλ‹€. μ΄λŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ—μ„œ μžμ„Ένžˆ λ‹€λ£° μ˜ˆμ •μ΄λ‹€.)

μœ„μ˜ μ‹μ˜ λ³€μˆ˜κ°€ μ„ μ–Έκ³Ό 할당이 μ΄λ£¨μ–΄μ§€λŠ” 과정을 μ•„λž˜μ—μ„œ μ‚΄νŽ΄λ³΄κΈ°λ‘œ ν•˜μž

  1. numμ΄λΌλŠ” 이름을 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— λ“±λ‘ν•˜κ³  값을 μ €μž₯ν•  λ©”λͺ¨λ¦¬ 곡간을 ν™•λ³΄ν•œλ‹€. 그리고 κ·Έ κ³΅κ°„μ˜ 이름을 num이라고 μ§€μ •ν•œλ‹€. (μ—¬κΈ°μ„œλŠ” ν™•λ³΄ν•œ λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ μ£Όμ†Œλ₯Ό 0x00000001이라고 ν•˜κ² λ‹€.)

  2. undefinedκ°€ μ €μž₯된 λ©”λͺ¨λ¦¬ 곡간을 μ°Ύκ³ , μ €μž₯λ˜μ–΄μžˆμ§€ μ•Šμ„ 경우 빈 곡간에 (μ—¬κΈ°μ„œλŠ” 0x00000002)에 undefinedλ₯Ό μ €μž₯ν•œλ‹€.

  3. num이라고 이름 뢙은 λ©”λͺ¨λ¦¬ 곡간 0x00000001이 undefinedκ°€ μ €μž₯된 0x00000002λ₯Ό κ°€λ¦¬ν‚€κ²Œ ν•œλ‹€. 이λ₯Ό 톡해 num을 ν˜ΈμΆœν•˜λ©΄ undefinedλ₯Ό 뢈러올 수 있게 λ˜μ—ˆλ‹€.

  4. 30이 μ €μž₯된 λ©”λͺ¨λ¦¬ 곡간을 μ°Ύκ³ , μ €μž₯λ˜μ–΄μžˆμ§€ μ•Šμ„ 경우 빈 곡간에 (μ—¬κΈ°μ„œλŠ” 0x00000003)에 30μ΄λΌλŠ” 값을 μ €μž₯ν•œλ‹€.

  5. num이라고 이름 뢙은 λ©”λͺ¨λ¦¬ 곡간 0x00000001이 30이 μ €μž₯된 0x00000003λ₯Ό κ°€λ¦¬ν‚€κ²Œ ν•œλ‹€. 이λ₯Ό 톡해 num을 ν˜ΈμΆœν•˜λ©΄ 30을 뢈러올 수 있게 λ˜μ—ˆλ‹€.

정리해보면 μ΄λŸ¬ν•˜λ‹€.

데이터/μ£Όμ†Œ0x000000010x000000020x00000003
이름num
κ°’0x00000002undefined

⬇️

데이터/μ£Όμ†Œ0x000000010x000000020x00000003
이름num
κ°’0x00000003undefined30

μ„€λͺ…ν•  κ·Έλ¦Όμžλ£Œκ°€ μ—†λ‹€λŠ”κ²Œ λ„ˆλ¬΄ 아쉽닀...


πŸ—‚οΈ μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 데이터 νƒ€μž…

μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λͺ¨λ“  값은 데이터 νƒ€μž…μ„ κ°–λŠ”λ‹€.
크게 2κ°€μ§€λ‘œ κΈ°λ³Έν˜•(Primitive Type)κ³Ό μ°Έμ‘°ν˜•(Reference Type)이 μžˆλ‹€.
(μ‚¬μ§„μΆœμ²˜ : μš°μ•„ν•œν…Œν¬μ½”μŠ€)

이 두 가지 데이터 νƒ€μž…μ„ 무엇을 κΈ°μ€€μœΌλ‘œ λ‚˜λ‰˜λŠ” 걸까?
λ°”λ‘œ μ•„λž˜μ—μ„œ μ‚΄νŽ΄λ³Ό λΆˆλ³€μ„±κ³Ό 가변성이닀.


🌊 λΆˆλ³€μ„±κ³Ό κ°€λ³€μ„±

λ³€μˆ˜μ™€ μƒμˆ˜, λΆˆλ³€μ„±κ³Ό κ°€λ³€μ„±

λ¨Όμ € 지λ₯΄κ³  κ°€μžλ©΄, κΈ°λ³Έν˜•(Primitive Type)은 λΆˆλ³€μ„±μ„ 가지고 μ°Έμ‘°ν˜•(Reference Type)은 가변성을 κ°–λŠ”λ‹€.

μƒμˆ˜μ™€ λ³€μˆ˜, λΆˆλ³€μ„±κ³Ό 가변성에 λŒ€ν•΄μ„œ ν—·κ°ˆλ¦¬κΈ°κ°€ μ‰¬μš΄λ° λ³€ν•  수 μžˆλŠ” 주체가 뭐냐에 λ”°λΌμ„œ μƒμˆ˜μ™€ λ³€μˆ˜, λΆˆλ³€μ„±κ³Ό 가변성을 λ‚˜λˆŒ 수 μžˆλ‹€.

λ¨Όμ € λ³€μˆ˜μ™€ 값을 λ‚˜λˆ μ„œ 보자.

let num = 30;

μ—μ„œ num은 값을 μ €μž₯ν•˜κΈ° μœ„ν•΄ ν™•λ³΄ν•œ λ©”λͺ¨λ¦¬ 곡간 κ·Έ 자체 λ˜λŠ” κ·Έ λ©”λͺ¨λ¦¬ 곡간을 μ‹λ³„ν•˜κΈ° μœ„ν•΄ 뢙인 이름이닀. 그리고 30은 λ©”λͺ¨λ¦¬ 곡간에 μ €μž₯된 값이닀. λ³€κ²½ λΆˆκ°€λŠ₯ν•˜λ‹€, 즉 λΆˆλ³€μ„±μ„ 가지고 μžˆλ‹€λŠ” 것은 κ°’(μ—¬κΈ°μ„œλŠ” 30)에 λŒ€ν•œ μ§„μˆ μ΄λ‹€.

λ§Œμ•½μ— num이라고 이름 뢙인 λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ μ£Όμ†Œλ₯Ό 0x00000000이라고 ν•˜κ³  30μ΄λΌλŠ” 값이 μ €μž₯된 λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ μ£Όμ†Œλ₯Ό 0x00000001이라고 ν•œλ‹€λ©΄,

λ³€μˆ˜λƒ μƒμˆ˜λƒλŠ” num이 가리킀고 있던 λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ μ£Όμ†Œλ₯Ό λ°”κΏ€ 수 μžˆλƒ 없냐에 따라 num의 λ³€μˆ˜, μƒμˆ˜κ°€ μ—¬λΆ€κ°€ λ‚˜λ‰œλ‹€. 그에 λΉ„ν•΄ λΆˆλ³€μ„±μ„ 가지냐, 가변성을 κ°€μ§€λƒλŠ” 0x00000001μ΄λΌλŠ” λ©”λͺ¨λ¦¬μ— κΈ°μ‘΄ κ°’ λŒ€μ‹  μƒˆλ‘œμš΄ 값을 ν• λ‹Ήν•  수 μžˆλƒ 없냐에 따라 κΈ°μ‘΄ κ°’μ˜ λΆˆλ³€μ„±, 가변성이 λ‚˜λ‰œλ‹€.

κΈ°λ³Έν˜• (Primitive Type)

μœ„μ—μ„œ κΈ°λ³Έν˜•μ€ λΆˆλ³€μ„±μ„ 가진닀고 ν–ˆλ‹€. 30μ΄λΌλŠ” 값은 Numberνƒ€μž…μ΄κΈ° λ•Œλ¬Έμ— λΆˆλ³€μ„±μ„ 가진닀. λ©”λͺ¨λ¦¬μ— ν•œ 번 μ €μž₯된 κΈ°λ³Έν˜• 값은 가비지 μ»¬λ ‰μ…˜μ˜ λŒ€μƒμ΄ λ˜μ–΄ λ©”λͺ¨λ¦¬κ°€ 해체 되기 μ „κΉŒμ§€ 변화될 수 μ—†λ‹€. 그러면 λΆˆλ³€μ„±μ„ 가진 값을 μ €μž₯ν•œ λ³€μˆ˜λŠ” μ–΄λ–»κ²Œ μž¬ν• λ‹Ήμ„ ν• κΉŒ?

let num = 30;
num = 50;

//num :0x00000001
//30 :0x00000002
//50 :0x00000003

λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜κ³ , λ³€μˆ˜μ— 값을 ν• λ‹Ήν•˜λŠ” 과정을 μš°λ¦¬λŠ” μœ„μ—μ„œ μ‚΄νŽ΄λ΄€μœΌλ―€λ‘œ μ•žλΆ€λΆ„μ€ μƒλž΅ν•˜κ³  μ„€λͺ…을 μ§„ν–‰ν•˜κ² λ‹€. 첫 번째 μ€„κΉŒμ§€ 진행이 λ˜μ—ˆμ„ λ•Œ, num은 0x00000002λ₯Ό 가리킀고 μžˆμ„ 것이닀. μ—¬κΈ°μ„œ num에 μƒˆλ‘œμš΄ 50μ΄λΌλŠ” 값을 ν• λ‹Ήν•˜λ©΄, 0x00000002에 μ €μž₯된 κ°’ 30을 50으둜 바꾸지 μ•Šκ³ , μƒˆλ‘œμš΄ λ©”λͺ¨λ¦¬ 곡간에 50μ΄λΌλŠ” 값을 μ €μž₯ν•΄ num이 0x00000003을 가리킀도둝 ν•œλ‹€.

데이터/μ£Όμ†Œ0x000000010x000000020x0000003
이름num
κ°’0x000000033050

μ΄λ•Œλ¬Έμ— κΈ°λ³Έν˜• 값이 λΆˆλ³€μ„±μ„ 가지고 μžˆλ‹€κ³  λ§ν•œλ‹€.

μ°Έμ‘°ν˜•(Reference Type)

λ¨Όμ € μ°Έμ‘°ν˜• 값을 λ³€μˆ˜μ— ν• λ‹Ήν•˜λŠ” 과정을 μ‚΄νŽ΄λ³΄λ„λ‘ν•˜μž. μ°Έμ‘°ν˜• 값을 λ³€μˆ˜μ— ν• λ‹Ήν•˜λŠ” 과정은 κΈ°λ³Έν˜• 값을 λ³€μˆ˜μ— ν• λ‹Ήν•˜λŠ” 과정보닀 쑰금 더 λ³΅μž‘ν•˜λ‹ˆ 이해가 μ™„μ „νžˆ μ•ˆ λ˜μ—ˆλ‹€λ©΄ μ™„μ „νžˆ μ΄ν•΄ν•˜κ³  였자.

const user = {
  name: 'Harry'
  age: 20
}
  1. λ©”λͺ¨λ¦¬μ˜ 빈 곡간 0x00000001을 확보해 userλΌλŠ” 이름을 뢙인닀.

  2. μž„μ˜μ˜ λ©”λͺ¨λ¦¬ 곡간 0x00000002에 데이터λ₯Ό μ €μž₯ν•˜λ €κ³  λ³΄λ‹ˆ μ—¬λŸ¬ 개의 ν”„λ‘œνΌν‹°λ‘œ 이루어진 데이터 그룹이닀. 이 κ·Έλ£Ή λ‚΄λΆ€μ˜ ν”„λ‘œνΌν‹°λ“€μ„ μ €μž₯ν•˜κΈ° μœ„ν•œ λ©”λͺ¨λ¦¬ 곡간을 ν™•λ³΄ν•˜κ³  (μ—¬κΈ°μ„œλŠ” 0x00000003, 0x00000004) κ·Έ λ©”λͺ¨λ¦¬ κ³΅κ°„λ“€μ˜ μ£Όμ†Œλ₯Ό 0x00000002κ°€ 가리킀도둝 ν•œλ‹€.

  3. 0x00000003, 0x00000004에 각각 name, ageλΌλŠ” 이름을 뢙인닀.

  4. HarryλΌλŠ” κ°’κ³Ό 20μ΄λΌλŠ” 값이 λ©”λͺ¨λ¦¬μ— μ‘΄μž¬ν•˜λŠ”μ§€ κ²€μƒ‰ν•˜κ³ , μ—†μœΌλ©΄ μž„μ˜μ˜ λ©”λͺ¨λ¦¬ 곡간 0x00000005, 0x00000006에 값을 μ €μž₯ν•˜κ³ , name, ageκ°€ 각각의 λ©”λͺ¨λ¦¬ 곡간 μ£Όμ†Œκ°’μ„ 가리킀도둝 ν•œλ‹€.

정리해보면 μ΄λŸ¬ν•˜λ‹€

데이터/μ£Όμ†Œ0x000000010x000000020x00000030x00000040x00000050x0000006
이름usernameage
κ°’0x000000020x00000003~40x000000050x00000006Harry20

user -> 0x00000002 -> name,age
name -> 0x00000005
age -> 0x00000006

μ—¬κΈ°μ„œ 객체λ₯Ό μˆ˜μ •ν•΄λ„ κΈ°λ³Έν˜• κ°’κ³Ό 달리 μƒˆλ‘œμš΄ 객체λ₯Ό 생성해 userκ°€ 가리킀도둝 ν•˜μ§€ μ•Šκ³  userλŠ” κ·ΈλŒ€λ‘œ 0x00000002λ₯Ό 가리킀고 μžˆλŠ” κ·ΈλŒ€λ‘œ 객체가 μˆ˜μ •λ©λ‹ˆλ‹€. μ˜ˆμ‹œλ₯Ό λ“€μ–΄ μ‚΄νŽ΄λ³΄κ² λ‹€.

μ•Œκ³ λ³΄λ‹ˆ user에 μ €μž₯된 Harry의 λ‚˜μ΄λŠ” 23μ‚΄μ΄μ—ˆκ³  20μ‚΄μ—μ„œ 23μ‚΄λ‘œ μˆ˜μ •μ„ ν•΄μ•Όν•˜λŠ” 상황이 생겼닀. 그러기 μœ„ν•΄ λ‹€μŒκ³Ό 같은 과정을 따라간닀.

  1. 23μ΄λΌλŠ” 값을 μž„μ˜μ˜ λ©”λͺ¨λ¦¬ μ£Όμ†Œ 0x00000007에 μ €μž₯ν•œλ‹€.

  2. ageκ°€ 0x00000007을 가리킀도둝 ν•œλ‹€.

데이터/μ£Όμ†Œ0x000000010x000000020x000000030x000000040x000000050x000000060x00000007
이름usernameage
κ°’0x000000020x00000003~40x000000050x00000007Harry2023

μ—¬κΈ°μ„œ userκ°€ 가리킀고 μžˆλŠ” μ£Όμ†ŒλŠ” 0x00000002μ—μ„œ λ³€ν•˜μ§€ μ•Šμ•˜λ‹€. μƒˆλ‘œμš΄ 객체가 λ§Œλ“€μ–΄μ§„ 것이 μ•„λ‹ˆλΌ κΈ°μ‘΄ 객체의 λ‚΄λΆ€μ˜ κ°’λ§Œ 바뀐것이닀.

μ΄λ•Œλ¬Έμ— μ°Έμ‘°ν˜• 값은 가변성을 가진닀고 ν•˜λŠ” 것이닀. ν•˜μ§€λ§Œ μ΄λŸ¬ν•œ 가변성은 객체 λ‚΄λΆ€μ˜ ν”„λ‘œνΌν‹°λ₯Ό μˆ˜μ •ν•  λ•Œλ§Œ μ„±λ¦½ν•˜κ³  μ°Έμ‘°ν˜• 데이터 자체λ₯Ό λ³€κ²½ν•  κ²½μš°μ—λŠ” μ„±λ¦½ν•˜μ§€ μ•ŠλŠ”λ‹€.

이 뢀뢄은 μ•„λž˜ 참쑰에 μ˜ν•œ μ „λ‹¬μ—μ„œ 닀뀄보도둝 ν•˜κ² λ‹€.


πŸ“‹ 값에 μ˜ν•œ 전달과 참쑰에 μ˜ν•œ 전달

μœ„ 제λͺ©μ€ "λ³€μˆ˜μ— λ³€μˆ˜λ₯Ό ν• λ‹Ήν–ˆμ„ λ•Œ 무엇이 μ–΄λ–»κ²Œ μ „λ‹¬λ˜λŠ”κ°€?"에 κ΄€ν•œ 이야기이닀. λ¨Όμ € κΈ°λ³Έν˜•μ€ 값에 μ˜ν•œ μ „λ‹¬λ°©μ‹μœΌλ‘œ, μ°Έμ‘°ν˜•μ€ 참쑰에 μ˜ν•œ μ „λ‹¬λ°©μ‹μœΌλ‘œ μ „λ‹¬λœλ‹€.

사싀 μžλ°”μŠ€ν¬λ¦½νŠΈμ—λŠ” 값에 μ˜ν•œ μ „λ‹¬μ΄λΌλŠ” μš©μ–΄λ₯Ό μ“°λŠ”κ²Œ λ§žμ§€ μ•Šμ„μ§€λ„ λͺ¨λ₯Έλ‹€. ECMAScript 사양에도 값에 μ˜ν•œ μ „λ‹¬μ΄λΌλŠ” λ“±μž₯ν•˜μ§€ μ•ŠλŠ”λ‹€κ³  ν•œλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œλŠ” κΈ°λ³Έν˜•μ΄λ“ , μ°Έμ‘°ν˜•μ΄λ“  λ³€μˆ˜μ—λŠ” 값이 μ•„λ‹ˆλΌ λ©”λͺ¨λ¦¬ μ£Όμ†Œκ°€ μ „λ‹¬λ˜κΈ° λ•Œλ¬Έμ΄λ‹€. μ™œλƒν•˜λ©΄ μœ„μ—μ„œ μ‚΄νŽ΄λ΄€λ“―μ΄ λ³€μˆ˜μ™€ 같은 μ‹λ³„μžλŠ” 값이 μ•„λ‹ˆλΌ λ©”λͺ¨λ¦¬ μ£Όμ†Œλ₯Ό κΈ°μ–΅ν•˜κ³  있기 λ•Œλ¬Έμ΄λ‹€.

ν•˜μ§€λ§Œ λ‘˜μ€ ꡬ뢄해 μ„€λͺ…ν•˜λŠ”λ°μ—λŠ” μ΄μœ κ°€ μžˆμ„ 것이닀. μ΄μœ λŠ” μ•„λž˜μ—μ„œ μ‚΄νŽ΄λ³΄λ„λ‘ ν•˜μž.

값에 μ˜ν•œ 전달

λ¨Όμ € 두 가지 λ°©μ‹μœΌλ‘œ μ„€λͺ…할텐데 μ–΄λŠ μͺ½μ΄ μ‹€μ œ μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ˜ λ‚΄λΆ€ λ™μž‘κ³Ό μΌμΉ˜ν•  μ§€λŠ” μ•Œ 수 μ—†λ‹€.ECMAScript μ‚¬μ–‘μ—λŠ” λ³€μˆ˜λ₯Ό 톡해 λ©”λͺ¨λ¦¬λ₯Ό μ–΄λ–»κ²Œ 관리해야 ν•˜λŠ”μ§€ λͺ…ν™•ν•˜κ²Œ μ •μ˜λ˜μ–΄ μžˆμ§€ μ•ŠκΈ° λ•Œλ¬Έμ— 엔진을 κ΅¬ν˜„ν•˜λŠ” μ œμ‘°μ‚¬μ— 따라 μ‹€μ œ λ‚΄λΆ€ λ™μž‘μ€ λ―Έλ¬˜ν•œ 차이가 μžˆμ„ 수 μžˆλ‹€.

일단 값에 μ˜ν•œ 전달 방식은 원본이 μˆ˜μ •λœλ‹€κ³  사본이 μˆ˜μ •λ˜μ§€μ•Šκ³ , λ§ˆμ°¬κ°€μ§€λ‘œ 사본이 μˆ˜μ •λœλ‹€κ³  원본이 μˆ˜μ •λ˜μ§€λ„ μ•ŠλŠ” 방식이닀.

첫번째 방식

let num = 80;
let copy = num;

num = 100;
데이터/μ£Όμ†Œ0x000000010x000000020x00000003
이름numcopy
κ°’0x000000030x0000000380

⬇️

데이터/μ£Όμ†Œ0x000000010x000000020x000000030x00000004
이름numcopy
κ°’0x000000040x0000000380100

첫번째 방식은 copy에 num을 ν• λ‹Ήν•˜λ©΄ 두 λ³€μˆ˜κ°€ 같은 μ£Όμ†Œκ°’μ„ 가리킀고 μžˆλ‹€κ°€ λ‘˜ 쀑 ν•˜λ‚˜μ— μƒˆλ‘œμš΄ 값이 ν• λ‹Ήλ˜λ©΄ λ‹€λ₯Έ μ£Όμ†Œκ°’μ„ κ°€λ¦¬ν‚€κ²Œ λ˜λŠ” 방식이닀. 같은 μ£Όμ†Œκ°’μ„ 가리킀고 μžˆλ‹€ ν•˜λ”λΌλ„ μ„œλ‘œμ˜ 변경은 μ„œλ‘œμ—κ²Œ μ–΄λ– ν•œ 영ν–₯도 주지 μ•ŠλŠ”λ‹€.

λ‘λ²ˆμ§Έ 방식

let num = 80;
let copy = num;

num = 100;
데이터/μ£Όμ†Œ0x000000010x000000020x000000030x00000004
이름numcopy
κ°’0x000000030x000000048080

⬇️

데이터/μ£Όμ†Œ0x000000010x000000020x000000030x000000040x00000005
이름numcopy
κ°’0x000000050x000000038080100

λ‘λ²ˆμ§Έ 방식은 num을 copy에 ν• λ‹Ήν•  λ•Œ 80μ΄λΌλŠ” 값이 μƒˆλ‘œ λ©”λͺ¨λ¦¬μ— μ €μž₯λ˜μ–΄ κ·Έ λ©”λͺ¨λ¦¬μ˜ μ£Όμ†Œκ°’μ„ copyκ°€ κ°€λ¦¬ν‚€κ²Œ λ˜λŠ” 방식이닀. MDN의 μ›μ‹œ κ°’ νŽ˜μ΄μ§€μ—μ„œλŠ” 이 λ°©μ‹μœΌλ‘œ μ„€λͺ…ν•˜κ³  μžˆλ‹€. μœ„μ™€ λ§ˆμ°¬κ°€μ§€λ‘œ μ„œλ‘œμ˜ 변경은 μ„œλ‘œμ—κ²Œ μ–΄λ– ν•œ 영ν–₯도 주지 μ•ŠλŠ”λ‹€.

참쑰에 μ˜ν•œ 전달

참쑰에 μ˜ν•œ 전달방식은 원본이 μˆ˜μ •λ˜λ©΄ 사본도 μˆ˜μ •λ˜κ³ , λ§ˆμ°¬κ°€μ§€λ‘œ 사본이 μˆ˜μ •λ˜λ©΄ 원본도 μˆ˜μ •λ˜λŠ” 방식이닀. μœ„μ—μ„œ λ§ν–ˆμ§€λ§Œ μ°Έμ‘°ν˜•μ΄ μ΄λŸ¬ν•œ λ°©μ‹μœΌλ‘œ μ „λ‹¬λœλ‹€. 사싀 μœ„μ—μ„œ λΆˆλ³€μ„±κ³Ό 가변성을 유의깊게 λ΄€λ‹€λ©΄ λŠλ‚Œμ΄ μ’€ 올 것이닀.

const user = {
  name: 'Harry'
  age: 20
}
const copy = user;

user.age = 23;
데이터/μ£Όμ†Œ0x000000010x000000020x00000030x00000040x00000050x00000060x00000007
이름usercopynameage
κ°’0x000000030x000000030x00000004~50x000000060x00000007Harry20

⬇️

데이터/μ£Όμ†Œ0x000000010x000000020x00000030x00000040x00000050x00000060x000000070x0000008
이름usercopynameage
κ°’0x000000030x000000030x00000004~50x000000060x00000008Harry2023

μœ„ 그림을 보면 μ•Œκ² μ§€λ§Œ userλ₯Ό copy에 ν• λ‹Ήν•˜κ²Œ 되면 두 λ³€μˆ˜λŠ” λ™μΌν•œ μ£Όμ†Œκ°’μ„ κ°€λ¦¬ν‚€κ²Œ λœλ‹€. μœ„μ—μ„œ λΆˆλ³€μ„±κ³Ό 가변성을 μ‚΄νŽ΄λ³΄μ•„μ„œ μ•Œκ² μ§€λ§Œ 객체 λ‚΄λΆ€μ˜ ν”„λ‘œνΌν‹°λ₯Ό μˆ˜μ •ν•΄λ„ 객체가 μƒˆλ‘œ μƒμ„±λ˜μ–΄ μƒˆλ‘œμš΄ μ£Όμ†Œκ°’μ„ κ°€λ¦¬ν‚€κ²Œ λ˜λŠ” 것이 μ•„λ‹ˆκΈ° λ•Œλ¬Έμ—

console.log(copy.age); //23
console.log(user.age); //23

μœ„μ™€ 같이 원본과 사본이 ν•¨κ»˜ μˆ˜μ •λœλ‹€. μ—¬κΈ°μ„œ μœ„μ—μ„œ λΏŒλ €λ†“μ€ λ–‘λ°₯을 μˆ˜κ±°ν•˜κ³  κ°€μžλ©΄ (λΆˆλ³€μ„±κ³Ό κ°€λ³€μ„± μ°Έμ‘°ν˜• λΆ€λΆ„ λ§ˆμ§€λ§‰ μ°Έμ‘°) 객체 λ‚΄λΆ€μ˜ ν”„λ‘œνΌν‹°λ₯Ό μˆ˜μ •ν•˜λŠ” 것이 μ•„λ‹Œ μƒˆλ‘œμš΄ 객체λ₯Ό ν• λ‹Ήν•˜λ©΄ 원본과 사본이 ν•¨κ»˜ μˆ˜μ •λ˜μ§€μ•ŠλŠ”λ‹€.

let user = {
  name: 'Harry'
}
let copy = user;

copy = {
  name: 'Hyeok'
}
데이터/μ£Όμ†Œ0x000000010x000000020x00000030x00000040x0000005
이름usercopyname
κ°’0x000000030x000000030x000000040x00000005Harry

⬇️

데이터/μ£Όμ†Œ0x000000010x000000020x00000030x00000040x00000050x000000060x000000070x0000008
이름usercopynamename
κ°’0x000000030x000000060x000000040x00000005Harry0x000000070x00000008Hyeok

μœ„μ™€ 같이 μƒˆλ‘œμš΄ 객체λ₯Ό ν• λ‹Ήν•˜κ²Œ 되면 μœ„μ—μ„œ λ§ν–ˆλ˜ κ²ƒμ²˜λŸΌ 가변성은 객체 μžμ²΄κ°€ μ•„λ‹Œ λ‚΄λΆ€ ν”„λ‘œνΌν‹°λ₯Ό μˆ˜μ •ν•  λ•Œ μ„±λ¦½ν•˜κΈ° λ•Œλ¬Έμ—, κ°€λ¦¬ν‚€λŠ” μ£Όμ†Œκ°’μ΄ λ‹¬λΌμ§€κ²Œ λœλ‹€.

console.log(copy.name); //Hyeok
console.log(user.name); //Harry

λ‹Ήμ—°ν•œ 결과둜 두 κ°μ²΄λŠ” μ „ν˜€ λ‹€λ₯Έ 객체가 λœλ‹€.


πŸŽ›οΈ 데이터 νƒ€μž…μ˜ ν•„μš”μ„±

(μ‹€μˆ˜λ‘œ μ•ˆ μ“°κ³  μ˜¬λ €μ„œ λ‚˜μ€‘μ— μΆ”κ°€ μ˜ˆμ •)


🧐 정리

  • λ³€μˆ˜λŠ” μ–΄λ–€ 값을 μ €μž₯ν•˜κΈ° μœ„ν•΄ ν™•λ³΄ν•œ λ©”λͺ¨λ¦¬ 곡간이닀.
  • μ‹λ³„μžλŠ” μ–΄λ–€ 값을 κ΅¬λ³„ν•΄μ„œ 식별할 수 μžˆλŠ” κ³ μœ ν•œ 이름이닀.
    • λ‘˜μ„ 잘 κ΅¬λ³„ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— λ³€μˆ˜λ₯Ό μ–΄λ–€ 값을 μ €μž₯ν•˜κΈ° μœ„ν•΄ ν•™λ³΄ν•œ λ©”λͺ¨λ¦¬ 곡간 λ˜λŠ” κ·Έ λ©”λͺ¨λ¦¬ 곡간에 뢙인 μ΄λ¦„μœΌλ‘œ μ–˜κΈ°ν•˜κΈ°λ„ ν•œλ‹€.
  • μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 데이터 νƒ€μž…μ€ κΈ°λ³Έν˜•κ³Ό μ°Έμ‘°ν˜•μ΄ μ‘΄μž¬ν•œλ‹€.
    • κΈ°λ³Έν˜•μ˜ νŠΉμ§• - λΆˆλ³€μ„±, 값에 μ˜ν•œ 전달
    • μ°Έμ‘°ν˜•μ˜ νŠΉμ§• - κ°€λ³€μ„±, 참쑰에 μ˜ν•œ 전달
  • μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 데이터 νƒ€μž…μ΄ ν•„μš”ν•œ μ΄μœ λŠ” μ•„λž˜μ™€ κ°™λ‹€.
    • 값을 μ €μž₯ν•  λ•Œ 확보해야 ν•˜λŠ” λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ 크기λ₯Ό κ²°μ •ν•˜κΈ° μœ„ν•΄
    • 값을 μ°Έμ‘°ν•  λ•Œ ν•œ λ²ˆμ— 읽어 λ“€μ—¬μ•Ό ν•  λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ 크기λ₯Ό κ²°μ •ν•˜κΈ° μœ„ν•΄
    • λ©”λͺ¨λ¦¬μ—μ„œ 읽어 듀인 2μ§„μˆ˜λ₯Ό μ–΄λ–»κ²Œ 해석할지 κ²°μ •ν•˜κΈ° μœ„ν•΄

πŸ“– 참고자료

  • μ½”μ–΄ μžλ°”μŠ€ν¬λ¦½νŠΈ

      1. 데이터 νƒ€μž… (1p~34p)
  • λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive

      1. λ³€μˆ˜ (34p~47p)
      1. 데이터 νƒ€μž… (59p~73p)
      1. μ›μ‹œ κ°’κ³Ό 객체의 비ꡐ (137p~153p)
  • μš°ν…Œμ½” ν”„λ‘ νŠΈμ—”λ“œJS 레벨1 - 2022

    • μ˜¨λ³΄λ”© πŸ—‚οΈ JavaScript Data Type λ¬Έμ„œ
profile
μš°μ•„ν•œν…Œν¬μ½”μŠ€ 4κΈ° μ›Ή ν”„λ‘ νŠΈμ—”λ“œ
post-custom-banner

1개의 λŒ“κΈ€

comment-user-thumbnail
2022λ…„ 3μ›” 4일

java? chip frappuccino

λ‹΅κΈ€ 달기