Skip to content

Latest commit

Β 

History

History

07.ν•¨μˆ˜

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Β 
Β 
Β 
Β 

ν•¨μˆ˜(객체) μ‚¬μš© 이유

  • μ½”λ“œ μž¬μ‚¬μš© , μœ μ§€λ³΄μˆ˜μ˜ νŽΈμ˜μ„± , μ½”λ“œμ˜ 가독성


μ½”λ“œμ˜ λ¬Έλ§₯에 λ”°λ₯Έ μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ˜ ν•¨μˆ˜ 해석

μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 μ½”λ“œμ˜ λ¬Έλ§₯ 에 따라 λ™μΌν•œ ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ„ ν•¨μˆ˜ ν‘œν˜„μ‹ or ν•¨μˆ˜ μ„ μ–Έλ¬ΈμœΌλ‘œ ν•΄μ„ν•˜λŠ” κ²½μš°κ°€ μžˆλ‹€.

  • { } 은 μ½”λ“œ 블둝 일 μˆ˜λ„ 있고, 객체 λ¦¬ν„°λŸ΄ 일 μˆ˜λ„ μžˆλ‹€. => { }은 μ€‘μ˜μ  ν‘œν˜„

    • { }이 λ‹¨λ…μœΌλ‘œ 쑴재 β†’ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 { } 을 λΈ”λ‘λ¬ΈμœΌλ‘œ 해석

    • { } 이 κ°’μœΌλ‘œ ν‰κ°€λ˜μ–΄μ•Ό ν•  λ¬Έλ§₯μ—μ„œ ν”Όμ—°μ‚°μž 둜 μ‚¬μš©λ  경우 => μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 { }을 객체 λ¦¬ν„°λŸ΄λ‘œ 해석

  • ν•¨μˆ˜λ„ λ§ˆμ°¬κ°€μ§€!!

    • ν•¨μˆ˜ λ¦¬ν„°λŸ΄ 이 λ‹¨λ…μœΌλ‘œ μ‚¬μš©λœλ‹€. β†’ ν•¨μˆ˜ μ„ μ–Έλ¬ΈμœΌλ‘œ 해석
    • ν•¨μˆ˜ λ¦¬ν„°λŸ΄ 이 κ°’μœΌλ‘œ ν‰κ°€λ˜μ–΄μ•Ό ν•˜λŠ”(λ³€μˆ˜μ— ν• λ‹Ή or ν”Όμ—°μ‚°μžλ‘œ..) λ¬Έλ§₯ β†’ ν•¨μˆ˜ λ¦¬ν„°λŸ΄ ν‘œν˜„μ‹ 으둜 해석



ν•¨μˆ˜ μ„ μ–Έλ¬Έκ³Ό ν•¨μˆ˜ λ¦¬ν„°λŸ΄ ν‘œν˜„μ‹

이 λ‘˜μ€ ν•¨μˆ˜κ°€ μƒμ„±λ˜λŠ” 것은 동일, λ‹€λ§Œ ν˜ΈμΆœμ—μ„œ 차이가 μžˆλ‹€.

// 1.ν•¨μˆ˜ μ„ μ–Έλ¬ΈμœΌλ‘œ ν•¨μˆ˜ 호좜
function foo() {
  console.log("foo"); // foo
}
foo();

// 2️. ν•¨μˆ˜ λ¦¬ν„°λŸ΄ ν‘œν˜„μ‹μœΌλ‘œ ν•¨μˆ˜ 호좜
(function bar() {
  console.log("bar"); // ReferenceError: bar is not defined
});
bar();

πŸ’‘ ν•¨μˆ˜ λ¦¬ν„°λŸ΄ ν‘œν˜„μ‹ 예제
ν•¨μˆ˜λ₯Ό κ°€λ₯΄ν‚€λŠ” μ‹λ³„μžκ°€ μ—†λ‹€ , ν•¨μˆ˜ λͺΈμ²΄ μ™ΈλΆ€μ—μ„œλŠ” ν•¨μˆ˜ μ΄λ¦„μœΌλ‘œ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  수 μ—†λ‹€.
image



πŸ’‘ ν•¨μˆ˜ ν‘œν˜„μ‹ 예제
μžλ°”μŠ€ν¬λ¦½νŠΈμ—”μ§„μ€ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜κΈ° μœ„ν•΄ ν•¨μˆ˜ 이름과 λ™μΌν•œ μ΄λ¦„μ˜ μ‹λ³„μžλ₯Ό μ•”λ¬΅μ μœΌλ‘œ μƒμ„±ν•œλ‹€.
> image

function add(x, y) {
  return x + y;
}
// μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진에 μ˜ν•΄ μ‹λ³„μžκ°€ 선언됨
var add = function add(x, y) {
  return x + y;
};
πŸ’‘ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 "ν•¨μˆ˜ μ„ μ–Έλ¬Έ"을 "ν•¨μˆ˜ ν‘œν˜„μ‹μœΌλ‘œ λ³€ν™˜" β†’ "ν•¨μˆ˜ 객체λ₯Ό 생성"




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

  • ν•¨μˆ˜ : κ°’ , ν”„λ‘œνΌν‹° κ°’ , λ°°μ—΄μ˜ μš”μ†Œ κ°€ 될 수 μžˆλ‹€. (== 일급객체)
console.log(add1); // 정상
console.log(add2); // undefined

//ν•¨μˆ˜ μ„ μ–Έλ¬Έ
function add1(x, y) {
  return x + y;
}
//ν•¨μˆ˜ ν‘œν˜„μ‹ add2 에 undefined값이 λ“€μ–΄κ°€λ©° ν˜Έμ΄μŠ€νŒ…λ¨
var add2 = function (x, y) {
  return x + y;
};
πŸ’‘ ν•¨μˆ˜ μ„ μ–Έλ¬Έ : λŸ°νƒ€μž„ 이전에 ν•¨μˆ˜ `객체 λ¨Όμ € 생성` (ν˜Έμ΄μŠ€νŒ…)
πŸ’‘ ν•¨μˆ˜ ν‘œν˜„μ‹ : λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•΄ λ³€μˆ˜μ— `undefined` 값이 듀어감

πŸŽ―ν•¨μˆ˜ 선언문은 ν˜Έμ΄μŠ€νŒ… , ν•¨μˆ˜ 선언문은 λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ…
image





ν•¨μˆ˜ 호좜

  • ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜(parameter) λŠ” ν•¨μˆ˜ λͺΈμ²΄ λ‚΄λΆ€μ—μ„œλ§Œ μ°Έμ‘°ν•  수 μžˆλ‹€. 즉, λ§€κ°œλ³€μˆ˜μ˜ μŠ€μ½”ν”„(유효 λ²”μœ„)λŠ” ν•¨μˆ˜ λ‚΄λΆ€λ‹€.
  • ν•¨μˆ˜μ˜ parameter와 μΈμˆ˜λŠ” κ°œμˆ˜κ°€ 달라도 였λ₯˜κ°€ λ‚˜μ§€ μ•ŠλŠ”λ‹€.
    • μΈμˆ˜κ°€ < νŒŒλΌλ―Έν„° 보닀 μž‘μœΌλ©΄ λ‚˜λ¨Έμ§€ νŒŒλΌλ―Έν„°λŠ” μ•”λ¬΅μ μœΌλ‘œ undefined
    • μΈμˆ˜κ°€ > νŒŒλΌλ―Έν„° 보닀 많으면 argument 객체에 μ €μž₯λœλ‹€.

예제

// 🎯 λ§€κ°œλ³€μˆ˜μ˜ 개수 > 인수의 개수 = λ‚˜λ¨Έμ§€ λ§€κ°œλ³€μˆ˜ undefined
function mul(x, y) {
  console.log(x, y); // 1 undefined
}
mul(1);

// 🎯 λ§€κ°œλ³€μˆ˜μ˜ 개수 < 인수의 개수 = arguments 에 보관
function sub(x, y) {
  console.log(arguments); // [Arguments] { '0': 3, '1': 2, '2': 1 }
  return x - y;
}
sub(3, 2, 1); // 1

μžλ°”μŠ€ν¬λ¦½νŠΈ λ¬Έλ²•μƒμ˜ 문제

πŸ’‘μžλ°”μŠ€ν¬λ¦½νŠΈ ν•¨μˆ˜λŠ” λ§€κ°œλ³€μˆ˜μ™€ 인수의 κ°œμˆ˜κ°€ μΌμΉ˜ν•˜λŠ”μ§€ ν™•μΈν•˜μ§€ μ•ŠλŠ”λ‹€.
πŸ’‘μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” "동적 νƒ€μž… μ–Έμ–΄"λ‹€. λ”°λΌμ„œ μžλ°”μŠ€ν¬λ¦½νŠΈ ν•¨μˆ˜λŠ” λ§€κ°œλ³€μˆ˜μ˜ "νƒ€μž…μ„ 사전에 지정할 수 μ—†λ‹€."
  • ν•¨μˆ˜λ₯Ό μ •μ˜ν•  λ•Œ, μΈμˆ˜κ°€ μ „λ‹¬λ˜μ—ˆλŠ”μ§€ 확인할 ν•„μš”κ°€ μžˆλ‹€. (νŒŒλΌλ―Έν„°μ™€ (!=) μΈμžκ°€ 달라도 였λ₯˜κ°€ λ‚˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ—)
    1. typeof μ—°μ‚°μž λ₯Ό μ‚¬μš©ν•˜λŠ” 방법
    2. μΈμˆ˜κ°€ μ „λ‹¬λ˜μ§€ μ•Šμ€ 경우 단좕 평가 λ₯Ό μ‚¬μš©ν•˜λŠ” 방법
    3. λ§€κ°œλ³€μˆ˜μ— 기본값을 ν• λ‹Ήν•˜λŠ” 방법
// 1️⃣ typeof μ—°μ‚°μžλ‘œ arguments 문제 방지
function add(x, y) {
  if (typeof x !== "number" || typeof y !== "number") {
    throw new TypeError("μΈμˆ˜λŠ” λͺ¨λ‘ 숫자(number)κ°’ 이어야 ν•©λ‹ˆλ‹€.");
  }

  return x + y;
}

// 2️⃣ "단좕 평가"둜 arguments 문제 방지
function mul(a, b, c) {
  a = a || 1;
  b = b || 1;
  c = c || 1;

  return a * b * c;
}

// 3️⃣ parameter default value μ„€μ •μœΌλ‘œ argument 문제 방지
function sub(a = 0, b = 0) {
  return a - b;
}


ν•¨μˆ˜ 값에 μ˜ν•œ 호좜 , 참쑰에 μ˜ν•œ 호좜

  • 값에 μ˜ν•œ 호좜 : μ›μ‹œκ°’μ„ 전달

    • λ³€κ²½ λΆˆκ°€λŠ₯ν•œ κ°’
    • μ›μ‹œ νƒ€μž…μ˜argumentλŠ” κ°’μžμ²΄κ°€ 볡사 λ˜μ–΄ 맀게 λ³€μˆ˜λ‘œ 전달
    • X μ›λ³Έμ˜ 훼손 X

  • 참쑰에 μ˜ν•œ 호좜 : 객체λ₯Ό 전달

    • 변경이 κ°€λŠ₯ν•œ κ°’
    • 객체 argument λŠ” μ°Έμ‘° 값이 λ§€κ²Œλ³€μˆ˜μ— 전달
    • O μ›λ³Έμ˜ 훼손 O
πŸ’‘ ν•¨μˆ˜μ˜ νŒŒλΌλ―Έν„°λ‘œ μ›μ‹œκ°’μ„ μ£Όλ©΄ 원본이 ν›Όμ†λ˜μ§€ μ•Šμ§€λ§Œ, 객체λ₯Ό μ£Όλ©΄ 원볡 객체가 ν›Όμ†λœλ‹€.
function changeVal(primitive, obj) {
  primitive += 100;
  obj.name = "WIEEE";
}

// μ™ΈλΆ€ μƒνƒœ
var num = 100; // μ›μ‹œ κ°’
var person = { name: "WI" }; // 객체

//person 객체의 값도 변함
changeVal(num, person);

μœ„ μ½”λ“œ 예제
image

[ πŸ’‘ 순수 ν•¨μˆ˜ ]

+ μ™ΈλΆ€ μƒνƒœλ₯Ό λ³€κ²½ν•˜μ§€ μ•Šκ³  μ™ΈλΆ€ μƒνƒœμ— μ˜μ‘΄ν•˜μ§€λ„ μ•ŠλŠ” ν•¨μˆ˜λ₯Ό "순수 ν•¨μˆ˜"
+ 순수 ν•¨μˆ˜λ₯Ό 톡해 λΆ€μˆ˜νš¨κ³Ό(side effect)λ₯Ό μ΅œλŒ€ν•œ μ–΅μ œν•˜κ³  였λ₯˜λ₯Ό ν”Όν•΄ ν”„λ‘œκ·Έλž¨ μ•ˆμ •μ„±μ„ 높인닀. = "ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°"


λ‹€μ–‘ν•œ ν•¨μˆ˜

  • μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜ : λ°˜λ“œμ‹œ ()둜 감싸야 ν•œλ‹€
(function () {
  console.log("μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜");
})();

  • μž¬κ·€ ν•¨μˆ˜ : 자기 μžμ‹ μ„ ν˜ΈμΆœν•˜λŠ” ν•¨μˆ˜

νŒ©ν† λ¦¬μ–Ό 예제
image


  • 쀑첩 ν•¨μˆ˜ : 쀑첩 ν•¨μˆ˜λŠ” μ™ΈλΆ€ ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œλ§Œ ν˜ΈμΆœν•  수 μžˆλ‹€.

    쀑첩 ν•¨μˆ˜ 예제!

function outer() {
  var x = 1;

  // 쀑첩 ν•¨μˆ˜ == λ‚΄λΆ€ ν•¨μˆ˜
  function inner() {
    var y = 2;

    // μ™ΈλΆ€ ν•¨μˆ˜μ˜ λ³€μˆ˜ μ°Έμ‘°
    console.log(x + y); // 3
  }

  inner();
}

outer();
  • 콜백 ν•¨μˆ˜ : ν•¨μˆ˜μ˜ νŒŒλΌλ―Έν„°λ₯Ό 톡해 λ‹€λ₯Έν•¨μˆ˜ 내뢀에 μ „λ‹¬λ˜λŠ” ν•¨μˆ˜
    • νŒŒλ¦¬λ―Έν„°λ‘œ ν•¨μˆ˜λ₯Ό 전달 받은 ν•¨μˆ˜ : κ³ μ°¨ ν•¨μˆ˜
    • μ½œλ°±ν•¨μˆ˜λŠ” κ³ μ°¨ ν•¨μˆ˜μ— μ˜ν•΄ 호좜됨
    • ν•¨μˆ˜λŠ” 일급 객체 μ΄λ―€λ‘œ ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜λ₯Ό 톡해 ν•¨μˆ˜λ₯Ό 전달 κ°€λŠ₯
    • ν•¨μˆ˜λŠ” 더 이상 λ‚΄λΆ€λ‘œμ§μ— κ°•λ ₯히 μ˜μ‘΄ν•˜μ§€ μ•Šκ³  μ™ΈλΆ€μ—μ„œ 둜직의 일뢀뢄을 ν•¨μˆ˜λ‘œ 전달받아 μˆ˜ν–‰ν•˜λ―€λ‘œ μœ μ—°ν•œ ꡬ쑰λ₯Ό κ°–λŠ”λ‹€.

콜백 ν•¨μˆ˜ 예제

// μ™ΈλΆ€μ—μ„œ 전달받은 func λ₯Ό n 만큼 반볡 호좜 - κ³ μ°¨ ν•¨μˆ˜ repeat
function repeat(n, f) {
  for (var i = 0; i < n; i++) {
    f(i);
  }
}

// 콜백 ν•¨μˆ˜ μ •μ˜ - logAll
var logAll = function (i) {
  console.log(i);
};

// 반볡 ν˜ΈμΆœν•  ν•¨μˆ˜λ₯Ό 인수둜 전달
repeat(5, logAll); // 0 1 2 3 4

// 콜백 ν•¨μˆ˜ μ •μ˜ - logOdd
var logOdd = function (i) {
  if (i % 2) console.log(i);
};

// 반볡 ν˜ΈμΆœν•  ν•¨μˆ˜λ₯Ό 인수둜 전달
repeat(5, logOdd); // 1 3