μƒˆμ†Œμ‹

FrontEnd/JavaScript

JavaScript μžλ°”μŠ€ν¬λ¦½νŠΈλž€?

  • -

🐀 JavaScript μžλ°”μŠ€ν¬λ¦½νŠΈ!


μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό 처음 μ ‘ν–ˆλ˜ 것이 μ—Šκ·Έμ œ 같은데, 이런 μ €λŸ° 곡뢀λ₯Ό ν•˜λ©΄μ„œ μ–΄λŠμƒŒκ°€ μΉœμˆ™ν•œ μΉœκ΅¬κ°€ λ˜μ–΄λ²„λ¦° 이 μΉœκ΅¬μ— λŒ€ν•΄μ„œ μ‚΄νŽ΄λ³΄μž. μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” μ–΄λ–€ 언어인가?

javascript μžλ°”μŠ€ν¬λ¦½νŠΈ

 

πŸ€μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” μ–΄λ–€ 언어인가?


0. λ°”μ˜λ‹€ λ°”λΉ . μš”μ•½ν•΄μ„œ λ§ν•΄μ€˜!

μš”μ•½ν•΄μ„œ λ§ν•˜λ©΄, μ•„λž˜μ™€ 같이 μ‚΄νŽ΄λ³Ό 수 μžˆλ‹€.

μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” ν”„λ‘œν† νƒ€μž… 기반의 객체지ν–₯ μ–Έμ–΄
μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λͺ…λ Ήν˜•, ν•¨μˆ˜ν˜•, ν”„λ‘œν† νƒ€μž… 기반의 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ°μ„ μ§€μ›ν•˜λŠ” λ©€ν‹° νŒ¨λŸ¬λ‹€μž„ ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄
+ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λ™μ μœΌλ‘œ μ›Ή νŽ˜μ΄μ§€λ₯Ό λ™μž‘ν•˜λ©° λ³„λ„μ˜ 컴파일 μž‘μ—…μ„ μˆ˜ν–‰ν•˜μ§€ μ•ŠλŠ” 인터프리터 μ–Έμ–΄

 

κ·Έλ ‡λ‹€λ©΄ ν”„λ‘œν† νƒ€μž…, 객체지ν–₯μ–Έμ–΄, λͺ…λ Ήν˜•, ν•¨μˆ˜ν˜•, 인터프리터언어 λ“±μ˜ κ°œλ…μ— λŒ€ν•΄μ„œ μ‚΄νŽ΄λ³ΌκΉŒ?

 

1. ν”„λ‘œν† νƒ€μž…

ν”„λ‘œν† νƒ€μž… 기반 μ–Έμ–΄λŠ” 클래슀 기반 μ–Έμ–΄μ—μ„œ 상속을 μ‚¬μš©ν•˜λŠ” κ²ƒκ³ΌλŠ” λ‹€λ₯΄κ²Œ, 객체λ₯Ό μ›ν˜•(ν”„λ‘œν† νƒ€μž…)으둜 ν•˜λŠ” 볡제 과정을 톡해 객체의 λ™μž‘ 방식을 μž¬μ‚¬μš© ν•  수 있게 ν•œλ‹€.

 

μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ λ‹¨μˆœ μ›μ‹œ νƒ€μž…(simple primitive)인 λ¬Έμžμ—΄, 숫자, λΆˆλ¦¬μ–Έ, null, undefinedλ₯Ό μ œμ™Έν•œ λͺ¨λ“  νƒ€μž…μ€ 객체닀. μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œλŠ” 배열도 객체고 ν•¨μˆ˜λ„ 객체닀. μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ κ°μ²΄λŠ” μ›ν˜• 객체둜 λΆ€ν„° μƒμ„±λ˜λ©°, μƒμ„±λœ κ°μ²΄λŠ” μ›ν˜•μ— λŒ€ν•œ ν”„λ‘œν† νƒ€μž… 링크(__proto__)λ₯Ό κ°–κ²Œ λœλ‹€. μ›ν˜• λ˜ν•œ 객체이기 λ•Œλ¬Έμ— μ›ν˜•μ€ 또 λ‹€λ₯Έ μ›ν˜•μ„ μ°Έμ‘°ν•˜κ²Œ 되고, λ‹€μŒ κ·Έλ¦Όκ³Ό 같이 μ—°μ†λœ ν”„λ‘œν† νƒ€μž… 링크λ₯Ό 톡해 μžλ°”μŠ€ν¬λ¦½νŠΈ 객체의 μ΅œμ’… μ›ν˜•μΈ Object.prototypeκΉŒμ§€ μ—°κ²°λœλ‹€.

 

μžλ°”μŠ€ν¬λ¦½νŠΈλ„ ν”„λ‘œν† νƒ€μž… 기반 언어이기 λ•Œλ¬Έμ— μ—­μ‹œ 볡제λ₯Ό 톡해 μƒˆλ‘œμš΄ 객체λ₯Ό 생성.
μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λͺ¨λ“  κ°μ²΄λŠ” prototype 객체λ₯Ό κ°€μ§€κ³  있고 κ·Έ prototype을 λ³΅μ œν•˜λ©΄μ„œ 객체λ₯Ό 생성
μš”μ•½ν•˜λ©΄ Object.prototypeκ°€ λͺ¨λ“  κ°μ²΄λ“€μ˜ 쑰상이라고 μƒκ°ν•˜λ©΄ 됨

 

2. λͺ…λ Ήν˜• 

κ°œλ…

ν”„λ‘œκ·Έλž¨ μƒνƒœλ₯Ό λ³€κ²½ν•˜λŠ” 문을 μ‚¬μš©ν•˜μ—¬ μž‘μ—…μ„ μˆ˜ν–‰ν•˜λŠ” 방법을 μ„€λͺ…ν•˜λŠ” 데 쀑점을 λ‘”λ‹€.

루프와 μ‘°κ±΄λ¬Έμ„ μ‚¬μš©ν•˜μ—¬ ν”„λ‘œκ·Έλž¨ νλ¦„을 λͺ…μ‹œμ μœΌλ‘œ μ œμ–΄

 

μ½”λ“œ

let sum = 0;
for (let i = 1; i <= 5; i++) {
  sum += i;
}

 

3. ν•¨μˆ˜ν˜•

κ°œλ…

μ’…μ’… μƒνƒœλ₯Ό λ³€κ²½ν•˜μ§€ μ•Šκ³  μž‘μ—…μ„ μˆ˜ν–‰ν•˜κΈ° μœ„ν•΄ ν•¨μˆ˜, λΆˆλ³€μ„± 및 ν‘œν˜„μ‹μ˜ μ‚¬μš©μ„ κ°•μ‘°ν•œλ‹€.

map, filter, reduce와 κ°™μ€ κ³ μ°¨ ν•¨μˆ˜ μ‚¬μš©

 

μ½”λ“œ

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);

 

4. 객체지ν–₯μ–Έμ–΄

클래슀 기반 μ–Έμ–΄λŠ” 클래슀λ₯Ό μ •μ˜ν•˜κ³  κ·Έ 클래슀λ₯Ό 기반으둜 객체λ₯Ό μƒμ„±ν•˜λŠ” 반면, μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” ν”„λ‘œν† νƒ€μž… 기반 μ–Έμ–΄λ‘œ 클래슀 없이도 객체λ₯Ό μƒμ„±ν•˜κ³  ν”„λ‘œν† νƒ€μž… 체인을 톡해 상속과 속성 곡유λ₯Ό κ΅¬ν˜„ν•œλ‹€(κ°μ²΄λŠ” μƒνƒœ 데이터와 λ…μž‘μ„ ν•˜λ‚˜μ˜ 논리적인 λ‹¨μœ„λ‘œ 묢은 볡합적인 자료ꡬ쑰).

OOPμ—μ„œ μ½”λ“œλŠ” 데이터와 λ™μž‘μ„ λͺ¨λ‘ μΊ‘μŠν™”ν•˜λŠ” 개체λ₯Ό μ€‘μ‹¬μœΌλ‘œ μ§„ν–‰λœλ‹€. μΊ‘μŠν™”, 상속 및 λ‹€ν˜•μ„±κ³Ό 같은 κΈ°λ³Έ κ°œλ…μ„ μ΄‰μ§„ν•˜μ—¬ λͺ¨λ“ˆμ‹, ν™•μž₯ κ°€λŠ₯ 및 μœ μ§€ 관리 κ°€λŠ₯ν•œ μ½”λ“œ 생성. OOPλŠ” μ‹€μ œ μ—”ν„°ν‹°μ˜ 직관적인 λͺ¨λΈλ§μ„ μ΄‰μ§„ν•˜κ³  클래슀 및 개체 μ‚¬μš©μ„ 톡해 μ½”λ“œ μž¬μ‚¬μš© 및 ν˜‘μ—…μ„ μž₯λ €

 

정리해둔, 객체지ν–₯언어에 λŒ€ν•œ 정리글 μ°Έκ³ 

 

ꡬ쑰적 ν”„λ‘œκ·Έλž¨κ³Ό 객체지ν–₯ μ–Έμ–΄μ˜ 차이점

🐣 μ˜€λŠ˜λ„ ν•œλ‹¨κ³„ UP!ꡬ쑰적 ν”„λ‘œκ·Έλž¨κ³Ό 객체지ν–₯ μ–Έμ–΄μ˜ 차이점에 λŒ€ν•΄μ„œ μ‚΄νŽ΄λ³΄λ„λ‘ ν•˜μž!_! 뚜λ‘₯! πŸ£ ꡬ쑰적 ν”„λ‘œκ·Έλž¨1. κ°œλ…κ΅¬μ‘°μ  ν”„λ‘œκ·Έλž˜λ°μ€ μž‘μ—…μ„ 더 μž‘κ³  관리 κ°€λŠ₯ν•œ μ ˆμ°¨λ‚˜ κΈ°λŠ₯

haileyham.tistory.com

 

 

5. 인터프리터 μ–Έμ–΄

인터프리터 μ–Έμ–΄λŠ” 컴파일러 μ–Έμ–΄λž‘ λŒ€λΉ„λ˜λŠ” κ°œλ…μ΄λ‹€. μ΄λŠ” λ‚˜μ€‘μ— 비ꡐ μ •λ¦¬ν•˜λ„λ‘ ν•˜κ² μŒ!

 

κ°œλ…

  • μ½”λ“œκ°€ 싀행될 λ•Œλ§ˆλ‹€ μΈν„°ν”„λ¦¬νŠΈ κ³Όμ • 반볡 μˆ˜ν–‰(μ†ŒμŠ€μ½”λ“œλ₯Ό μ¦‰μ‹œ μ‹€ν–‰)
  • μΈν„°ν”„λ¦¬νŠΈ 단계(λ¬Έ λ‹¨μœ„λ‘œ μ½λŠ”)와 μ‹€ν–‰ 단계가 λΆ„λ¦¬λ˜μ–΄ μžˆμ§€ μ•Šκ³  반볡 μˆ˜ν–‰λ˜μ–΄ μ½”λ“œ μ‹€ν–‰ 속도가 비ꡐ적 느림
  • μ΅œκ·Όμ—λŠ” μ»΄νŒŒμΌλŸ¬μ™€ μΈν„°ν”„λ¦¬ν„°μ˜ 기술적 κ΅¬λΆ„νžˆ λͺ¨ν˜Έν•΄μ Έ κ°€λŠ” μΆ”μ„Έ. ν•˜μ§€λ§Œ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λŸ°νƒ€μž„μ— 컴파일되며 μ‹€ν–‰ 파일이 μƒμ„±λ˜μ§€ μ•Šκ³  μΈν„°ν”„λ¦¬ν„°μ˜ 도움 μ—†μ΄λŠ” μ‹€ν–‰ λΆˆκ°€.
  • μΈν„°ν”„λ¦¬νŠΈ : ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄λ‘œ μž‘μ„±λœ μ†ŒμŠ€ μ½”λ“œλ₯Ό ν•œ 쀄씩 ν•΄μ„ν•˜μ—¬ μ‹€ν–‰ν•˜λŠ” λ°©μ‹μ˜ 컴퓨터 ν”„λ‘œκ·Έλž¨. 컴파일과 달리 μ‹€ν–‰ νŒŒμΌμ„ μƒμ„±ν•˜μ§€ μ•Šκ³ , μ½”λ“œλ₯Ό λ°”λ‘œ μ‹€ν–‰ν•˜μ—¬ κ²°κ³Ό λ³΄μ—¬μ€Œ

 

νŠΉμ§•

  • ν”„λ‘œκ·Έλž¨ μ‹€ν–‰μ‹œ ν•œ λ²ˆμ— ν•œ λ¬Έμž₯μ”© λ²ˆμ—­ν•œλ‹€.
  • ν•œλ²ˆμ— ν•œλ¬Έμž₯μ”© λ²ˆμ—­ν›„ μ‹€ν–‰ μ‹œν‚€κΈ° λ•Œλ¬Έμ— μ‹€ν–‰ μ‹œκ°„μ΄ λŠλ¦¬λ‹€.
  • μ»΄νŒŒμΌλŸ¬μ™€ 같은 였브젝트 μ½”λ“œ 생성과정이 μ—†κΈ° λ•Œλ¬Έμ— λ©”λͺ¨λ¦¬ 효율이 μ’‹λ‹€.
  • ν”„λ‘œκ·Έλž¨μ„ μ‹€ν–‰μ‹œν‚€κ³  λ‚˜μ„œ 였λ₯˜λ₯Ό λ°œκ²¬ν•˜λ©΄ λ°”λ‘œ 싀행을 쀑지 μ‹œν‚¨λ‹€. μ‹€ν–‰ 후에 였λ₯˜λ₯Ό μ•Œ 수 μžˆλ‹€.

 

λŒμ•„μ„œλ©΄ μžŠλŠ” 것이 μ •μƒμΌκΉŒ

 

πŸ“ Reference

λͺ¨λ˜μžλ°”μŠ€ν¬λ¦½νŠΈ

Contents

ν¬μŠ€νŒ… μ£Όμ†Œλ₯Ό λ³΅μ‚¬ν–ˆμŠ΅λ‹ˆλ‹€

이 글이 도움이 λ˜μ—ˆλ‹€λ©΄ 곡감 λΆ€νƒλ“œλ¦½λ‹ˆλ‹€.