TIL15 - JavaScript Function

1. 함수 선언

• function name(param1, param2, ...) { code... return; }
• 하나의 함수는 하나의 기능만 선언
• 함수의 이름은 동사의 커맨드 또는 동사의 형태로 설정
• 함수는 JavaScript에서 객체

function printWelcome() {
  console.log('Welcome');
}

printWelcome(); // Welcome

좀 더 유연하게 만들려면

function log(message) {
  console.log(message);
}
log('log : Welcome!');

파라미터 값으로 message를 받아서 출력하는 함수로 만들 수 있다.

log(1234);
타입이 문자열이 아닌 정수를 입력할 경우 자바스크립트는 자동으로 문자열로 해석해서 출력한다. 만약에 코드가 타입에 민감하다면 난감한 경우가 발생할 수 있는데 이 때는 TS(타입스크립트)를 사용하는 것이 좋다.

2. Parameters(파라미터)

• premitive parameters(기본 데이터 타입) : Number와 String, Null, Undefined, Symbol, Boolean이 해당되고 메모리에 값이 그대로 전달됨
• object parameters : 메모리에 값이 아닌 주소가 저장됨

function changeName(obj) {
  obj.name = 'Tony';
}
const silvia = { name: 'silvia' };
changeName(silvia); // Tony
console.log(silvia); // silvia

default parameters

파라미터 변수를 제시해놓고 함수를 호출하였을 때 일부의 파라미터 값을 넣지 않았을 경우에 대신 표시될 기본값을 설정해 놓을 수 있다.

과거에는

function showMessage(message, from) {
  if (from === undefined) {
    from = unknown;
  }
  console.log(`${message} by ${from}`);
}
showMessage('Good Morning!');

if 조건문을 사용하여 값이 undefined일 경우 보여줄 값을 따로 보여줬는데
현재는 ES6에 새롭게 추가된 방법이 있다.

function showMessage(message, from = 'unknown') {
  console.log(`${message} by ${from}`);
}
showMessage('Good Morning!');

3. Local Scope

• 밖에서는 안을 볼 수 없고 안에서는 밖을 볼 수 없다.
• 즉, 밖에서 선언한 변수는 함수 안에서 접근이 가능하고 함수 안에서 선언한 변수는 밖에서 접근이 불가하다.

let globalMessage = 'global'; //global variable

function printMessage() {
  let message = 'Welcome!';
  console.log(message);
  console.log(globalMessage);

  function printAnother() {
    console.log(message);
    let childMessage = 'Hi';
  }
  printAnother();
  
  //ReferenceError: Can't find variable: childMessage
  console.log(childMessage);
}
printMessage();
// Welcome!
// global!
// Welcome!

//ReferenceError: Can't find variable: message
console.log(message);

4. Return

• 모든 함수는 암묵적으로 return undefined를 가지고 있다.

function sum(a, b) {
  return a + b;
}

const result = sum(1, 2);
console.log(`sum = ${result}`); // sum = 3

5. First-class function

• 함수가 변수에 저장이 된다.
• 다른 함수에 파라미터로 전달이 된다.
• return 값으로 리턴할 수 있다.

함수가 변수에 저장

const print = function () { 
  console.log('print');
};
print(); // print

const printAgain = print;

printAgain(); // print

const sumAgain = sum;
console.log(sumAgain(1, 3)); // 4

Callback function(콜백 함수)

Callback function이란 함수를 먼저 등록해놓고 어떤 조건이나 이벤트가 있을 때 그 조건이나 이벤트가 발생하면 호출하는 함수이다.

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

const printYes = function () {
  console.log('Ok!');
};

const printNo = function () {
  console.log('no!');
};
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

함수 호이스팅(hoisting)
밑에서 선언된 함수를 위쪽으로 끌어올리기 때문에 호출한 위치보다 함수가 나중에 선언되어도 정상적으로 동작한다.

6. Arrow Function

함수를 더 간단하게 표현할 수 있다.
지금까지 함수를 표현하려면

const simplePrint = function () {
  console.log('simplePrint');
};

이렇게 function이라는 키워드를 꼭 작성해야 했다.
하지만 Arrow Function으로 표현하면

const simplePrint = () => console.log('simplePrint');

function과 부등호를 빼버리고 저렇게 간단하게 만들 수 있어서 조금 더 간결한 코드 작성이 가능하다.

한 줄 작성

const introduce = () => console.log('Hello! My name is silvia!');
const add = (a, b) => a + b;

여러 줄 작성

const simpleMultiply = (a, b) => {
  
  // do something more ...
  // ...
  
  return a * b;
}