JavaScript [day 7]

HiWoong·2022년 12월 20일
0

JsStudy

목록 보기
7/34

대부분의 내용은 모던 자바스크립트 Deep Dive에서 공부한 내용을 정리했습니다.


12장 : 함수

  • 함수란, 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.

// 함수 선언문
function multi(x, y) {
  return x * y;
}
multi(3, 4);

// 함수 표현식
const divi = function(a, b) {
  return a / b;
}
divi(15, 5);

함수의 구성요소

  • 매개변수(인자) : 함수 내부로 입력을 전달
    - 함수 내부에서만 참조할 수 있다.
  • 인수 : 입력
    - 값으로 평가될 수 있는 표현식이어야 한다.
    - 인수가 없으면 매개변수의 값은 undefined.
    - 매개변수보다 인수의 개수가 많으면, 초과된 인수는 무시.
    - 매개변수보다 인수의 개수가 적으면, 제대로 함수가 작동하지 않는다.
  • 반환값 : 출력

위의 예제로 예를 들면, 매개변수는 function munlti(x, y) , function(a, b)
인수는 함수 호출을 할 때 명시되는 multi(3, 4) , divi(15, 5)
반환값은 return x * y , return a / b 이다.
일반 객체와 함수는 모두 객체지만, 일반 객체는 호출할 수 없는 반면에 함수는 가능하다는 차이점이 있다.

console.log(abc(1, 3));	// 4
console.log(def(1, 3));	// TypeError

function abc(x, y) {
  return x + y;
}
var def = function(x, y) {
  return x - y;
}

또한, 함수 선언문과 함수 표현식의 다른 점은 호이스팅이다.
이전 게시물에도 호이스팅을 설명했으니 정의는 넘어가도록 한다.
함수 선언문도 변수 선언과 같이 런타임 이전에 호이스팅된다. 이 때, 함수와 변수 선언에도 차이가 있는데, var키워드로 선언된 변수는 undefined로 초기화되고, 함수 선언은 식별자가 생성되고 그 식별자는 함수 객체로 초기화된다. 그러므로 변수 선언문 이전에 변수를 참조하면 undefined가 나오지만, 함수 선언문으로 정의한 함수를 선언문 이전에 호출하는 것이 가능하다.
함수 표현식은, 변수가 선언과 초기화를 동시에 하는 것과 동일하다. 그러므로 식별자는 호이스팅되지만 함수 표현식의 함수 리터럴은 변수 초기화처럼 런타임에 평가된다.

  • 생성자 함수
var abc = new Function('a', 'b', 'return a % b');
console.log(abc(4, 2));	// 0

new 연산자와 함께 호출하면 함수 객체를 생성해서 반환한다.
사실 Function 생성자 함수는 클로저를 생성하지 않는 등, 선언문이나 표현식으로 생성한 함수와 다르게 작동하기 때문에 바람직하지 않다.

  • 화살표 함수
const abc = (a, b) => a + b;
console.log(abc(1, 2));	// 3

화살표 함수는 항상 익명 함수로 정의한다. 생성자 함수로 사용할 수 없으며 내부 동작 또한 간략화되어 있다.

function temp(num, obj) {
  num += 10;
  obj.name = 'Kim';
}
var x1 = 5;
var head = {name = 'Hwang'};

temp(x1, head);
console.log(x1);		// 5
console.log(head);		// 'Kim'

위 예제는 값에 의한 전달과 참조에 의한 전달을 표시한 것이다.
원시 값 x1은 값 자체가 복사되기 때문에 원본이 그대로 남아있고, 객체 head는 참조 값이 복사되어 전달되기 때문에 원본이 훼손된다.

  • 즉시 실행 함수
(function() {
  var a = 1;
  var b = 2;
  return a + b;
}());

함수의 정의와 동시에 실행되는 함수이다. 그룹 연산자의 피연산자는 값으로 평가되므로 함수를 ()로 감싸주어야 정상적으로 동작한다.

  • 재귀 함수
function factorial(n) {
  if (n < 1) return 1;
  return n * factorial(n-1);
}

재귀 함수를 쓰기로 유명한 팩토리얼 구하기이다. 이처럼 재귀 함수는 무한으로 자신을 호출하는데, 그렇기에 꼭 탈출 조건을 만들어놓아야한다.

  • 중첩 함수 : 함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라 한다. 중첩 함수를 포함한 함수는 외부 함수라 한다.

  • 콜백 함수 : 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
    매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수는 고차 함수라 한다.
    비동기 처리에 활용되는 중요한 패턴이다.

  • 순수 함수와 비순수 함수 : 부수 효과가 없는 함수를 순수 함수라 하고, 부수 효과가 있는 함수를 비순수 함수라 한다.
    즉, 순수 함수는 동일한 인수가 전달되면 언제나 동일한 값을 반환하지만, 비순수 함수는 외부 상태에 따라 달라진다.

profile
방갑습니다

0개의 댓글