[FE Study] Javascript - (4)

365.48kmΒ·2023λ…„ 1μ›” 4일
0

[FE Study] JavaScript

λͺ©λ‘ 보기
4/5
post-thumbnail

1. ν•¨μˆ˜

ν•¨μˆ˜λž€? πŸ’‘

  • 일련의 과정을 λ¬Έ(statement)둜 κ΅¬ν˜„ν•˜κ³  μ½”λ“œ λΈ”λ‘μœΌλ‘œ κ°μ‹Έμ„œ ν•˜λ‚˜μ˜ μ‹€ν–‰ λ‹¨μœ„λ‘œ μ •μ˜ν•œ 것을 μ˜λ―Έν•œλ‹€.
  • ν•¨μˆ˜λŠ” ν•¨μˆ˜ μ •μ˜λ₯Ό 톡해 μƒμ„±ν•œλ‹€.

*ν•¨μˆ˜μ˜ κ΅¬μ„±μš”μ†Œ

  • 맀개 λ³€μˆ˜(parameter)
  • 인수(argument)
  • λ°˜ν™˜(return value)
// ν•¨μˆ˜ μ •μ˜
function add(x,y){
	return x+y;
}
// ν•¨μˆ˜ 호좜
var result = add(2,5);

// ν•¨μˆ˜ add에 인수(argument) 2,5λ₯Ό μ „λ‹¬ν•˜λ©΄μ„œ ν˜ΈμΆœν•˜λ©΄ λ°˜ν™˜κ°’ 7을 λ°˜ν™˜ν•œλ‹€.
console.log(result)

1.1. ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜λŠ” 이유

Key pointπŸ’‘ μ½”λ“œμ˜ μž¬μ‚¬μš©μ„±

μ½”λ“œμ˜ 쀑볡을 μ–΅μ œν•˜κ³  μž¬μ‚¬μš©μ„ λ†’μ΄λŠ” ν•¨μˆ˜λŠ” μœ μ§€λ³΄μˆ˜μ˜ νŽΈμ˜μ„±μ„ 높이고 μ½”λ“œμ˜ 신뒰성을 λ†’μ΄λŠ” νš¨κ³Όκ°€ μžˆλ‹€.

1.2. ν•¨μˆ˜ λ¦¬ν„°λŸ΄

μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν•¨μˆ˜λŠ” 객체 νƒ€μž…μ˜ 값이닀. λ”°λΌμ„œ 숫자 값을 숫자 λ¦¬ν„°λŸ΄λ‘œ μƒμ„±ν•˜κ³  객체λ₯Ό 객체 λ¦¬ν„°λŸ΄λ‘œ μƒμ„±ν•˜λŠ” κ²ƒμ²˜λŸΌ ν•¨μˆ˜λ„ ν•¨μˆ˜ λ¦¬ν„°λŸ΄λ‘œ 생성할 수 μžˆλ‹€. ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ€ function ν‚€μ›Œλ“œ, ν•¨μˆ˜μ΄λ¦„, λ§€κ°œλ³€μˆ˜ λͺ©λ‘, ν•¨μˆ˜ λͺΈμ²΄λ‘œ κ΅¬μ„±λœλ‹€.

// λ³€μˆ˜μ— ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ„ ν• λ‹Ή
const f = function add(x,y){
	return x+y
}

1.3. ν•¨μˆ˜ μ •μ˜

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

function add(x,y){
	return x+y
}

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

const add = function(x,y){
	return x+y
}

3) Function μƒμ„±μž ν•¨μˆ˜

// λ³€μˆ˜μ— ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ„ ν• λ‹Ή
const add = new Function('x','y','return x+y')

4) ν™”μ‚΄ν‘œ ν•¨μˆ˜(ES6)

// λ³€μˆ˜μ— ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ„ ν• λ‹Ή
const add = (x,y) => {
	return x+y
}

1.4. ν•¨μˆ˜ μ„ μ–Έλ¬Έκ³Ό ν•¨μˆ˜ ν‘œν˜„μ‹

1) ν•¨μˆ˜ μ„ μ–Έλ¬Έ(Function Declarations)

  • 일반적인 ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄μ—μ„œμ˜ ν•¨μˆ˜ μ„ μ–Έκ³Ό λΉ„μŠ·ν•œ ν˜•μ‹μ΄λ‹€.
function ν•¨μˆ˜λͺ…() {
  κ΅¬ν˜„ 둜직
}
// μ˜ˆμ‹œ
function funcDeclarations() {
  return 'A function declaration';
}
funcDeclarations(); // 'A function declaration'
  • ν•¨μˆ˜ 선언문은 μ½”λ“œλ₯Ό κ΅¬ν˜„ν•œ μœ„μΉ˜μ™€ 관계없이 μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ νŠΉμ§•μΈ ν˜Έμ΄μŠ€νŒ…μ— 따라 λΈŒλΌμš°μ €κ°€ μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό 해석할 λ•Œ 맨 μœ„λ‘œ λŒμ–΄ μ˜¬λ €μ§„λ‹€.

Key pointπŸ’‘

  • ν•¨μˆ˜ 선언문은 ν‘œν˜„μ‹μ΄ μ•„λ‹Œ λ¬Έ(statement)이닀.

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

  • μœ μ—°ν•œ μžλ°”μŠ€ν¬λ¦½νŠΈ μ–Έμ–΄μ˜ νŠΉμ§•μ„ ν™œμš©ν•œ μ„ μ–Έ 방식
  • JavaScriptλŠ” 일급 객체 언어이기 λ•Œλ¬Έμ— λ³€μˆ˜μ— ν•¨μˆ˜λ₯Ό ν• λ‹Ήν•  수 μžˆλ‹€.
var ν•¨μˆ˜λͺ… = function () {
  κ΅¬ν˜„ 둜직
};
// μ˜ˆμ‹œ
var funcExpression = function () {
    return 'A function expression';
}
funcExpression(); // 'A function expression'

3) ν•¨μˆ˜ μ„ μ–Έλ¬Έκ³Ό ν‘œν˜„μ‹μ˜ 차이점

Key pointπŸ’‘

  • ν•¨μˆ˜ 선언문은 ν˜Έμ΄μŠ€νŒ…μ— 영ν–₯을 λ°›μ§€λ§Œ, ν•¨μˆ˜ ν‘œν˜„μ‹μ€ ν˜Έμ΄μŠ€νŒ…μ— 영ν–₯을 받지 μ•ŠλŠ”λ‹€.
  • ν•¨μˆ˜ μ„ μ–Έλ¬ΈμœΌλ‘œ μ •μ˜ν•œ ν•¨μˆ˜μ™€ ν•¨μˆ˜ ν‘œν˜„μ‹μœΌλ‘œ μ •μ˜ν•œ ν•¨μˆ˜μ˜ 생성 μ‹œμ μ΄ λ‹€λ₯΄κΈ° λ•Œλ¬Έμ΄λ‹€.

// μ‹€ν–‰ μ „
logMessage();
sumNumbers();

// ν•¨μˆ˜ μ„ μ–Έλ¬Έ
function logMessage() {
  return 'worked';
}

// ν•¨μˆ˜ ν‘œν˜„μ‹
var sumNumbers = function () {
  return 10 + 20;
};
  • ν˜Έμ΄μŠ€νŒ…μ— μ˜ν•΄ μžλ°”μŠ€ν¬λ¦½νŠΈ ν•΄μ„κΈ°λŠ” μ½”λ“œλ₯Ό μ•„λž˜μ™€ 같이 μΈμ‹ν•œλ‹€.
// μ‹€ν–‰ μ‹œ
function logMessage() {
  return 'worked';
}

var sumNumbers;

logMessage(); // 'worked'
sumNumbers(); // Uncaught TypeError: sumNumbers is not a function

sumNumbers = function () {
  return 10 + 20;
};
  • λ³€μˆ˜ μ„ μ–Έ μ‹λ³„μž var에 μ˜ν•΄ ν˜Έμ΄μŠ€νŒ…μ΄ μ μš©λ˜μ–΄ μœ„μΉ˜κ°€ μƒλ‹¨μœΌλ‘œ λŒμ–΄μ˜¬λ €μ‘Œλ‹€.
var sumNumbers;

logMessage();
sumNumbers();
  • ν•˜μ§€λ§Œ μ‹€μ œ sumNumbers 에 할당될 function λ‘œμ§μ€ 호좜된 이후에 μ„ μ–Έλ˜λ―€λ‘œ, sumNumbers λŠ” ν•¨μˆ˜λ‘œ μΈμ‹ν•˜μ§€ μ•Šκ³  λ³€μˆ˜λ‘œ μΈμ‹ν•œλ‹€.

  • λ³€μˆ˜ 선언은 λŸ°νƒ€μž„ 이전에 μ‹€ν–‰λ˜μ–΄ undefined둜 μ΄ˆκΈ°ν™”λ˜μ§€λ§Œ λ³€μˆ˜ ν• λ‹Ήλ¬Έμ˜ 값은 할당문이 μ‹€ν–‰λ˜λŠ” μ‹œμ , 즉 λŸ°νƒ€μž„μ— ν‰κ°€λ˜λ―€λ‘œ ν•¨μˆ˜ ν‘œν˜„μ‹μ˜ ν•¨μˆ˜ λ¦¬ν„ΈλŸ΄λ„ 할당문이 μ‹€ν–‰λ˜λŠ” μ‹œμ μ— ν‰κ°€λ˜μ–΄ ν•¨μˆ˜ 객체가 λœλ‹€.

  • λ”°λΌμ„œ ν•¨μˆ˜ ν‘œν˜„μ‹μœΌλ‘œ μ •μ˜ν•˜λ©΄ ν•¨μˆ˜ ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•˜λŠ” 것이 μ•„λ‹ˆλΌ λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•œλ‹€.

1.5. μ™œ ν•¨μˆ˜ ν‘œν˜„μ‹μ„ μ‚¬μš©ν• κΉŒ?

1) ν•¨μˆ˜ ν‘œν˜„μ‹ μž₯점

Key pointπŸ’‘

  • β€˜ν•¨μˆ˜ ν‘œν˜„μ‹μ΄ ν˜Έμ΄μŠ€νŒ…μ— 영ν–₯을 받지 μ•ŠλŠ”λ‹€β€™ λŠ” νŠΉμ§• 이외에도 ν•¨μˆ˜ 선언식보닀 μœ μš©ν•˜κ²Œ μ“°μ΄λŠ” κ²½μš°λŠ” λ‹€μŒκ³Ό κ°™λ‹€.
    - 클둜져둜 μ‚¬μš©
    - 콜백으둜 μ‚¬μš© (λ‹€λ₯Έ ν•¨μˆ˜μ˜ 인자둜 λ„˜κΈΈ 수 있음)

*ν•¨μˆ˜ ν‘œν˜„μ‹μœΌλ‘œ 클둜져 μƒμ„±ν•˜κΈ°

ν΄λ‘œμ ΈπŸ’‘

  • ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•˜κΈ° 전에 ν•΄λ‹Ή ν•¨μˆ˜μ— λ³€μˆ˜λ₯Ό λ„˜κΈ°κ³  싢을 λ•Œ μ‚¬μš©λœλ‹€. 더 μ‰½κ²Œ μ΄ν•΄ν•˜κΈ° μœ„ν•΄ μ•„λž˜ 예제λ₯Ό μ‚΄νŽ΄λ³΄μž.

1.6. ν™”μ‚΄ν‘œ ν•¨μˆ˜

  • ν™”μ‚΄ν‘œ ν•¨μˆ˜λŠ” κΈ°μ‘΄ ν•¨μˆ˜μ˜ μ„ μ–Έλ¬Έ λ˜λŠ” ν•¨μˆ˜ ν‘œν˜„μ‹μ„ μ™„μ „νžˆ λŒ€μ²΄ν•˜κΈ° μœ„ν•΄ λ””μžμΈ 된 것이 μ•„λ‹ˆλΌ, ν™”μ‚΄ν‘œ ν•¨μˆ˜λŠ” 기쑴의 ν•¨μˆ˜λ³΄λ‹€ ν‘œν˜„, λ‚΄λΆ€ λ™μž‘μ΄ κ°„λž΅ν™”λ˜μ–΄ μžˆλ‹€.

ν™”μ‚΄ν‘œ ν•¨μˆ˜πŸ’‘

  • ν™”μ‚΄ν‘œ ν•¨μˆ˜λŠ” μƒμ„±μž ν•¨μˆ˜λ‘œ μ‚¬μš©ν•  수 μ—†μœΌλ©° 기쑴의 ν•¨μˆ˜μ™€ this 바인딩 방식이 λ‹€λ₯΄κ³ , prototype ν”„λ‘œνΌν‹°κ°€ μ—†μœΌλ©° arguments 객체λ₯Ό μƒμ„±ν•˜μ§€ μ•ŠλŠ”λ‹€.

2. λ‹€μ–‘ν•œ ν•¨μˆ˜μ˜ ν˜•νƒœ

2.1. μž¬κ·€ ν•¨μˆ˜

μž¬κ·€ ν•¨μˆ˜πŸ’‘

  • μž¬κ·€ ν•¨μˆ˜λŠ” 자기 μžμ‹ μ„ ν˜ΈμΆœν•˜λŠ” ν–‰μœ„λ₯Ό λ§ν•œλ‹€. μž¬κ·€ ν•¨μˆ˜λŠ” νƒˆμΆœ 쑰건이 μ—†μœΌλ©΄ ν•¨μˆ˜κ°€ λ¬΄ν•œ ν˜ΈμΆœλ˜μ–΄ μŠ€νƒ μ˜€λ²„ν”Œλ‘œ(stack overflow) μ—λŸ¬κ°€ λ°œμƒν•œλ‹€.

2.3. 콜백 ν•¨μˆ˜

콜백 ν•¨μˆ˜πŸ’‘

  • ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜λ₯Ό 톡해 λ‹€λ₯Έ ν•¨μˆ˜μ˜ λ‚΄λΆ€λ‘œ μ „λ‹¬λ˜λŠ” ν•¨μˆ˜λ₯Ό μ½œλ°±ν•¨μˆ˜λΌκ³  ν•œλ‹€.

2.4. κ³ μ°¨ν•¨μˆ˜

κ³ μ°¨ν•¨μˆ˜πŸ’‘

  • λ§€κ°œλ³€μˆ˜λ₯Ό 톡해 ν•¨μˆ˜μ˜ μ™ΈλΆ€μ—μ„œ 콜백 ν•¨μˆ˜λ₯Ό 전달받은 ν•¨μˆ˜λ₯Ό κ³ μ°¨ν•¨μˆ˜(HOF)라고 ν•œλ‹€.
profile
이게 마즐까?

0개의 λŒ“κΈ€