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

Function

-fundamental building in the program

: function은 프로그램을 구성하는 굉장히 기본적인 빌딩 블럭.

-subprogram can be used multiple times

:서브프로그램이라고도 불리며 여러번 재사용이 가능함.

-perform a task or calculates a value

:한 가지의 take나 어떠한 값을 계산하기 위해 쓰여짐.

 

 

 

1.Function declaration

-function name(param1, param2) {body... return;}

: function 키워드를 써준 후, name 이름을 지정하고, (파라미터들을 쭉 나열) {

함수안에 기본적인 비지니스 로직을 작성한 다음 리턴}

-one function === one thing

:하나의 함수는 한 가지의 일만 하도록 만들어야함.

-naming: doSomething, command, verb

:함수는 동사의 형태로 이름을 지정해야함.

-e.g. createCardAndPoint -> createCard, createPoint

:createCardAndPoint이런식으로 너무 많은 일을 하는 함수보다는

카드, 포인트를 각각 나워서 함수를 만드는 것이 좋음.

-function is object in JS

:JS에서는 function은 object라서 변수에 할당 가능, 파라미터 전달 가능, 리턴 가능함.

 

function printHello() {

 키워드   이름설정(파라미터인데 하나도 받지 않음)

    console.log('Hello');

     콘솔에 Hello를 출력.

}

printHello();

  함수 호출

 

 

위에 함수는 Hello만 호출할 수 있기때문에 쓰임이 용이하지 않음.

그래서 이렇게 파라미터에 message를 입력하고

log함수를 호출해서 원하는 메시지를 ( )에 입력하여 출력할 수 있음.

 

 

JS는 타입이 없기때문에 함수 자체의 인터페이스만 봤을때

문자열을 전달해야하는지, 숫자를 전달해야하는지 명확하지 않음.

숫자가 문자열로 변환되어 로그가 출력되기도 하지만

타입이 중요한 경우에는 난해할 수 있음.

 

그럴때 사용하는 것이 TypeScript.

이렇게 기존 함수식을 쓰게되면 타입이 없다고

에러 메시지가 뜨게 됨.

 

 

파라미터 뒤에 :를 붙이고 타입을 설정하면 에러가 없어짐.

 

 

이렇게 리턴 타입도 설정할 수 있음.

 

 

규모있는 프로젝트를 하거나, 현업에서 다양한 개발자들과 일을 하거나,

우리가 작성한것을 나중에 라이브러리 형태로 API로 제공해야할 때

타임 스트립트를 사용하는게 명확하고 개발일을 더 쉽게 만들어 줌.

 

 

 

2.Parameters

-premitive parameters: passed by value

:premitive타입은 메모리에 value가 그대로 저장되어 있기 때문에 그대로 전달.

-object parameters: passed by reference

:object타입은 메모리에 reference가 저장되어져 reference가 전달됨.

 

전달된 오브젝트에 이름을 'coder'로 무조건 변경하는 함수임.

ellie라는 const를 정의한 후에 ellie라는 오브젝트를 만들어서 할당해주면

메모리에는 오브젝트가 만들어진 레퍼런스가 들어가게 됨.

이 레퍼런스는 ellie의 오브젝트를 메모리 어딘가에 가리키고 있음.

changeName(ellie)를 전달하게 되면 ellie.name을 'coder'로 변경을 하게 됨.

그래서 console.log(ellie)로 출력하게 되면 위 그림과 같이 coder로 출력된걸 볼 수있음.

 

오브젝트는 레퍼런스로 전달되기 때문에 함수 안에서

오브젝트의 값을 변경하게 되면 그 변경된 사항이

그대로 메모리에 적용됨. 

 

 

 

3.Default parameters (added in ES6)

showMessage(message, from)이렇게 파라미터에 두 개가 정의 되어있는데

showMessage('Hi!')에서는 하나만 메세지만 전달 되어 

콘솔에 undefined로 나옴.

 

이렇게 =' '를 이용하여 디폴트 값을 주면

파라미터가 정의 되지 않았을때 설정한 값을 출력하게 됨.

 

 

 

 

4.Rest parameters (added in ES6)

...처럼 .을 세 개를 작성하게 되면 Rest parameters로 불림.

배열 형태로 전달됨.

 

 

for (___ of ___)라는 문법으로 간단하게 출력할수도 있음.

 

 

forEach라는 더 간단한 배열식도 있음. 

 

 

5.Local scope

{ }블럭 안에있는 것은 지역변수라서 밖에서 출력하게 되면 에러가 발생함.

반면, 블럭 안에서는 글로벌 변수를 출력할 수 있음.

 

 

비슷한 원리로 부모 안에있는 자식 함수는 부모 메시지를 출력하지만

부모 함수에서 자식 메시지를 출력하면 위와 같이 에러가 발생함.

 

 

 

6.Return a value

함수에서는 파라미터에서 값을 전달받아서 계산된 값을 리턴할 수 있음.

 

 

7.Early return, early exist

-bad

유저 포인트가 10 이상일때만 유저업그레이드를 진행하라는 코드를

위와 같이 쓰게 되면 가독성이 떨어짐.

 

-good

 리턴을 사용해서 조건이 맞지 않을때 리턴을 해서 함수를 종료하고

조건이 맞을때만 필요한 로직을 실행하는 것이 더 좋음.

 

 

 

First-class function

-functions are treated any other variable

-can be assigned as a value to variable

-can be passed as an argument to other function

-can be returned by another function

:function은 다른 변수와 마찬가지로 변수에 할당이 되고

function에 파라미터로 전달이 되며, 리턴값에 리턴이 된다.

 

 

1.Function expression

-a function declaration can be called earlier than it is defiend.(hoisted)

-a function eapression is created when the execution reaches it

 

 

function에 이름이 없는 것을 anonymous function이라고 함.

 

 

여러가지의 호출 방법.

 

function eapression과 function declaration의 가장 큰 차이점.

function eapression은 할당된 다음부터 호출이 가능.

하지만

function declaration은 함수가 선언되기 전에 호출해도 호출이 가능.(hoisted)

 

 

 

2.Callback function using function expression

정답과 정답일때 호출할 함수, 틀릴때 호출할 함수를 전달.

상황에 맞게 파라미터를 전달하는 것을 Callback function이라고 함.

 

 

printYes와 printNo의 함수를 작성하고

randomQuiz('wrong', printYes, printNo);

randomQuiz('love you', printYes, printNo);

이렇게 랜덤퀴즈를 호출.

(호출 할때 첫번째는 answer, 두번째, 세번째는printYes, printNo를 호출)

 

printYes는anonymous function

printNo는 named function.

이름이 있는 함수는 디버깅을 할 때 함수이름이 나오기 위해 쓰는 것.

또는 함수 안에서 자신 스스로 또 다른 함수를 호출할 때 사용함.

 

 

 

Arrow function

-always anonymous

:함수를 간결하게 만들어 줌.

 

simplePrint함수를 arrow function으로 간결하게 바꿀 수 있음.

 

리턴 함수도 이렇게 간결하게 바꿀 수 있음.

 

함수 안에 다양한 일을 할 때 { }을 사용할 수 있음.

대신 { }사용 하려면 return을 넣어 줘야 함.

 

 

IIFE: Immediately Invoked Function Expression

선언함과 동시에 호출을 할 때.

함수를 ()로 묶고 뒤에 ();로 호출.

*최근에는 잘 쓰지는 않음.