프라이D
프라이Develog(❁´◡`❁)
프라이D
전체 방문자
오늘
어제
  • ALL (378)
    • TDD, Cleancode with JavaScr.. (5)
    • 프로젝트 (32)
      • work (3)
      • 직접 만드는 기술 블로그 (2)
      • 데일리 옥션 (19)
      • 모락모락 (8)
    • Computer Science (1)
    • Algorithm & 자료구조 (94)
      • 알고리즘 w.JavaScript (53)
      • 자료구조 (5)
      • (인프런) 자바스크립트 알고리즘 문제풀이 (34)
    • JavaScript (45)
      • JavaScript (41)
      • 모던 자바스크립트 Deep Dive (4)
    • WEB (13)
    • 회고 (12)
    • TIL (109)
    • WIL (7)
    • Stacks (20)
      • React.js (6)
      • Next.js (1)
      • Redux (3)
      • Node.js (2)
      • GIT (2)
      • SAP (1)
    • 15일 메이킹 프로젝트 (15)
    • 이전 기록 (14)
    • ETC. (5)
    • ---------------2021 (6)
      • 내일배움단-웹개발 5주 (2)
      • 정보처리기사 (4)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

공지사항

인기 글

태그

  • 국비지원
  • 자바스크립트비트마스크
  • 2023 인프콘 후기
  • nomadcoder
  • 내일배움단
  • Til
  • 투포인터알고리즘
  • 스파르타코딩클럽
  • vanilaJS
  • 알고리즘
  • 내일배움카드
  • MySQL
  • 자바스크립트
  • nomadcoders
  • 모던자바스크립트딥다이브
  • 코드스테이츠
  • JavaScript
  • 코딩프로젝트
  • 자바스크립트알고리즘
  • 비트마스크

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
프라이D

프라이Develog(❁´◡`❁)

JavaScript/JavaScript

[JavaScript] 클로저와 커링 초간단 정리

2022. 7. 21. 18:05

클로저와 커링의 차이가 무엇일까?

클로저 함수 Closure

외부 함수의 변수에 접근 가능한 내부 함수. 내부함수를 리턴하는 외부함수가 존재할 때, 내부 함수에서 외부함수에 있는 변수를 조회하고 있으면 이런 현상을 클로저, 이런 함수를 클로저 함수라고 한다.

function outerFunc(num1, num2, num3) {
  return function (num2) {
    return function (num3) {
      return num1 * num2 * num3;
    };
  };
}

console.log(outerFunc(3)(5)(2));
// 30

커링 함수 Currying

함수 인자를 여러개 받는 대신에, 인자를 하나씩 분리하여 한 번에 한 인자를 받는 여러개의 함수로 만드는 것!

// 인자를 여러개 받는 함수
function outerFunc(num1, num2, num3) {
  return num1 * num2 * num3;
}

console.log(outerFunc(3, 5, 2));
// 30

위 함수는 num1,2,3 세 개의 인자를 받아 모든 값을 곱해 리턴하고 있다.

이 함수를 커링 함수 방식으로 변경하면 아래와 같다.

function outerFunc(num1) {
  return function (num2) {
    return function (num3) {
      return num1 * num2 * num3;
    };
  };
}

let res1 = outerFunc(3);
let res2 = res1(5);
let res3_1 = res2(2);
let res3_2 = res2(4);

console.log(res3_1, res3_2);
// 30 60

각각의 함수 실행 결과를 변수에 담고, 특정 고정값에 전달인자를 바꿔 호출할 수 있다. 

SUMMARY

커링과 클로저는 별개의 것이 아니고, 클로저 현상을 활용한 하나의 기술이다. 커링 함수를 사용하면 인자의 일부를 고정 값으로 두고 나머지 인자를 변화시켜 여러 값을 만들 수 있어서 유용하다!

저작자표시 (새창열림)

'JavaScript > JavaScript' 카테고리의 다른 글

[JavaScript] OOP in JavaScript : 생성자 함수, 클래스 문법  (0) 2022.07.22
[JavaScript] 객체지향 프로그래밍 : OOP란 무엇인가?  (0) 2022.07.22
[JavaScript] Promise  (0) 2022.07.18
[JavaScript] 동기와 비동기  (0) 2022.07.16
[JavaScript]DocumentFragment 와 HTML5 template 태그 사용  (0) 2022.07.14
    'JavaScript/JavaScript' 카테고리의 다른 글
    • [JavaScript] OOP in JavaScript : 생성자 함수, 클래스 문법
    • [JavaScript] 객체지향 프로그래밍 : OOP란 무엇인가?
    • [JavaScript] Promise
    • [JavaScript] 동기와 비동기
    프라이D
    프라이D
    틀린내용 정정 및 개선사항은 언제든지 댓글 달아주세요 :D

    티스토리툴바