[멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] JavaScript (8)

Today I Learn : 2024-06-05

참고 ) https://ko.javascript.info/function-expressions

함수 표현식

 

# 함수 표현식 (Function Expression)

- 자바스크립트는 함수를 특별한 종류의 값으로 취급한다.

참고 ) first-class function (일급객체, 일급함수)
→ 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

- 함수를 생성하고 변수에 할당 → 함수는 값이기 때문에 변수에 할당 가능

예시 )

// 함수 선언(Function Declaration, 함수 선언문 방식)
function sayHi() {
  console.log('Hello!');
}

// 함수 표현식(Function Expression)
let sayHi = function() {
  console.log('Hello!');
}

function sayHi() {
  return 'Hello';
}

// (1) sayHi함수를 호출하여 그 값을 a변수에 할당
const a = sayHi(); // 'Hello'

// (2) sayHi함수 자체를 b변수에 할당
// b() 가능 => 자바스크립트는 함수를 특별한 종류의 값으로 취급
const b = sayHi; // function 본문

// (3) 위의 b를 풀어서 쓰면 아래와 같이 나옴
const c = function() {
  return 'Hello';
};

---

# 콜백함수 (Callback Function)

- 함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 나중에 호출(call back) 하는 것

- 콜백함수는 안에 있는 변수를 전달할 때 많이 사용 → 비동기통신에서 많이 사용

- 아래 예시에서 사용자가 'yes'라고 답한 경우 showOk 함수가 콜백된다.

- 사용자가 'no'라고 답한 경우 showCancle 함수가 콜백 된다.

function ask(question, yes, no) {
  // (1)
  console.log(question, yes, no);
  
  // (2)
  yes();
  no();
  
  // (3)
  if(question) {
    yes();
  } else {
    no();
  }
}

function showOk() {
  return 'Ok';
}
function showCancle() {
  return 'No';
}

// (4)
ask('동의하시겠습니까?', showOk, showCancle);
// (5)
ask(
  '동의하시겠습니까?',
  function() { return 'Ok' },
  function() { return 'No' }
);
// (6)
ask('동의하시겠습니까?', () => 'Ok', () => 'No');

참고 ) 익명함수(Anonymous Function)
→ 이름없이 선언한 함수
→ 익명함수는 변수에 할당된 게 아니기 때문에 ask 바깥에서는 접근할 수 없다.

(1) 동의하십니까? ƒ () { conosle.log('동의합니다.'); } ƒ () { console.log('취소 버튼을 누르셨습니다.') } 출력

(2) 동의합니다. 취소버튼을 누르셨습니다. 출력

(3) 동의합니다. 출력

(4) 콜백함수 사용

(5) 콜백함수에 익명함수 사용

(6) 콜백함수에 화살표함수 사용

---

# arguments 객체

- 함수에 전달 된 인수에 해당하는 배열 형태(유사 배열)의 객체이다.

- arguments  객체는 Symbol(Symbol.iterator) 이기 때문에 반복문을 사용할 수 있다.

- arguments 객체는 모든 함수 내에서 사용 가능한 지역  변수

예 ) 파라미터가 계속 많아지면 계속 추가해서 넣을 수 없으니 arguments를 이용

// (1)
let calculateTotal = function(a, b, c, d) {
  return a + b + c + d;
}

const result = calculateTotal(100, 200, 300, 400);
console.log(result);

// (2) arguments 객체 사용시
let calculateTotal = function() {
  return arguments;
}

const result = calculateTotal(1000, 5000, 2500, 4000, 2300);
console.log(result);

(2)의 결과 : 인수가 배열 형태로 나온다.

---