[TIL] JS : 함수를 사용하는 여러가지 방법

21년 08월 10일의 소회

오늘 너무 많은 것들을 머리에 욱여넣어서 사실 TIL에 뭘 써야할지 잘 모르겠다. 오늘 7일차 강의를 수강하려다가 Arrow function도 구조 분해도 그 외에 뭐 연산자들이나 다양한 문법들에 대해 그냥 스치듯 이렇게 자주 쓰네.. 이런 건가보다 하고 지나가려고 하니 점점 뭔가를 하면 할 수록 이게 맞나? 내가 알고 있는 게 맞나? 하는 생각을 하는 시간만 엄청나게 많아지고 막상 찾아보면 알고 있는 것과 동작은 다른 경우가 많고 그래서 한 번은 개념을 제대로 정립을 하고 가야겠구나 생각해서 오늘은 JS가 동작하는 것과 함수를 선언하는 방식들에 대해 총체적으로 공부를 했다.

사실 오늘 너무 피곤해서 코어타임 끝나면 일찍 자려고 했는데 너무 갑작스러운 고백이긴 하지만 프로그래밍 언어라는 게 너무 재밌다.. 컴퓨터 언어가 움직이고 동작하는 방식들이.. 알 때마다 너무 새롭고.. 재밌어서 결국 흥미에 이끌려 과몰입하고 마는 저는 아직까지 깨어서 TIL을 쓰고 있다는 것이죠.

그건 아닌데요.. 그게 그렇게 됐네요🤔

📝 함수를 선언하는 방식

1. 함수 선언

function name (parameter) {
    // action
    return value;
}

2. 함수 표현식

const printSomething = function () {
  console.log('love you');
};

우리가 보통 addEventListner를 통해서 어떤 동작을 할지 함수를 통해 알려줄 때도 함수 표현식을 사용하는 것이라고 할 수 있다.

button.addEventListner('click', function() { 
	alert('button is clicked!');
}

• 무기명 : Unnamed Function Expression
  자동으로 변수 이름을 함수 이름으로 할당받는다

const unnamed = function() {
  console.log('i don\'t have any name');
};

console.log(unnamed.name); // unnamed

• 기명 : Named Function Expression

const named = function lalalah() {
  console.log('i have a name');
};

console.log(named.name); // lalalah

물론 그렇다고 해서 외부에서 lalalah();이런 식으로 함수를 호출 할 수는 없다. 이유는 해당 변수 블록 안에 함수가 존재하는 것이기 때문인데, 그렇다면 뭐하러 함수에 이름을 주느냐 한다면? 일반적으로는 함수 내부에서 재귀 호출이라든가 함수 자체를 가리키기 위해서 사용된다고 할 수 있다.

👇 재귀 호출 예시로 해당 코드를 보면 된다.

let countdown = function(n) {
  console.log(n);
  if (n === 0) {
    console.log('end point!');
  } else {
    countdown(n - 1); // error point
  }
};

let newFunction = countdown;
countdown = null;
newFunction(10); // TypeError

만약, 위와 같이 무기명 함수인 경우 countdown에 null값을 주기 이전에 newFunction 이라는 변수에 countdown을 복사해주어 정상적으로 동작할 것이라고 예상되지만 실제로는 함수 내부에서 재귀 호출을 위해 변수의 이름 countdown을 통해 함수를 호출하고 있기 때문에 6번째 줄에서 에러가 발생하게 된다. 이러한 문제는,

let countdown = function printCountdown(n) {
  console.log(n);
  if (n === 0) {
    console.log('end point!');
  } else {
    printCountdown(n - 1); // 문제 X
  }
};

let newFunction = countdown;
countdown = null;
newFunction(10); // 정상적으로 동작

기명 함수로 표현하면 해결할 수 있다.

3. 즉시 실행 함수 : IIFE

Immediately Invoked Function Expression
일회성 함수로서 함수를 따로 호출하지 않고 코드가 읽히는 즉시 실행되며 단 한 번만 실행되기 때문에 함수에 이름을 준다고 해도 재사용을 할 수 없는 함수이다. 보통 IIFE는 한 번만 시행되면 되는 프로그램 초기화에 많이 활용이 된다고 한다.

function hello(userName) {
  console.log(`Hello, ${userName}!`);
} 

(function (userName) {
  console.log(`Hello, ${userName}!`);
})(); 

이런 형태로 함수 전체를 ()소괄호로 감싸주고 마지막에 Argument를 넣을 수 있는 ()를 한 번 더 써주는 형태로 작성하면 된다.

4. Arrow Function

코드의 간결성을 위해 함수를 작성하는 방법

const sigma = function(maxNumber) {
  let sum = 0;
  while (maxNumber > 0) {
    sum += maxNumber;
    maxNumber--;
  }
  return sum;
}

이렇게 작성된 코드를, Arrow Function으로 작성한다면

const sigma = (maxNumber) => {
  let sum = 0;
  while (maxNumber > 0) {
    sum += maxNumber;
    maxNumber--;
  }
  return sum;
}

이렇게 작성할 수 있다. 만약 파라미터가 하나라면 ()를 생략해줄 수도 있는데, 파라미터가 없거나 2개 이상이라면 무조건 소괄호가 필요하다. 또한 위 코드는 여러 라인으로 구성되어 무조건 함수의 내용을 {} 중괄호 안에 넣어주어야 하지만 한 줄 짜리의 코드에서는 생략할 수도 있다.

const getTwice = (number) => {
  return number * 2
};
const getTwice = (number) => return number * 2;
const getTwice = (number) => number * 2;
const getTwice = number => number * 2;

이런 식으로 이 네 가지 코드가 모두 같은 동작을 한다고 볼 수 있다.
다만, Arrow Function에서는 arguments 객체를 사용할 수 없다는 것을 유의해야 한다.