JavaScript (ES6) - 함수의 선언과 표현 ( Arrow Function )

글을 작성하기에 앞서 이 게시글의 지식은 유튜브 드림 코딩 by 엘리님의 동영상이 출처임을 알려드립니다.

https://www.youtube.com/watch?v=e_lU39U-5bQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=5

 

변수의 이름은 명사

함수의 이름은 동사로 작명하는 것이 기본적이다

(ex. do-something)

자바스크립트에서 Function은 Object이다.

 

 

Function의 예시

 

function printHello() {
  console.log('hello');
}
printHello();

 

위와 같은 function을 작성하게 되면 아래와 같은 'hello'가 출력이 된다

 

hello

 

하지만 위의 function은 매우 쓸 일이 없다 보통 아래와 같이 매개변수를 받아와서 function을 작성한다

 

 

function print(massage) {
  console.log('massage');
}
print('hello');

 

위의 코드는 print라는 function을 호출하여 message를 매개변수로 받아 출력하는 것이다

 

 

---

 

자바스크립트에서는 C 나 Java처럼 데이터의 타입이 존재하지 않는다

그래서 매개변수로 숫자로 받을 경우에는 숫자를 문자형으로 변환하여 문자로 출력이 되는데

하지만 타입스크립트에서는 데이터의 타입을 지정해 주어야 한다

데이터 타입을 지정해주는 타입스크립트가 더 좋은 (?) 이유는 함수의 인터페이스만 봐도

무엇을 하는 함수인지 한 눈에 알 수 있기 때문인 듯하다

​

아직 타입스크립트를 배우지 않았기 때문에 데이터를 지정해 주지 않고 코딩을 해보도록 하자!

( C언어만 3년을 공부한 나로서는 너무 적응이 되지 않는다 ㅋㅋ )

 

Default parameters

 

ES6에서 새로 추가되어진 기능이며 매개변수의 기본값을 설정해주는 기능이다

 

function showMessage(message, from){
  console.log(`${message} by ${from}`);
}
showMessage('Hi!');

 

위와 같이 매개변수로 message의 값은 받았지만 from의 값은 받지 않았을 경우에

 

 

Hi! by undefined

 

위와 같이 undefined 라는 값이 출력이 된다 하지만 매개변수의 값이 지정되지 않았을 경우 default 값을 지정해줄 수 있는데

 

 

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

 

위와 같이 default 값을 지정해놓았을 경우 unknown 이라는 값이 출력이 된다!

 

 

---

 

Function에 배열을 매개변수로 받기

 

function에서 매개변수를 배열로 받으려면

 

function printAll(...args) {
  for(let i = 0; i < arg.length; i++) {
    console.log(args[i]);
  }
}

printAll('A', 'B', 'C');

 

위와 같이 매개변수의 이름앞에 ... 을 붙여야한다고 배웠다

또 for 반복문을 다르게도 쓸 수 있다

 

 

for (const arg of args){
  console.log('arg');
}

 

위와같이 이렇게 of를 쓰거나 더 간편한 방법은

 

 

args.forEach((arg) => console.log(arg));

 

위와같이 forEach라는 함수형 언어를 이용해도 된다

​

셋 다 같은 기능을 하는 것 같은데 아직까지는 정석대로 for문을 사용하는 것이 더 편해서 많이 공부해야 할 것 같다

 

 

---

 

Early return, early exit

 

현업에서 자주 쓰이는 형식으로 코드의 가독성을 높이고 코드를 더욱 적게 쓰기 위해 쓰는 방식이다

 

function upgradeUser(user) {
  if(user.point > 10) {
    elseif ... else
  }
}

 

위와 같은 형식으로 작성할 경우 매개변수의 값이 if문의 10 보다 클 경우에 조건문을 실행하는 방식이고 아닐 경우

elseif .. else 까지 이어져서 로직이 길어지게 되는데 이렇게 하기보다는

 

 

function upgradeUser(user) {
  if(user.point <= 10) {
    return;
  }
  // long upgrade logic ...
}

 

위의 코드처럼 조건문을 만족하지 못할 경우 빨리 리턴을 하고 아닌 경우에만 조건문에서 벗어나

long upgrade logic 에서 조건이 실행이 되는 형식이다

 

 

---

 

Function expression

 

위에서 function을 선언한 것과 다르게 아래와 같이 선언을 할 수도 있다.

 

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

 

위와 같이 function 을 선언함과 동시에 print라는 변수에 할당을 하게 되면 print라는 이름으로 function을 호출할 수 있게 된다

위와 같이 function의 이름 없이 선언하는 것을 anonymous function 이라고하고 이름을 지정해서 선언하는 것을 named function 이라고 한다

​

또 print라는 변수를 다른 변수에 할당할 수도 있다

 

 

const printAgain = print;
printAgain();

 

이렇게 print 변수를 printAgain에 할당하게 되면 printAgain 변수가 ' print '를 출력하게 된다

​

(이해할 수 없는 이상한 자바스크립트 .... )

 

---

 

Callback

 

Callback 함수의 예

 

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

 

위와 같이 answer의 값을 받아서 'love you' 와 같다면 printYes를 , 다르면 printNo 라는 콜백 함수를 호출한다

randomQuiz 함수를 호출할 때 answer와 printYes, printNo 라는 콜백함수를 변수로 전달해야 하기 때문에 expression 두 개를 전달해야 한다

 

 

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

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

 

위의 코드처럼 printYes, printNo를 expression 으로 선언하여 randomQuiz 함수를 호출할 때 매개변수로서 호출이 된다

​

printYes는 anonymous function이고 이고

printNo는 named function인데 printNo는 print라고 함수의 이름이 있는 것을 확인할 수 있다

이것은 디버깅을 할 때 stack trace에 함수의 이름이 나오기 위함이라고 한다.

또는 재귀 함수로 호출할 때에 필요하다!

 

---

 

Arrow function

 

Arrow function은 항상 이름이 없는 anonymous function이다.

function expression을 간편하게 해주는 아이라고 알고 있으면 될 것 같다..!

​

​

이해가 쉽도록 위에서 선언했던 function expression을 가져와서 예시를 작성해보자

 

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

 

이렇게 작성되어있던 function expression을 아래와 같이 Arrow function으로 쉽게 작성할 수 있다.

 

const printYes = () => console.log('yes!');

 

짜잔...!

​

return을 해줘야 하는 function expression을 Arrow function으로 바꿔보는 코드도 작성해보자

​

 

const add = function (a, b) {
return a + b;
};

 

위의 코드는 add라는 이름의 function expression이며 매개변수로 a와 b를 받아 더해서 return 하는 것이다

이를 Arrow function으로 바꿔보자

 

 

const add = (a , b) => a + b;

 

쨔잔....!

​

함수 안에서 다른 일들이 필요해서 블록 { } 이 필요하다면

 

 

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

 

위와 같이 블록을 넣어서 처리할 수 있지만 대신 블럭을 사용하게 되면 return을 이용해서 값을 return 해줘야 한다!

​

​

이렇게 JavaScript의 함수의 선언과 표현을 알아보았는데 손에 익을 때까지 공부를 해야겠다

​