함수

이번에는 함수에 관하여 알아보겠습니다. 함수는, 특정 코드를 하나의 명령으로 실행 할 수 있게 해 주는 기능입니다.
우리가 이전에 연산자로 두 값의 합을 얻는 법을 배웠습니다. 한번 그 코드를 다시 봐볼까용?

const a = 3;
const b = 5;
const sum = a + b // 기댓값: 8
console.log(sum) // 출력값: 8

이 것을 한번 함수로 정의해 보겠습니다. 함수를 정의할 때에는 function이라는 키워드를 사용합니다. (ES6이상일 경우, 화살표함수를 사용할 수 있습니다) 아래와 같이 적어보세요

function add(a, b) {
  return a + b;
}
const sum = add(3, 5);
console.log(sum); // 출력값: 8

이런식으로 정의를 할 수 있습니다. 함수를 정의할 때에는 function이라는 키워드를 사용하며, 함수에서 어떤 값을 받아올지 정해주는 이를 파라미터라고 부릅니다.  위의 예제에서는 3과 5입니다. 함수 내부에서 return이라는 키워드를 사용하여 함수의 과제물을 제출할 수 있습니다. 추가적으로, return을 하게되면, 함수가 끝이 납니다. return아래에 만약에 코드가 있다면, 그 코드는 실행이 안됩니다. 한번 아래코드를 실행시켜 확인해 보세요.

function add(a, b) {
  return a + b;
  console.log("명령이 실행 되었나용?");
}
const sum = add(3, 5)

아래와 같이 실행시키면, 명령어가 실행되지 않는다는 것을 확인할 수 있습니다. 함수를 사용하면,  코드의 반복을 확실히 줄일 수 있습니다. 만약에, 우리가 100줄의 알고리즘을 1억번 반복시키려면, 우리는 100억줄의 코드를 써야합니다. 하지만, 우리가 함수를 이용하면, 말이 달라집니다. 방금 말했던 코드의 약 1억배나 줄어듭니다. 과연 어느 코드가 효율적일까요? 당연히 후자의 코드가 더 효율적입니다! 코드를 짤 때에는 최대한 반복적인 구조를 줄여야 효율적이고 최적화된 코드가 됩니다.  자, 이제 화살표 함수에 대해서 알아볼까요?

화살표함수

본 함수는 자바스크립트 버전 ES6(이하 ECMAScript2015)이상 만 사용 가능합니다
codesandbox를 사용하시는 분은이 강의를 그냥 들으시면 됩니다

화살표 함수는, 일반 함수와 같지만, 단지 정의 방식만 다릅니다. 정의하는 방식은 아래의 코드와 같은 형태입니다

const a = (a) => {
  // 코드
}

근데, 이 두가지 함수의 주요 차이점은 화사룦 함수에서 가르키는 this와 function에서 가르키는 this가 서로 다르다는 것입니다. 이는 나중에 함께 다뤄보도록 하죠