다진 Javascript (9)

Kyle·2022년 6월 15일
JavaScript
0

Javascript

목록 보기
9/11
post-thumbnail

✔모던 자바스크립트 12장

참고 - https://poiemaweb.com/

함수

어떤 작업을 수행하기 위해 필요한 문들의 집합을 정의한 코드블록

  • 이름과 매개변수를 갖음
  • 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행할 수 있음
💡 동일한 작업을 반복적으로 수행해야한다면?
  • 동일한 구문을 계속 중복해서 작성하는 것이 아니라! 미리 정의된 함수를 재사용하는 것이 효율적이다.(코드의 재사용)

👀 함수의 일반적 기능

  • 코드의 재사용
  • 객체 생성
  • 객체의 행위 정의(메소드)
  • 정보은닉
  • 클로저
  • 모듈화

함수정의

  • 함수를 정의하는 방식의 3가지 함수 선언문/함수표현식/Function 생성자 함수
  • 함수 선언문 함수 선언문 방식으로 정의한 함수는 function키워드와 이하의 내용으로 구성

    함수명

    • 함수 몸체에서 자신을 재귀적 호출하거나 자바스크립트 디버거가 해당 함수를 구분할 수 있는 식별자
    • 함수 선언문의 경우 함수명 생략 불가

    매개변수 목록

    • 0개 이상의 목록으로 괄호로 감싸고 콤마로 분리
    • 매개변수 타입을 기술 하지 않는다는 것이 다른언어와의 차이점!
    • 함수 몸체 내에서 매개변수의 타입 체크가 필요할 수 있다.

    함수 몸체

    • 함수가 호출되었을 때 실행되는 문들의 집합
    • {}중괄호로 문을 감싼다.
    • return문으로 결과값 반환 → 반환값
    // 함수 선언문
function square(number) {
  return number * number;
}
  • 함수표현식 → 함수 리터럴 방식으로 함수를 정의하고 변수에 할당하는 방식 자바스크립트의 함수는 일급객체, 그러므로!

    1. 무명의 리터럴로 표현 가능

    2. 변수나 자료구조에 저장 가능

    3. 함수의 파라미터로 전달 가능

    4. 반환값으로 사용 가능

      // 함수 선언문으로 정의한 함수 square()을 함수표현식으로 정의
var square = function(number) {
  return number * number;
};

      → 함수 표현식에서는 함수명을 생략하는 것이 일반적(익명함수)

      // 기명 함수 표현식(named function expression)
var foo = function multiply(a, b) {
  return a * b;
};

// 익명 함수 표현식(anonymous function expression)
var bar = function(a, b) {
  return a * b;
};

console.log(foo(10, 5)); // 50
console.log(multiply(10, 5)); // Uncaught ReferenceError: multiply is not defined

      → 함수는 일급객체이기 떄문에 변수 할당 가능, 이 변수의 경우 함수명이 아니라 할당된 함수를 가리키는 참조값 저장

      → 함수 호출시 함수명이 아니라!! 함수를 가리키는 변수명 사용

      var foo = function(a, b) {
  return a * b;
};

var bar = foo;

console.log(foo(10, 10)); // 100
console.log(bar(10, 10)); // 100
      🚨 할당된 변수를 사용해 함수를 호출하지 않고 기명 함수의 함수명을 사용해 호출하게 되면?

      → 에러 발생

      → 함수표현식에서 사용한 함수명은 외부 코드에서 접근 불가능하기 때문

  • Function 생성자 함수 → 선언문과 함수 표현식을 리터럴 방식으로 함수를 정의할 때 이용하는 내장함수 [ function 생성자 함수로 함수를 생성하는 문법 ]
    new Function(arg1, arg2, ... argN, functionBody)
    var square = new Function('number', 'return number * number');
console.log(square(10)); // 100

함수 호이스팅

var res = square(5);

function square(number) {
  return number * number;
}

위 코드와 같이 함수 선언문으로 정의되기 전에 함수 호출 가능

  • 호이스팅이란?

→ 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성

  • 자바스크립트에서 할 수 있는 선언문 호출

let const var function class

var res = square(5); // TypeError: square is not a function

var square = function(number) {
  return number * number;
}

→ 함수 표현식으로 함수를 정의한 경우 TypeError 발생

→ 함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅 발생

변수 호이스팅은 변수 생성 및 초기화와 할당이 분리되어 진행
호이스팅된 변수는 undefined로 초기화 되고 실제값의 할당은 할당문에서 이루어짐

일급객체

→ 생성,대입,연산,인자 또는 반환값으로서의 전달 등 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상 의미

  • 일급객체로 간주하기 위한 조건
  1. 무명의 리터럴로 표현이 가능
  2. 변수나 자료구조(객체,배열 등)에 저장 가능
  3. 함수의 매개변수에 전달 가능
  4. 반환값으로 사용 가능
// 1. 무명의 리터럴로 표현이 가능하다.
// 2. 변수나 자료 구조에 저장할 수 있다.
var increase = function (num) {
  return ++num;
};

var decrease = function (num) {
  return --num;
};

var predicates = { increase, decrease };

// 3. 함수의 매개변수에 전달할 수 있다.
// 4. 반환값으로 사용할 수 있다.
function makeCounter(predicate) {
  var num = 0;

  return function () {
    num = predicate(num);
    return num;
  };
}

var increaser = makeCounter(predicates.increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

var decreaser = makeCounter(predicates.decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2
  • 자바 스크립트의 함수는 위의 조건을 모두 만족하므로 일급객체 !

매개변수(인자) vs 인수

매개변수는 함수 내에서 변수와 동일하게 메모리 공간을 확보하며 함수에 전달한 인수는 매개변수에 할당

인수를 전달하지 않으면 매개변수는 undefined로 초기화

var foo = function (p1, p2) {
  console.log(p1, p2);
};

foo(1); // 1 undefined

원시 타입 인수는 call-by-value로 동작한다.

→ 함수 호출 시 원시 타입 인수를 함수에 매개변수로 전달할 때 매개변수에 값을 복사하여 함수로 전달하는 방식

→ 함수내에서 매개변수를 통해 값이 변경되어도 전달이 완료된 원시 타입 값은 변경되지 않는다.

function foo(primitive) {
  primitive += 1;
  return primitive;
}

var x = 0;

console.log(foo(x)); // 1
console.log(x);      // 0

객체 타입 인수는 call-by-reference로 동작한다.

→ 함수 호출 시 참조 타입 인수를 함수에 매개변수로 전달할 때 매개변수에 값이 복사되지 않고 객체의 참조값이 매개변수에 저장되어 함수로 전달되는 방식

→ 함수 내에서 매개변수의 참조값이 이용하여 객체의 값을 변경했을 때 전달되어진 참조형의 인수값도 같이 변경

function changeVal(primitive, obj) {
  primitive += 100;
  obj.name = 'Kim';
  obj.gender = 'female';
}

var num = 100;
var obj = {
  name: 'Lee',
  gender: 'male'
};

console.log(num); // 100
console.log(obj); // Object {name: 'Lee', gender: 'male'}

changeVal(num, obj);

console.log(num); // 100
console.log(obj); // Object {name: 'Kim', gender: 'female'}

changeVal 함수는 원시 타입과 객체 타입 인수를 전달 받아 함수 몸체에서 매개변수의 값을 변경함

이때

원시타입 인수는 값을 복사하여 매개변수에 전달, 그 값을 변경하여도 부수효과 발생시키지 않음!

반면

객체형 인수는 참조값을 매개변수에 전달, 함수 몸체에서 그 값을 변경할 경우 원본 객체가 변경되는 부수효과 발생

💡 부수효과를 발생시키는 비 순수 함수는 복잡성을 증가시킴

비순수함수를 최대한 줄이는 것 = 부수효과 최대한 억제 = 디버깅 쉽게 함

반환값

함수는 자신을 호출한 코드에게 수행한 결과를 반환할 수 있음

  • return 키워드는 함수를 호출한 코드에게 값을 반환할 때 사용
  • 함수는 배열 등을 이용하여 한 번에 여러개의 값 리턴 가능
  • 함수는 반환을 생략할 수 있음 → 암묵적으로 함수는 undefined반환
  • 자바스크립트 해석기는return 키워드를 만나면 함수의 실행 중단, 함수를 호출한 코드로 되돌아감
  • return 키워드 이후에 다른 구문이 존재하면 그 구문은 실행되지 않음
function calculateArea(width, height) {
  var area = width * height;
  return area; // 단일 값의 반환
}
console.log(calculateArea(3, 5)); // 15
console.log(calculateArea(8, 5)); // 40

function getSize(width, height, depth) {
  var area = width * height;
  var volume = width * height * depth;
  return [area, volume]; // 복수 값의 반환
}

console.log('area is ' + getSize(3, 2, 3)[0]);   // area is 6
console.log('volume is ' + getSize(3, 2, 3)[1]); // volume is 18

함수 객체의 프로퍼티

  • arguments 프로퍼티 → arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회가능한 유사 배열 객체 → 함수 내부에서 지역변수처럼 사용된다.
    function multiply(x, y) {
  console.log(arguments);
  return x * y;
}

multiply();        // {}
multiply(1);       // { '0': 1 }
multiply(1, 2);    // { '0': 1, '1': 2 }
multiply(1, 2, 3); // { '0': 1, '1': 2, '2': 3 }
    → 런타임 시에 호출된 함수의 인자 갯수를 확인하고 이에 따라 동작을 달리 정의할 필요가 있을 수 있음 → arguments 객체는 매개변수 갯수가 확정되지 않은 가변인자 함수를 구현할 때 유용하게 사용
    function sum() {
  var res = 0;

  for (var i = 0; i < arguments.length; i++) {
    res += arguments[i];
  }

  return res;
}

console.log(sum());        // 0
console.log(sum(1, 2));    // 3
console.log(sum(1, 2, 3)); // 6
    → 함수를 호출할 때 인수들과 함께 암묵적으로 arguments 객체가 함수내부로 전달 → arguments객체는 배열의 형태로 인자값 정보를 담고 있지만 실제 배열이 아닌 유사배열 객체

    유사배열 객체란?

    • length 프로퍼티를 가진 객체
    • 배열이 아니기 때문에 배열 메소드를 사용한다면 에러 발생
    • Function.protorype.call, Function.prototype.apply를 사용해야함
  • caller 프로퍼티

    • 자신을 호출한 함수를 의미

      function foo(func) {
  var res = func();
  return res;
}

function bar() {
  return 'caller : ' + bar.caller;
}

console.log(foo(bar)); // caller : function foo(func) {...}
console.log(bar());    // null (browser에서의 실행 결과)
  • length 프로퍼티

    • 함수 정의 시 작성된 매개변수 갯수 의미

      function foo() {}
console.log(foo.length); // 0

function bar(x) {
  return x;
}
console.log(bar.length); // 1

function baz(x, y) {
  return x * y;
}
console.log(baz.length); // 2

      🚨arguments.length의 값과는 다를 수 있으므로 주의!

      → arguments.length는 함수 호출시 인자의 갯수

  • name 프로퍼티

    • 함수명을 나타냄

    • 기명함수의 경우 함수명을 값으로 받고 익명함수의 경우 빈 문자열을 값으로 가짐

      // 기명 함수 표현식(named function expression)
var namedFunc = function multiply(a, b) {
  return a * b;
};
// 익명 함수 표현식(anonymous function expression)
var anonymousFunc = function(a, b) {
  return a * b;
};

console.log(namedFunc.name);     // multiply
console.log(anonymousFunc.name); // ''
  • prototype 프로퍼티

    • 함수 객체만이 소유하는 프로퍼티 , 일반객체에는 없음

      // 함수 객체는 prototype 프로퍼티를 소유한다.
console.log(Object.getOwnPropertyDescriptor(function() {}, 'prototype'));
// {value: {…}, writable: true, enumerable: false, configurable: false}

// 일반 객체는 prototype 프로퍼티를 소유하지 않는다.
console.log(Object.getOwnPropertyDescriptor({}, 'prototype'));
// undefined
  • proto 접근자 프로퍼티

    • 내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티

    • 내부슬롯에는 직접 접근할 수 없고 간접적인 접근 방법을 제공하는 경우에 접근가능

    • 모든 객체는 상속을 통해 proto 접근자 프로퍼티 사용 가능

    • 함수도 객체이므로 접근 가능

      // 객체는 __proto__ 프로퍼티를 소유하지 않는다.
console.log(Object.getOwnPropertyDescriptor({}, '__proto__'));
// undefined

// __proto__ 프로퍼티는 모든 객체의 프로토타입 객체인 Object.prototype의 접근자 프로퍼티이다.
console.log(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__'));
// {get: ƒ, set: ƒ, enumerable: false, configurable: true}

// 모든 객체는 Object.prototype의 접근자 프로퍼티 __proto__를 상속받아 사용할 수 있다.
console.log({}.__proto__ === Object.prototype); // true

함수의 다양한 형태

  • 즉시 실행 함수

    • 함수의 정의와 동시에 실행되는 함수

    • 최초 한번만 호출되며 다시 호출할 수 없음

    • 최초 한번만 실행이 필요한 초기화 처리 등에 사용

      // 기명 즉시 실행 함수(named immediately-invoked function expression)
(function myFunction() {
  var a = 3;
  var b = 5;
  return a * b;
}());

// 익명 즉시 실행 함수(immediately-invoked function expression)
(function () {
  var a = 3;
  var b = 5;
  return a * b;
}());

// SyntaxError: Unexpected token (
// 함수선언문은 자바스크립트 엔진에 의해 함수 몸체를 닫는 중괄호 뒤에 ;가 자동 추가된다.
function () {
  // ...
}(); // => };();

// 따라서 즉시 실행 함수는 소괄호로 감싸준다.
(function () {
  // ...
}());

(function () {
  // ...
})();
  • 내부함수

    • 함수 내부에 정의된 함수

      function parent(param) {
  var parentVar = param;
  function child() {
    var childVar = 'lee';
    console.log(parentVar + ' ' + childVar); // Hello lee
  }
  child();
  console.log(parentVar + ' ' + childVar);
  // Uncaught ReferenceError: childVar is not defined
}
parent('Hello');

    • 위의 예시처럼 내부함수 (child)는 부모함수에 접근 가능, 반대로는 불가능

    • 내부함수는 부모함수의 외부에서 접근 불가능

  • 재귀함수
    • 자기자신을 호출하는 함수
    • 자신을 무한히 연쇄 호출하므로 호출을 멈출 수 있는 탈출조건을 반드시 만들어야 함
    • 탈출조건이 없는 경우! 함수가 무한 호출되어 에러 발생
  • 콜백함수

    • 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수

    • setTimeout()의 콜백함수를 살펴보자!

      setTimeout(function () {
  console.log('1초 후 출력된다.');
}, 1000);

      → 두번째 매개변수에 전달된 시간이 경과되면 첫번째 매개변수에 전달한 콜백함수 호출

→ 콜백함수는 주로 비동기식 처리모델에 사용

<aside>
💡 비동기식 처리 모델?

처리가 종료하면 호출될 함수(콜백함수)를 미리 매개변수에 전달, 처리가 종료되면 콜백함수 호출

</aside>
profile
Kyle
불편함을 고민하는 프론트엔드 개발자, 박민철입니다.
이전 포스트

다진 Javascript (8)

다음 포스트

다진 Javascript (10)

0개의 댓글