[자바스크립트] 5. 함수의 선언과 표현

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 

자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다.

 

함수

함수는 프로그래밍에서 중요한 역활을 합니다. 때로는 sub program이라고 불리기도 합니다.

 

- 프로그램을 구성하는 기번 빌딩 블록

- 재사용이 가능함

- 한가지 일 또는 계산을 진행함

 

1. 함수 정의(Function declaration)

// function name(param1, param2) { body... return; }
// one function === one thing
// naming: doSomething, command, verb
// e.g. createCardAndPoint -> createCard, createPoint
// function is object in JS
function printHello() {
  console.log('Hello');
}
printHello();

function log(message) {
  console.log(message);
}
log('Hello@');
log(1234);

- 함수 이름(파라미터) {함수 몸체} 순으로 작성이 됩니다.

- 선언된 함수는 각각 호출되어 지는 것을 확인할 수 있습니다.

- 타입스크립트의 경우는 파라미터와 반환 값에 대한 타입을 지정해줘야 합니다.

 

2. 파라미터(Parameters)

// primitive parameters: passed by value
// object parameters: passed by reference
function changeName(obj) {
  obj.name = 'coder';
}
const ellie = { name: 'ellie' };
changeName(ellie);
console.log(ellie);

- value 또는 reference 의 형식으로 전달이 됩니다.

 

디폴트 파라미터

// 3. Default parameters (added in ES6)
function showMessage(message, from = 'unknown') {
  console.log(`${message} by ${from}`);
}
showMessage('Hi!');

- 파라미터를 전달받지 않은 경우에는 디폴트 값이 적용이 됩니다.

 

Rest 파라미터

function printAll(...args) {
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }

  for (const arg of args) {
    console.log(arg);
  }

  args.forEach((arg) => console.log(arg));
}
printAll('dream', 'coding', 'ellie');

- 배열 형식으로 값을 받아야 하는 경우 ...args로 전달을 받습니다.

- 배열에 대한 출력 방식은 3가지가 있습니다.

 

3. 스코프

local scope

// 5. Local scope
let globalMessage = 'global'; // global variable
function printMessage() {
  let message = 'hello';
  console.log(message); // local variable
  console.log(globalMessage);
  function printAnother() {
    console.log(message);
    let childMessage = 'hello';
  }
  // console.log(childMessage); //error
}
printMessage();

- 지역 변수를 밖에서 접근이 되지 않고 에러가 발생합니다.

- 밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있습니다.

 

4. 값 반환

function sum(a, b) {
  return a + b;
}
const result = sum(1, 2); // 3
console.log(`sum: ${sum(1, 2)}`);

- 값을 리턴해 줍니다.

// bad
function upgradeUser(user) {
  if (user.point > 10) {
    // long upgrade logic...
  }
}

// good
function upgradeUser(user) {
  if (user.point <= 10) {
    return;
  }
  // long upgrade logic...
}

- 위 코드는 동일한 코드입니다.

 

- 그러나, 첫번째 코드는 조건이 맞는 경우 함수를 돌리는 경우이고

두번째 소스는 조건이 맞지 않는 경우 리턴 하고, 맞지 않으면 로직을 실행하는 경우입니다.

 

- 가독성 면에서 두번째 소스를 선택하는 것이 좋다고 합니다.

 

5. 함수 표현

아래와 같이 함수의 이름이 없는 것을 익명 함수라고 부릅니다.

const print = function () {
  // anonymous function
  console.log('print');
};
print();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1, 3));

 

6. 콜백 함수

// 2. Callback function using function expression
function randomQuiz(answer, printYes, printNo) {
  if (answer === 'love you') {
    printYes();
  } else {
    printNo();
  }
}
// anonymous function
const printYes = function () {
  console.log('yes!');
};

// named function
// better debugging in debugger's stack traces
// recursions
const printNo = function print() {
  console.log('no!');
};
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

- 함수를 전달받고, 원하면 함수를 전달하는 함수를 말합니다.

 

7. 화살표 함수

const simplePrint = () => console.log('simplePrint!');
const add = (a, b) => a + b;
const simpleMultiply = (a, b) => {
  // do something more
  return a * b;
};

- 함수를 정말 간단하게 표현할 수 있는 좋은 방법인거 같습니다.