📚 드림코딩 by 엘리 JavaScript 정리 4. 함수의 선언과 표현

Function 

- 프로그램 기본 구성 요소

- 여러번 재사용 가능

- 작업을 수행하거나 값을 계산

 

함수는 입력 -> 연산 -> 출력 의 과정을 가지고 있다.

 

 

프로그램은 여러개의 function들로 구성되어있고 function 하나하나를 sub program이라고도 부른다.

 

1. 함수 선언

 

function 이름 (파라미터) {
body... 
return;
}

 

하나의 함수는 하나의 이름만 허용하고 동사 형태로 이름을 지정한다.

 

js에서 함수는 object이기 때문에 함수를 변수에 할당할 수도 있고 파라미터로 전달되어 함수를 return 할 수도 있다.

 

 

2. 파라미터 (매개 변수)

 

- 값으로 전달 (primitive parameters)

 

function changeName(obj) {
  obj.name = "coder";
}

 

- 참조로 전달 (object parameters)

 

const ellie = { name: "ellie" };
changeName(ellie);
console.log(ellie);

 

3. Default parameters

 

ES6에서 추가된 것으로 파라미터의 기본 값을 지정 해준다.

function showMessage(msg, from = "unknown") {
  console.log(`${msg} by ${from}`);
}

showMessage("hi!");

 

만약에 기본 값을 지정하지 않으면

 

function showMessage(msg, from) {
  console.log(`${msg} by ${from}`);
}

showMessage("hi!");

결과

undefined가 나오게 된다.

 

4. rest parameters

 

배열을 인자로 받을 때 유용하다.

 

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"); // > dream coding ellie 순서대로 출력

 

 

5. Local scope 

 

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

 

let globalMessage = "global"; // global 변수
function printMessage() {
  let message = "hello"; // local 변수
  console.log(message);
  console.log(globalMessage);
  function printAnother() {
    console.log(message); // 자식함수가 부모함수에 정의된 message 변수에 접근 가능한 것 -> 클로저
    let childMessage = "hello";
  }
}

printMessage();

 

6. return a value

 

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

// 근데 만약 function 에 return이 없다면 알아서 return undefined가 된다.

// 추가) early return , early exit (조기 리턴, 조기 종료)
// function 안에서 가독성있게 코드를 작성하려면 조건에 안맞을 때 바로바로 return 되도록 하는것이 좋다.

//bad
function upgradeUser(user) {
  if (user.point > 10) {
    // ...
  } else {
    return;
  }
}

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

 

 

First-class function

 

1. function expression

// print(); > 선언 전 호출했기 때문에 에러발생.
const print = function () {
  // 변수에 함수 할당
  console.log("print!");
};
print(); // > print!

const print2 = print;
print2(); // > print!

function sum(a, b) {
  return a + b;
}
const sum2 = sum; //이미 선언한 함수를 변수에 다시 할당 가능
console.log(sum2(1, 2)); // > 3

 

2. 함수 표현식을 사용한 callback 함수

function randomQuiz(answer, printYes, printNo) {
  if (answer === "love you") {
    printYes();
  } else {
    printNo();
  }
}

// 익명함수
const printYes = function () {
  console.log("yes!!");
};

// named function
const printNo = function print() {
  console.log("no~~");
};

randomQuiz("wrong", printYes, printNo); // 필요할 때 때에 맞춰 함수를 가져다가 사용해라..!! 뭐 그런!
randomQuiz("love you", printYes, printNo);

 

3. 화살표 함수

- 항상 익명함수이다

- 함수를 간단하게 만든다.

- 배열/리스트에 사용하기 좋다.

 

const simplePrint = () => console.log("simple~");

const add = (a, b) => a + b;

const simpleMultiply = (a, b) => {
  return a * b;
};