[드림코딩]자바스크립트 기초 정리 ③ 함수선언과 함수표현, Arrow Function 사용방법

 

function 함수의 정의 및 기능?

 

 

• function 함수는 sub-program이라고도 불린다.
• 프로그램 안에서 각각의 작은 단위의 기능들을 수행한다.
• 프로그램을 구성하는 매우 기본적인 블록이다.
• 함수는 여러 번 재사용이 가능하다
• 한 가지의 일 (하나의 함수엔 하나의 기능을!) 또는 어떤 것을 계산할 때 사용한다.
• 이름을 정하는 네이밍은 동사 형식으로 지정한다 (함수명을 보고 어떤 동작을 하는 함수인지 알 수 있게끔)
• 자바스크립트에서 함수는 오브젝트이다

 

 

Input(parameters)를 받아서 Output(return)하는 것이 함수이다.

API를 사용할 때 함수의 이름을 보고 대충 '이러한 동작을 하겠구나'라고 유추할 수 있고,

전달해야 하는 parameter의 값은 무엇인지, 어떠한 값이 리턴되길 기대할 수 있는지 이러한 인터페이스를 보고

예상이 가능하다

 

 

Parameters ?

매개변수라는 뜻으로, 함수나 메서드 정의할 때 나열되는 변수명을 뜻한다.

 

 

위의 코드에서

changeName은 전달된 obj 오브젝트의 name을 무조건 'coder'로 변경시키는 동작을 한다.

 

밑의 ellie라는 변수 안에 {name:ellie}의 객체가 있는데, 이 객체는 어떠한 레퍼런스에 저장이 된다.

그래서 변수 ellie는 {name:ellie}를 바로 직접적으로 참고하는 것이 아닌,

{name:ellie}라는 이 객체의 오브젝트가 만들어진 레퍼런스를 참고하게 된다.

 

그래서 바로 밑의 코드인 changeName(ellie)를 전달하게 되면, 전달된 ellie가 가리키고 있는 곳

( {name:ellie}가 들어있는 레퍼런스)의 name을 corder로 변경시킨다.

 

즉, 오브젝트는 레퍼런스로 전달되기 때문에 함수 안에서 오브젝트의 값을 변경하게 되면 그 변경된 사항이 그대로 메모리에 적용이 된다. 그리고 이렇게 변경된 사항들은 출력해서 확인이 가능하다

 

 

Default parameters ?

 

위에서 message에 출력될 값만 작성하고 from에 출력될 값을 넣지 않으면 from 자리는

콘솔창에 undefined로 나온다. 그래서 if문을 사용하여 from === undefined 면 unknown을

출력하도록 코드를 작성하였지만 ES6 버전부턴 다른 방식으로 사용이 가능하다

 

 

parameter 옆에 원하는 디폴트 값(= 'unknown')을 지정해놓으면 값이 없을 때 설정해놓은 디폴트 값으로 대체가 가능하다

 

 

return ?

 

위에 upgradeUser 함수 안에서 유저 포인트가 10 이상일 때만 업그레이드를 진행하는 로직이 있다고 가정해보자.

여기서 '~일 때에 ~한다'라고 작성하면, 블록 안에서 로직을 많이 작성하게 되어 가독성이 많이 떨어지게 된다.

따라서 이러한 경우엔 if, else를 번갈아 사용하는 것보단 밑에 좋은 예시처럼,

조건이 맞지 않을 때는 빨리 리턴을 해서 함수를 종료하고 조건이 맞을 때만 필요한 로직들을 쭉 실행하는 것이 효율적이다.

 

나중에 코드 작성할 때 '조건이 맞지 않는 경우, 값이 undefined인 경우, 값이 -1인 경우'에 빨리 리턴을 하고

필요한 로직들을 그 뒤에 작성하는 것이 효율적이다.

 

Function expression ?

fisrt-class function을 가능하게 한 것이 바로 function expression!

함수를 선언함과 동시에 변수에 할당해준다

 

 

function declaration(함수선언)과 function expression(함수표현식)의 가장 큰 차이점은

 

function expression 함수표현식은 할당된 다음부터 호출이 가능하고

 

function declaration 함수선언식은 호이스팅이 되어서 함수 선언 이전에 호출이 가능하다 (=var)

이는 자바스크립트 엔진이 선언된 것을 제일 위로 올려주기 때문이다.

 

 

callback

저번 포스팅에서 콜백 함수에 대해 작성했는데 다시 설명이 나왔다

인자(매개변수)로 대입되는 함수를 콜백 함수라 부른다

 

 

randomQuiz(정답, 정답 맞으면 호출하게 될 함수, 정답 틀리면 호출하게 될 함수)

 

즉, 두 가지의 callback function이 parameter(매개변수)로 전달되어서

answer이 정답인 경우엔 printYes()라는 콜백 함수를 호출, 아닌 경우엔 printNo()라는 콜백함수 호출한다.

밑에를 보면 printYes()에는 yes를 출력하는 함수를, printNo()에는 no를 출력하는 함수를 할당했다.

 

const printYes에 대입된 함수를 보면 function()에 이름이 없어서 anonymous function이다.

반대로 const printNo에 대입 된 함수는 print라는 이름을 갖고 있어서 named function이라고 한다.

 

이렇게 함수에 이름을 쓰는(named function) 이유는 디버깅을 할 때 스택트레이스에 함수의 이름이 나오도록

하기 위해서 사용한다

 

 

named function 사용 시, 함수 안에서 자기 자신을 호출할 수 있는데,

아래의 예시처럼 print 함수에서 자기 자신인 print()를 호출하면

옆에처럼 계속해서 출력이 돼버려서 이는 콜 스택을 꽉 차게 만들고 에러를 발생시킨다.

이렇게 자기 자신을 호출하는 경우는 피보나치수열을 사용하거나 반복문에서 꼭 필요한 경우에만 사용한다고 한다.

 

 

arrow function ?

 

애로우 함수는 항상 anonymous로 사용한다.

위의 function() {} 을 () => 화살표를 이용하여 매우 간편하게 줄여준다. (function, {}, return 생략가능)

 

const add = (a,b) ⇒ a+b; 를 function expression으로 바꾸게 되면

 

const add = function(a, b) {

return a+b;

};

 

로 작성해야 한다. 이렇게 한 줄일 경우에는 블록{}, return 없이 작성이 가능하지만,

함수 안에서 좀 더 다양한 일을 하기 위해 블록이 필요하다면 블록{}과 함께 return 생략을 못하기 때문에 return도 같이 작성해야 한다.

 

 

 

 

Ref

https://developer.mozilla.org/ko/

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