TIL 02 I JavaScript 함수

함수의 정의

함수란, 특정 작업을 수행하도록 정의해둔 로직을 의미한다. 함수를 정의해 두면 필요에 따라 호출하여 사용할 수 있으며, 인자를 전달받는 것도 가능하다.

함수는 기본적으로 Input 받기, 기능(함수) 수행, Output 반환이 있다.
아래 4가지 경우 모든 요소가 없어도 모두 함수로서 작용이 가능하다.

• Input, 함수, Output
• Input, 함수
• 함수, Output
• 함수

함수 선언 방식

함수 선언 방식은 3가지로 분류된다. 함수 선언식(function declaration 명시적 함수), 함수 표현식(function expression 익명 함수), function 생성자를 이용한 방법이 있다.

⚙️ function 생성자를 이용하는 방법은 거의 사용되지 않으니 나머지 2가지 방법을 알아보자.

// 함수 선언식 (Function Statements)
// 반드시 함수 이름이 명시되어야 하며, 함수 이름으로 함수를 호출한다.

function a() {
    console.log('Hello World')
}

a()

// 함수 표현식 (Function Expressions)
// 함수 리터럴로 생성한 함수를 변수에 할당하는 방법을 함수 표현식이라고 한다. 함수의 참조값이 'a'라는 변수로 저장된다.
// 

var a = function() {
    console.log('Hello World 2')
}

a()

함수 선언식과 표현식의 차이점은 호이스팅(hoisting)

• 함수 선언으로 선언된 함수는 호이스팅 되고, 함수가 정의되기 전에 함수를 호출할 수 있다. 함수 표현식은 호이스팅이 되지 않는다.

호이스팅(hoisting): 자바스크립트 엔진이 script 태그를 만나면 자바스크립트 파일을 먼저 쭉 읽으면서 선언된 변수와 함수를 메모리에 저장한다.

아래 코드를 예로 들면 먼저 변수 name과 sayName 함수(전체), sayHello 변수가 메모리에 저장되는 것이다. 이 과정이 끝나면 코드가 위에서 부터 차례대로 실행되는데 sayName() 함수의 경우 메모리에 저장되어 있기 때문에 문제없이 실행되지만 sayHello의 경우 아직 값이 할당되기 전이기 때문에 에러가 발생한다.

sayName(); // 'dongwhee'
sayHello() ; // 그런 함수 존재하지 않음

var name ='dongwhee';
function sayName(){ console.log('dongwhee') }
var sayHello = function(){ console.log('hello') };

• 함수 선언식은 호이스팅으로 인해 함수 선언하기 전에 함수가 실행되기 때문에 코드 구조를 엉성하게 만들 수 있어서 함수 표현식을 권장한다고 한다.
  (Google에서 만든 JavaScript 스타일 가이드에서는 함수 이름이 있는 함수 표현식을 제일 권장한다고 하니 참고하도록 하자.)

// bad
function foo() {
  // ...
}

// bad
const foo = function () {
  // ...
};

// good
// lexical name distinguished from the variable-referenced invocation(s)
const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
};

예시 참조 : Google JavaScript 스타일 가이드

return 값이 있는 함수

• 함수를 콘솔에 나타나게 하려면 함수 내에 console.log를 넣거나 별도로 console.log(함수())를 통해 실행시킬 수 있다.

function a(){
    let str = "return 값이 있는 함수가 실행되었습니다.";
    return str;
}
console.log(a());

• 아래와 예시와 같이 return 값을 변수에 따로 저장을 할 수도 있다.

function score() {
  let myScore = 5;
  return myScore;
}

let myScoreMultiple = myScore * 2;
console.log(myScoreMultiple) // 10

input이 있는 함수

• 매개변수를 갯수만큼 지정을 해줘야 오류 없이 함수가 실행된다. 함수의 매개변수는 undefined가 기본이다.

function multiply(a, b) {
  return a * b
}

multiply(5, 2)  // 10
multiply(5)     // NaN !

• 만약 매개변수가 2개인데 인수가 1개밖에 지정이 안 되었다면, 오류가 나야 정상이다. 하지만 이를 방지하기 위해 아래와 같이 매개변수 'b'의 기본값을 1 로 설정할 수 있다.

function multiply(a, b = 1) {
  return a*b
}

multiply(5, 2)          // 10
multiply(5)             // 5
multiply(5, undefined)  // 5

화살표 함수 (익명 함수)

• 화살표 함수는 ES6문법으로, function 키워드 사용해서 함수를 만든 것보다 간단히 함수를 표현할 수 있다.

// 일반 함수
let hi = function () { console.log("hi") }; // hi

// 화살표 함수
let hey = () => console.log("hey"); // hey