[12. 함수] 모던 자바스크립트 Deep Dive 정리

자몽·2021년 11월 11일
1

JavaScript

목록 보기
19/25

12. 함수

function add(x,y){
  return x+y;
}
add(3,4);

매개 변수, Parameter(파라미터), 인자

모두 같은 뜻이다.
함수 선언에서 활용하기 위하여 사용하는 변수

인수, Argument

함수를 호출할 때 사용하는 것

표현식

값을 산출하는 구문

ex) 1+2, plus()

리터럴

값을 생성하기 위한 표기법
=> 사람이 이해할 수 있는 문자 또는 사전 정의된 기호를 사용해 값을 생성하는 방법

ex) 1, [1,2,3], function(){}

함수

함수 선언문

function add(x,y){
  return x+y;
}

위의 코드와 같이 함수 자체를 선언해주는 것을 함수 선언문이라고 한다.

특징:
함수 이름 생략이 불가능하고, 호이스팅에 영향을 받는다.

함수 표현식

const add = function(x,y){
  return x+y;
}

위의 코드와 같이 함수를 산출시키는 것을 함수 표현식이라고 한다.
여기서 function(x,y){...} 부분은 리터럴이라고 불리운다.

특징:
함수 이름 생략이 가능하며, 호이스팅의 영향을 받지 않는다.
또한, 클로져와 콜백으로도 사용이 가능하다.

조금 깊은 함수 지식

함수 선언문

호이스팅에 영향을 받음: 런타임 이전에 브라우저가 자바스크립트를 해석할 때, 최상단에 끌여올려진 것처럼 우선 실행이 된다.

add(1,2)

function add(x,y){
    return x+y;
}

코드 실행결과, 3이 나온다.
분명, 함수 선언 전에 함수 호출을 하였는데도 결과가 정상적으로 나옴을 확인할 수 있다.

함수 표현식

호이스팅에 영향을 받지 않음: 개념을 확실하게 하자면, const add = function(x,y){...}에서 변수 add는 호이스팅이 발생하지만, function 부분은 호이스팅이 되지 않는다.

동작 과정의 이해를 돕기 위해 var를 사용하겠다.

add(1,2) // error: add is not a function [case1]
console.log(add) // 'undefined' [case2]

var add = function(x,y){
    return x+y;
}

코드 실행 결과
case1은 함수가 아니라는 에러 메세지가 발생했고,
case2는 에러 없이 'undefined'를 출력했다.

이를 통해 알 수 있는 것은, add라는 변수 자체에는 호이스팅이 발생하지만, 뒤에 있는 함수는 이에 영향을 받지 않는다는 점이다.

클로져로 사용 가능: 내부 함수가 자신을 포함하고 있는 외부함수에 접근 가능한 클로져는 함수 표현식을 사용해 구현한다.

콜백 함수로 사용 가능:
콜백 함수란?
정의: 함수에 파라미터로 함수가 들어감.
용도: 순차적으로 실행하고 싶을 때 사용.

Q. 변수에 함수를 할당할 수 있는 이유는 무엇일까?

A. 함수는 객체에 속해있고, 일급 객체의 속성을 띄고 있기 때문이다.

일급 객체의 특징:

  • 변수나 데이터에 할당할 수 있어야 한다.
  • 객체의 인자로 넘길 수 있어야 함.
  • 객체의 리턴값으로 리턴할 수 있어야 함.

이처럼 일급 객체의 속성을 가지고 있는 함수는,
값처럼 자유롭게 사용이 가능해 변수에 함수를 할당할 수 있다.

Funtion 생성자 함수

객체를 생성하는 함수이다.
(생성자 함수로 함수를 생성하기보다, 객체를 생성하는 것이 바람직하다.)

화살표 함수

function 키워드 대신 =>를 사용하는 함수이며, 언제나 익명 함수이다.
ex) const add = (x,y)=>x+y;

일반적인 함수와 화살표 함수의 차이점:

  • this의 바인딩 방식이 다르다.
    lexical this라고 해서, 화살표 함수 내부에서의 this는 상위 스코프의 this를 그대로 참조한다.

  • prototype의 프로퍼티가 없다.
    화살표 함수는 인스턴스를 생성하지 않기 때문에 prototype 프로퍼티가 존재하지 않는다.
    이뿐만 아니라, 프로토타입도 생성하지 않는다는 특징이 있다.

  • argument 객체를 생성하지 않는다.

  • 중복된 매개변수 사용이 불가능하다.
    ex) (x,x)=>x+x 불가능

다양한 함수의 형태

순수 함수/ 비순수 함수

순수 함수는 함수형 프로그래밍의 기초로, 순수 함수를 사용하면 side effect(부작용)을 발생시키지 않는다.

순수 함수가 되는 조건은 다음과 같다.

  • 받은 인자만으로 결과물을 만들어야함.
  • 선언 시점과 외부의 영향을 받지 않아야 함.

즉시 실행 함수

(function(){...})()의 형태를 가지고 있는 함수
단 한번만 호출되며 재 호출이 불가능하다는 특징이 있다.

즉시 실행 함수를 사용하면, 내부 변수들이 전역 변수가 되지 않고 즉시 실행 함수의 지역 변수가 되기 때문에, 스코프를 제한시켜주는 장점이 있다.

재귀 함수, 중첩 함수, 콜백 함수

흔하기 때문에, 설명을 생략하겠다.

profile
꾸준하게 공부하기

0개의 댓글