드림코딩 - 자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현

자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 | 프론트엔드 개발자 입문편(JavaScript ES6)

 

 

-function

*JS에서 function은 object로 간주되어지기때문에 

function을 변수에 할당할 수도 있고

parameter로 전달이 되고,

함수를 return할 수도 있는 것

 

이전에도 말했지만

JS에서는 type이 없음

그래서 

function log(message) {

   console.log(message);

}

라고 작성했을 때 message에 어떤 data type을 사용해야 하는지 명확하지 않음

 

 

이 점을 보완하기 위한 것이 바로 TypeScript

타입스크립트를 쓰는 게 조금 더 명확하고 개발일을 더 쉽게 만들어줌

parameter의 datatype과 return값의 datatype을 명시해줄 수 있어서.

함수의 인터페이스만 봐도 무엇을 하는 아이인지

전달되어야 하는 파라미터와 그의 데이터타입, 어떤 값이 리턴되는지를 확실하게 확인하고 쓸 수 있기 때문!

왼: typescript / 오: JS

 

-parameters

primitive parameters : passed by value

object parameters : passed by reference

 

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

함수안에서 오브젝트의 값을 변경하게 되면

그 변경된 사항이 그대로 메모리에 적용이 되기 때문에

추후에 변경된 사항이 확인 가능함

 

 

-rest parameters

function a(...args) { }

...을 입력해주면 배열 형태로 전달이 됨 

 

 

-local scope

밖에서는 안이 보이지 않고

안에서만 밖을 볼 수 있다 

 

{ } 블럭 안에서 변수를 선언하면 지역변수임

안에서만 접근이 가능함!

블럭 안에 있는 변수, 즉 전역변수는

안에서도 접근할 수 있음

 

부모 function 안에 자식 function이 있다고 했을 때에도(중첩된 함수)

자식은 부모에게서 정의된 변수를 확인하고 출력할 수 있지만

자식 안에 정의된 변수를 부모상에서 보려고 한다면 에러가 발생함

이렇게 중첩된 함수에서 자식의 함수가 부모의 함수에 정의된 변수로 접근 가능한 것이 클로저임

이건 나중에 다시 정리할 예정

 

 

 

-return

return 타입이 없는 함수들은

return undefined; 가 들어가있는거랑 같은데 생략가능함

 

 

-early return

블럭 안에 로직을 많이 작성하면 가독성이 떨어짐..

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

조건이 맞을 때만 그 다음 스텝에서 필요한 로직들을 실행하게.

 

 

 

-function expression (함수표현식)

지난 시간에 언급한 first-class function의 특징은

프로그래밍 언어에서는 펑션도 다른 데이터타입처럼 변수에 할당이 가능하고,

그래서 함수의 파라미터, 인자로도 전달이 되고

함수에서 리턴 타입으로도 펑션을 리턴할 수 있는 것이 가능하다

인데,

이것이 가능하게 해주는 것이 function expression임

 

const print = function () { }

이렇게 function을 선언함과 동시에 print라는 변수에 할당함!

function의 이름이 없어도 펑션이라는 키워드를 이용해서 () 파라미터와 {} 블럭을 이용함

이렇게 이름없이 필요한 부분만 작성해서 변수에 할당할 수도 있음

함수를 생성하고 변수에 값을 할당하는 것처럼 함수가 변수에 할당하는 함수!

함수가 어떤 방식으로 만들어졌는지에 관계없이 함수는 값이고, 따라서 변수에 할당할 수 있습니다.

자바스크립트에서 함수는 값입니다. 따라서 함수를 값처럼 취급할 수 있습니다. 

이렇게 function expression은 할당된 다음부터 호출이 가능함

 

하지만, 반대로 function declaration(함수선언)은 hoisting이 됨

즉 선언되기 전에 호출해도 호출이 가능함.

선언된 것을 js가 제일 위로 올려버리기 때문

+)자세한 설명 추가 (모던자바스크립트튜토리얼)

함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있습니다.

따라서 전역 함수 선언문은 스크립트 어디에 있느냐에 상관없이 어디에서든 사용할 수 있습니다.

이게 가능한 이유는 자바스크립트의 내부 알고리즘 때문입니다. 자바스크립트는 스크립트를 실행하기 전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성합니다. 스크립트가 진짜 실행되기 전 "초기화 단계"에서 함수 선언 방식으로 정의한 함수가 생성되는 것이죠.

스크립트는 함수 선언문이 모두 처리된 이후에서야 실행됩니다. 따라서 스크립트 어디서든 함수 선언문으로 선언한 함수에 접근할 수 있는 것입니다.

단, 엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있습니다. 하지만 블록 밖에서는 함수에 접근하지 못합니다.

 

+) 참조

함수 표현식(function expression)은 function 문과 매우 비슷하고 구문(syntax)이 거의 같습니다 (자세한 사항은 function 문 참조).

함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로,

함수 표현식으로 익명 함수를 만들 경우 이 이름을 생략할 수 있습니다.(변수에 할당하니까 그러겠네 대신 해당 변수 바깥에선 접근 불가)

함수 표현식은 정의하자마자 실행되는  IIFE (즉시 호출되는 함수 표현식)로 사용될 수 있습니다. 

자바스크립트에서 함수 표현식은 함수 선언과는 달리 끌어올려지지 않습니다. 함수 표현식을 정의하기 전에는 사용할 수 없습니다.

함수 선언(function declaration)은 지정된 매개변수(parameter)를 갖는 함수를 정의합니다.

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function

함수 표현식

 

 

-callback hell...

printYes, printNo

이 2개의 콜백펑션들이 파라미터로 전달됨

함수를 함수의 파라미터로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이 콜백 함수의 개념입니다.

 

 

-arrow function

함수를 간결하게 만들어주는 아이

함수 이름이 없는 경우 사용할 수 있음

function이라는 키워드, 변수명, (한줄인 경우){} 블럭까지 모두 생략가능함.

 

혹시 조금 더 긴 과정이 필요하면

맨 마지막 경우처럼 할 수 있는데 대신 { } 을 쓰게 되면 return을 사용해야 함

인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다.

인수가 하나도 없을 땐 괄호를 비워놓으면 됩니다. 다만, 이 때 괄호는 생략할 수 없습니다.

 

 

 

최근에 많이 쓰지는 않지만,

-iife

선언함과 동시에 바로 호출