TIL 13 | JavaScript function

Function??

• 함수란 프로그램을 구성하는 기본적인 building block이다.

• subprogram이라고도 불리우며 여러번 재사용이 가능하다.

• 특정 업무를 수행하거나 값을 계산한다.

How to use it?

• 1. 함수를 선언해준다. (함수 선언식, 함수 표현식)
• 2. 함수를 호출한다.(함수명())
• 2. 명사형을 쓰는 변수의 이름 지정과 달리, 함수의 경우 동적인 기능을 하기 때문에 동사형으로 이름을 지정하는 것이 좋다.
• 3. 한 가지의 함수는 한가지 기능을 하는 것이 좋다.

1. Function declaration(함수 선언식)

function sayHi1() {
  console.log(`hello yongmin`);
}
sayHi('hello yongmin') // hello yongmin

• 위 예제를 기준으로, function 키워드 이용, sayHi라는 이름을 부여, console.log()을 작성하였다.

• 이렇게 함수를 변수에 할당하지 않고 이름을 통해 작성하는 방법을 함수 선언식이라고 한다.

• sayHi()을 통해 함수를 호출하면 함수가 실행이 된다.

• 하지만 매개변수가 없으므로 해당 함수는 hello yongmin이라는 결과값만 출력하게 된다.

• 따라서 매개변수를 사용하여 다음과 같이 사용할 수 있다.

function sayHi2(hello) {
  console.log(hello);
}
sayHi('hello yongmin') // hello yongmin

• 기존 예제에 hello라는 매개변수를 지정하여 전달된 값에 따라 출력값이 변할 수 있도록 작성할 수있다.

  ✔ 매개변수란 함수에 투입되는 변수를 의미한다. 즉 투입 값에 따라 결과값이 달라지는데 이러한 인자를 뜻한다.

2. Function expression(함수 표현식)

const sayHi = function () {
  console.log(`hello yongmin`);
};
sayHi() // `hello yongmin`

• 함수를 선언하면서 변수에 할당하게 되는데, 이러한 함수 선언 방식을 함수 표현식이라 한다.

• 호출 방식은 sayHi() 처럼, 할당한 변수에 ()를 붙여 호출한다.

• 함수 선언식의 경우 var 변수처럼 선언 이전에 호출 시 에러가 뜨지 않지만, 함수 표현식의 경우 let, const 처럼 선언 이전에 호출할 경우 참조 오류가 발생한다. (호이스팅때문)

Callback fucntion using function expression

function askName(name, sayYes, sayNo) {
  if (name === 'yongmin') {
    sayYes(name);
  } else {
    sayNo(name);
  }
}
const sayYes = function (name1) {
  console.log(`hello ${name1}!`);
};
const sayNo = function (name2) {
  console.log(`hey ${name2}, who are you?`);
};
askName(`yongmin`, sayYes, sayNo); // hello yongmin!
askName(`smith`, sayYes, sayNo); // hey smith, who are you?

• function expression으로 표현된 함수들은, 매개변수 인자로 전달될 수 있다.
• 인자로 전달할 때는 호출과 달리 ()소괄호 없이 전달해야 한다.

Arrow function

const sayHi = function () {
  console.log(hi);
};
sayHi() // hi

	⬇

const sayHi = () => console.log(hi);
sayHi() // hi

✔ 동일한 함수이다.

• arrow function 은 기존 함수의 선언 구문을 비교적 간단하게 나타낼 수 있다.
  (function 키워드 제외, 블록{} 제외)

• anonymous function, 즉 함수 표현식의 이름이 없는 함수에게만 적용이 가능하다.

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

	⬇

const add = (a, b) => a + b;
const result = add(1, 2);
console.log(result); // 3

• 위처럼 덧셈을 하는 함수의 경우도 더욱 간결하게 코드를 작성할 수 있다.

• 단 코드가 한줄로서 간단할 경우 {} 블록 을 사용하지 않고 작성해도 되지만, 필요할 경우 return 값을 꼭 표기해주어야 한다.

const add = (a, b) => {
  return a + b
};
const result = add(1, 2);
console.log(result); // 3

✔ {}블록 을 사용 했을 때, return을 사용한다!!!!