wam
w__am κ°œλ°œλ…ΈνŠΈ
wam
  • λΆ„λ₯˜ 전체보기 (165)
    • CS 지식 (10)
      • 자료ꡬ쑰 (0)
      • μ•Œκ³ λ¦¬μ¦˜ (0)
      • 컴퓨터 ꡬ쑰 (0)
      • 운영체제 (0)
      • λ„€νŠΈμ›Œν¬ (7)
      • λ°μ΄ν„°λ² μ΄μŠ€ (0)
      • λ””μžμΈ νŒ¨ν„΄ (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT 지식 (8)
      • ν΄λΌμš°λ“œ μ„œλΉ„μŠ€ (3)
      • λ„€νŠΈμ›Œν¬ (1)
      • 데이터 포맷 (2)
      • 기타 (2)
    • IT Book (2)
    • μœ μš©ν•œ μ‚¬μ΄νŠΈ (1)

λΈ”λ‘œκ·Έ 메뉴

  • ν™ˆ
  • νƒœκ·Έ
  • λ°©λͺ…둝
  • 🐱 Github

인기 κΈ€

νƒœκ·Έ

  • getelapsedtime()
  • 초기 ν™˜κ²½μ„€μ •
  • ν•¨μˆ˜ ν‘œν˜„μ‹
  • mapped types
  • ν•¨μˆ˜ λ¦¬ν„°λŸ΄
  • type-graphql
  • λ””μžμΈ νŒ¨ν„΄
  • e.preventdefault()
  • λ Œλ”λ§ μ„±λŠ₯ μ΅œμ ν™”
  • ν•¨μˆ˜ μ„ μ–Έλ¬Έ
  • Interface
  • API
  • μ›ν˜•μ μΈ μ›€μ§μž„
  • Decorators
  • math.cos()
  • getdelta()
  • μ˜€ν”„-ν”„λ ˆλ―ΈμŠ€(off-premise) 방식
  • μŠ€μ½”ν”„
  • math.sin()
  • isabstract
  • reactive variables
  • 데이터 포맷
  • μ‚Όκ°ν•¨μˆ˜
  • joi μ—λŸ¬
  • axeshelper
  • react μ„±λŠ₯ μ΅œμ ν™”
  • threejs 개발 ν•  λ•Œ 도움을 쀄 수 μžˆλŠ” μœ ν‹Έλ¦¬ν‹°
  • gridhelper
  • ν•¨μˆ˜μ˜ λ²”μœ„
  • three.js ꡬ성 μš”μ†Œ

졜근 κΈ€

κ΄€λ¦¬μž

κΈ€μ“°κΈ° / μŠ€ν‚¨νŽΈμ§‘ / κ΄€λ¦¬μžνŽ˜μ΄μ§€
hELLO Β· Designed By μ •μƒμš°.
wam

w__am κ°œλ°œλ…ΈνŠΈ

ν•¨μˆ˜ μ •μ˜ (ν•¨μˆ˜ μ„ μ–Έλ¬Έ, ν•¨μˆ˜ ν‘œν˜„μ‹)
Frontend/JavaScript

ν•¨μˆ˜ μ •μ˜ (ν•¨μˆ˜ μ„ μ–Έλ¬Έ, ν•¨μˆ˜ ν‘œν˜„μ‹)

2024. 3. 7. 00:21

 

πŸ’‘ ν•¨μˆ˜ μ„ μ–Έλ¬Έ : ν‘œν˜„μ‹μ΄ μ•„λ‹Œ λ¬Έ
πŸ’‘ ν•¨μˆ˜ ν‘œν˜„μ‹ : ν‘œν˜„μ‹μΈ λ¬Έ

 

ν•¨μˆ˜μ˜ ꡬ성 μš”μ†Œ

 

ν•¨μˆ˜ μ„ μ–Έλ¬Έ

// ν•¨μˆ˜ μ„ μ–Έλ¬Έ
function add(x, y) {
	return x + y;
}

// ν•¨μˆ˜ μ°Έμ‘°
// console.dir console.logμ™€λŠ” 달리 ν•¨μˆ˜ 객체의 ν”„λ‘œνΌν‹°κΉŒμ§€ 좜λ ₯ν•œλ‹€.
// 단, Node.js ν™˜κ²½μ—μ„œλŠ” console.log와 같은 κ²°κ³Όκ°€ 좜λ ₯λœλ‹€.
console.dir(add); // fadd(x, y)

// ν•¨μˆ˜ 호좜
console.log(add(2, 5)); // 7

// ν•¨μˆ˜ 선언문은 ν•¨μˆ˜ 이름을 μƒλž΅ν•  수 μ—†μŒ
// ν•¨μˆ˜ 선언문은 ν‘œν˜„μ‹μ΄ μ•„λ‹˜
function (x, y) {
  return x + y; 
}

// SyntaxError: Function statements require a function name
  • ν•¨μˆ˜ 선언문은 ν‘œν˜„μ‹μ΄ μ•„λ‹Œ λ¬Έ (ν‘œν˜„μ‹μ΄ μ•„λ‹Œ 문은 λ³€μˆ˜μ— ν• λ‹Ήν•  수 μ—†λ‹€.)
  • ν•¨μˆ˜ 선언문은 ν•¨μˆ˜ λ¦¬ν„°λŸ΄κ³Ό ν˜•νƒœκ°€ 동일
  • ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ€ ν•¨μˆ˜ 이름을 μƒλž΅ν•  수 μžˆμœΌλ‚˜ ν•¨μˆ˜ 선언문은 ν•¨μˆ˜ 이름을 μƒλž΅ν•  수 μ—†μŒ
  • ν•¨μˆ˜λŠ” ν•¨μˆ˜ μ΄λ¦„μœΌλ‘œ ν˜ΈμΆœν•˜λŠ” 것이 μ•„λ‹ˆλΌ ν•¨μˆ˜ 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” μ‹λ³„μžλ‘œ 호좜

 

 

ν‘œν˜„μ‹μΈ λ¬Έκ³Ό ν‘œν˜„μ‹μ΄ μ•„λ‹Œ λ¬Έ

// λ³€μˆ˜ 선언문은 κ°’μœΌλ‘œ 평가될 수 μ—†μœΌλ―€λ‘œ ν‘œν˜„μ‹μ΄ μ•„λ‹ˆλ‹€.
var x;
// 1, 2, 1 + 2, x = 1 + 2λŠ” λͺ¨λ‘ ν‘œν˜„μ‹μ΄λ‹€.
// x = 1 + 2λŠ” ν‘œν˜„μ‹μ΄λ©΄μ„œ μ™„μ „ν•œ 문이기도 ν•˜λ‹€.
x = 1 + 2;
var x;

// 할당은 κ·Έ μžμ²΄κ°€ ν‘œν˜„μ‹μ΄μ§€λ§Œ μ™„μ „ν•œ 문이기도 ν•˜λ‹€. 
// 즉, 할당문은 ν‘œν˜„μ‹μΈ 문이닀.
x = 100;
// ν‘œν˜„μ‹μ΄ μ•„λ‹Œ 문은 κ°’μ²˜λŸΌ μ‚¬μš©ν•  수 μ—†λ‹€.
var foo = var x; // SyntaxError: Unexpected token var
// ν‘œν˜„μ‹μΈ 문은 κ°’μ²˜λŸΌ μ‚¬μš©ν•  수 μžˆλ‹€.
var foo = x = 100;
console.log(foo); // 100

 

 

κΈ°λͺ… ν•¨μˆ˜ λ¦¬ν„°λŸ΄λ„ μ€‘μ˜μ μΈ μ½”λ“œλ‹€.

 

 

ν•¨μˆ˜ μ„ μ–Έλ¬ΈμœΌλ‘œ 해석

fooλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 μ•”λ¬΅μ μœΌλ‘œ μƒμ„±ν•œ μ‹λ³„μžλ‹€.

 

// κΈ°λͺ… ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ„ λ‹¨λ…μœΌλ‘œ μ‚¬μš©ν•˜λ©΄ ν•¨μˆ˜ μ„ μ–Έλ¬ΈμœΌλ‘œ ν•΄μ„λœλ‹€.
// ν•¨μˆ˜ μ„ μ–Έλ¬Έμ—μ„œλŠ” ν•¨μˆ˜ 이름을 μƒλž΅ν•  수 μ—†λ‹€.
function foo() { console.log('foo'); }
foo(); // foo
  • fooλŠ” ν•¨μˆ˜ λͺΈμ²΄ λ‚΄λΆ€μ—μ„œλ§Œ μœ νš¨ν•œ μ‹λ³„μžμΈ ν•¨μˆ˜ μ΄λ¦„μ΄λ―€λ‘œ foo ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  수 μ—†μ–΄μ•Ό ν•œλ‹€. μ‹λ³„μž fooλ₯Ό μ„ μ–Έν•œ 적도 μ—†κ³  ν• λ‹Ήν•œ 적도 μ—†λŠ”λ° 호좜이 κ°€λŠ₯ν•œ μ΄μœ λŠ”?
    • μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 ν•¨μˆ˜ 선언문을 해석해 ν•¨μˆ˜ 객체λ₯Ό μƒμ„±ν•œλ‹€.
    • μ΄λ•Œ ν•¨μˆ˜ 이름은 ν•¨μˆ˜ λͺΈμ²΄ λ‚΄λΆ€μ—μ„œλ§Œ μœ νš¨ν•œ μ‹λ³„μžμ΄λ―€λ‘œ ν•¨μˆ˜ μ΄λ¦„κ³ΌλŠ” λ³„λ„λ‘œ μƒμ„±λœ ν•¨μˆ˜ 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” μ‹λ³„μžκ°€ ν•„μš”ν•˜λ‹€.
    • ν•¨μˆ˜ 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” μ‹λ³„μžκ°€ μ—†μœΌλ©΄ μƒμ„±λœ ν•¨μˆ˜ 객체λ₯Ό μ°Έμ‘°ν•  수 μ—†μœΌλ―€λ‘œ ν˜ΈμΆœν•  μˆ˜λ„ μ—†λ‹€.
    • λ”°λΌμ„œ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 μƒμ„±λœ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜κΈ° μœ„ν•΄ ν•¨μˆ˜ 이름과 λ™μΌν•œ μ΄λ¦„μ˜ μ‹λ³„μžλ₯Ό μ•”λ¬΅μ μœΌλ‘œ μƒμ„±ν•˜κ³ , 거기에 ν•¨μˆ˜ 객체λ₯Ό ν• λ‹Ήν•œλ‹€.

 

 

ν•¨μˆ˜λŠ” ν•¨μˆ˜ μ΄λ¦„μœΌλ‘œ ν˜ΈμΆœν•˜λŠ” 것이 μ•„λ‹ˆλΌ ν•¨μˆ˜ 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” μ‹λ³„μžλ‘œ ν˜ΈμΆœν•œλ‹€.

 

 

ν•¨μˆ˜ λ¦¬ν„°λŸ΄ ν‘œν˜„μ‹μœΌλ‘œ 해석

ν•¨μˆ˜ 이름 barλŠ” ν•¨μˆ˜ λͺΈμ²΄ λ‚΄μ—μ„œλ§Œ μ°Έμ‘°ν•  수 μžˆλŠ” μ‹λ³„μžμ΄λ―€λ‘œ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  수 μ—†λ‹€.

 

// ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ„ ν”Όμ—°μ‚°μžλ‘œ μ‚¬μš©ν•˜λ©΄ ν•¨μˆ˜ 선언문이 μ•„λ‹ˆλΌ ν•¨μˆ˜ λ¦¬ν„°λŸ΄ ν‘œν˜„μ‹μœΌλ‘œ ν•΄μ„λœλ‹€.
// ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ—μ„œλŠ” ν•¨μˆ˜ 이름을 μƒλž΅ν•  수 μžˆλ‹€.
(function bar() { console.log('bar'); });
bar(); // ReferenceError: bar is not defined
  • ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ—μ„œ ν•¨μˆ˜ 이름은 ν•¨μˆ˜ λͺΈμ²΄ λ‚΄μ—μ„œλ§Œ μ°Έμ‘°ν•  수 μžˆλŠ” μ‹λ³„μžλ‹€λΌκ³  ν–ˆλ‹€.
  • μ΄λŠ” ν•¨μˆ˜ λͺΈμ²΄ μ™ΈλΆ€μ—μ„œλŠ” ν•¨μˆ˜ μ΄λ¦„μœΌλ‘œ ν•¨μˆ˜λ₯Ό μ°Έμ‘°ν•  수 μ—†μœΌλ―€λ‘œ ν•¨μˆ˜ λͺΈμ²΄ μ™ΈλΆ€μ—μ„œλŠ” ν•¨μˆ˜ μ΄λ¦„μœΌ 둜 ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  수 μ—†λ‹€λŠ” μ˜λ―Έλ‹€.
  • 즉, ν•¨μˆ˜λ₯Ό κ°€λ¦¬ν‚€λŠ” μ‹λ³„μžκ°€ μ—†λ‹€λŠ” 것과 λ§ˆμ°¬κ°€μ§€λ‹€.
  • λ”°λΌμ„œ μœ„ 예제 의 bar ν•¨μˆ˜λŠ” ν˜ΈμΆœν•  수 μ—†λ‹€.

 

 

ν•¨μˆ˜ ν‘œν˜„μ‹

// κΈ°λͺ… ν•¨μˆ˜ ν‘œν˜„μ‹
const add = function foo(x, y) {
  return x + y;
}
console.log(add(2,5)); // 7

// ν•¨μˆ˜ μ΄λ¦„μœΌλ‘œ ν˜ΈμΆœν•˜λ©΄ ReferenceError λ°œμƒ
console.log(foo(2,5)); // ReferenceError : foo is not defined
  • ν•¨μˆ˜ ν‘œν˜„μ‹μ€ ν‘œν˜„식인 λ¬Έ
  • ν•¨μˆ˜λŠ” 일급 κ°μ²΄μ΄λ―€λ‘œ ν•¨μˆ˜ λ¦¬ν„°λŸ΄λ‘œ μƒμ„±ν•œ ν•¨μˆ˜ 객체λ₯Ό λ³€μˆ˜μ— ν• λ‹Ήν•  수 있음
    • κ°’μ˜ μ„±μ§ˆμ„ κ°–λŠ” 객체λ₯Ό 일급 객체라 ν•œλ‹€.
  • ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ˜ ν•¨μˆ˜ 이름은 μƒλž΅ν•  수 μžˆλ‹€. μ΄λŸ¬ν•œ ν•¨μˆ˜λ₯Ό 읡λͺ… ν•¨μˆ˜λΌ ν•œλ‹€.
    • ν•¨μˆ˜ ν‘œν˜„μ‹μ˜ ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ€ ν•¨μˆ˜ 이름을 μƒλž΅ν•˜λŠ” 것이 μΌλ°˜μ μ΄λ‹€.
  • ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•ŒλŠ” ν•¨μˆ˜ 이름이 μ•„λ‹ˆλΌ ν•¨μˆ˜ 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” μ‹λ³„μžλ₯Ό μ‚¬μš©
    • ν•¨μˆ˜ 이름은 ν•¨μˆ˜ λͺΈμ²΄ λ‚΄λΆ€μ—μ„œλ§Œ μœ νš¨ν•œ μ‹λ³„μžμ΄λ―€λ‘œ ν•¨μˆ˜ μ΄λ¦„μœΌλ‘œ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  수 μ—†λ‹€.

 

 

μ €μž‘μžν‘œμ‹œ λ³€κ²½κΈˆμ§€ (μƒˆμ°½μ—΄λ¦Ό)

'Frontend > JavaScript' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

μ›μ‹œ κ°’κ³Ό 객체의 비ꡐ  (0) 2024.03.14
μœ μ‚¬ λ°°μ—΄ 객체, μ΄ν„°λŸ¬λΈ”, 래퍼 객체  (0) 2024.03.13
ν•¨μˆ˜ ν˜Έμ΄μŠ€νŒ…  (0) 2024.03.06
ν˜Έμ΄μŠ€νŒ…(hoisting)  (0) 2024.03.05
var, let, const 차이  (0) 2024.03.03
    'Frontend/JavaScript' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€
    • μ›μ‹œ κ°’κ³Ό 객체의 비ꡐ
    • μœ μ‚¬ λ°°μ—΄ 객체, μ΄ν„°λŸ¬λΈ”, 래퍼 객체
    • ν•¨μˆ˜ ν˜Έμ΄μŠ€νŒ…
    • ν˜Έμ΄μŠ€νŒ…(hoisting)
    wam
    wam

    ν‹°μŠ€ν† λ¦¬νˆ΄λ°”