자바스크립트 중급 강좌 #11 클로저(Closure) 5분만에 이해하기

Поделиться
HTML-код
  • Опубликовано: 15 янв 2025

Комментарии • 53

  • @simon-kim-kr
    @simon-kim-kr 3 года назад +1

    그동안 수많은 설명을 봐도 감이 안왔는데 이 영상보고 바로 감잡았습니다... 대박

  • @_noname1406
    @_noname1406 2 года назад +2

    코딩앙마님 😈 고맙습니다 !! 기술면접용으로 어려운 개념들 이해없이 외우느라 힘들었는데 클로저를 5분만에 이해완 ! 했어요

  • @알상무팬클럽회장
    @알상무팬클럽회장 2 года назад

    며칠 간격을 두고 선수 학습 강의를 들었기 때문에 이해했다고 판단하고 들었다가 어제 쩔쩔 맸습니다. 선수학습 강의 다시 복습하고 들으니 이제야 이해가 되기 시작하네요. 강의 퀄리티 너무 좋습니다 감사합니다.

  • @srtktx
    @srtktx 8 месяцев назад +2

    - 전역 lexical 환경이 있고, 그 아래 외부 lexical 환경, 그 아래 내부 lexical 환경이라고 한다.
    - 함수가 실행되는 즉시 새로운 Lexcial 환경이 생긴다.
    - 이 때 클로저란? 함수와 렉시컬 환경의 조합으로, 함수가 생겨서 렉시컬 환경을 새로 팔 때, 그 외부의 lexical 환경을 기억해서 계속 접근할 수 있는 기능이다.
    (기억을 가지고, 꿈속의 꿈속의 꿈을 들어가는 느낌)
    외부 lexical 환경을 기억하기 때문에 함수 바깥의 변수도 참조할 수 있는 것이다.

  • @jj_ziemniak
    @jj_ziemniak Год назад

    설명이 어떻게 이렇게 깔끔할 수가 있죠....! 한 방에 이해하고 갑니다!

  • @백호-o9k
    @백호-o9k 3 года назад +1

    클로저가 왜 이름이 클로저인지 이제야 비로소 이해하겠습니다. 개념에 적합한 예제와 함께 '은닉화'를 짚어주시는 최고의 강좌입니다.!

  • @srtktx
    @srtktx 8 месяцев назад

    와 진짜 설명 잘하시네요..!!

  • @user-po8cq1ki7u
    @user-po8cq1ki7u 2 года назад

    너무 유익한 강의 감사합니다

  • @goosewild5936
    @goosewild5936 3 года назад

    감사드립니다. closure뿐만아니라.. 이해하기힘들었던 여러 난해한것들이 많이 이해되는 느낌입니다. 이런 자료들을 찾기가 너무힘드네요.. 감사합니다.

  • @masonpark8949
    @masonpark8949 3 года назад +1

    값진 5분

  • @LeeDavid-lee0000
    @LeeDavid-lee0000 7 месяцев назад

    감사합니다 선생님

  • @IIiIIllIil
    @IIiIIllIil 9 месяцев назад

    기술면접 준비하면서 봤는데 감사합니다

  • @instantcoffee1589
    @instantcoffee1589 3 года назад

    내 생에 가장 값진 5분이었다.

  • @b95-s2b
    @b95-s2b 4 года назад

    좋은 강의 정말 감사합니다!

  • @JAY_LAURENCE
    @JAY_LAURENCE 3 года назад

    return 이라는게 없어서 함수 외부에서 결과값을 끌어 올수 없다면 클로져는 존재할 수도 없겠네요. 함수 외부에서 끌어온 결과값은 결국 메모리에 할당이 될테고, 저장 된 상태로 존재하니 다시 함수 실행하면 저장된 결과를 기존 값에서 업데이트 하구요.

  • @사건의지평선-j3z
    @사건의지평선-j3z 2 года назад

    이 분 설명 대박! 왜 안뜨시는지 노이해

  • @healing2house
    @healing2house 4 года назад

    이론적인 설명이 필요했는데 너무 감사합니다!

  • @뚜꾸리-b8s
    @뚜꾸리-b8s 2 года назад

    어휘적 환경이라는 개념이 잘 안와닿았는데 이해가 잘되서 좋아요

  • @spk9090
    @spk9090 4 года назад +1

    최고에욘~!

  • @EunHo-g7d
    @EunHo-g7d 4 года назад

    정말 감사합니다.!! 왠지 커링하고 비슷한거 같아요!

  • @jiwonlee5418
    @jiwonlee5418 Год назад +1

    선생님 좋은 강의 감사합니다. 한가지 궁금한 것이 있는데요, 마지막 예제에서
    console.log(counter) 가 아니라 왜 console.log(counter()) 인가요? counter는 변수인데..ㅠ

    • @codingangma
      @codingangma  Год назад

      makeCounter() 가 반환하는 "함수" 가 counter 로 들어간거에요. 그래서 counter() 라고 해야 반환하는 num 값이 찍힙니다.

    • @jiwonlee5418
      @jiwonlee5418 Год назад

      @@codingangma 앗 감사합니다!!!

  • @rootelon
    @rootelon Год назад

    클로저는 화살표 함수로 구현해도 상관이 없나요?

  • @성원-o9z
    @성원-o9z 4 года назад +1

    좋은강의 감사합니다:) 2번째 예시에서 const add3 = makeAdder(3); 이 부분에 add3에서는 makeAdder(3)을 할당해주는데 왜 처음에 초기화가 안됐다고 표현하셨나요?

    • @codingangma
      @codingangma  4 года назад +1

      (실제로 이 코드는 동작하지 않지만,)
      1) const add3
      2) add3 = makeAdder(3)
      이렇게 두 단계로 나뉜다고 이해하시면 됩니다. makeAdder() 가 실행되기 전까지는 아무 것도 안 들어가 있다는 의미였습니다.

  • @m-falcon
    @m-falcon 3 года назад

    JS의 클래스는 Function과 closure의 syntactic sugar 라는 것을 이해하게 되었습니다. 이런 배경이 있었네요 😀

  • @dlgudwn00
    @dlgudwn00 2 года назад

    외부Lexical환경과 전역Lexical환경은 동일한 건가요?

    • @codingangma
      @codingangma  2 года назад

      어떤 함수의 외부 렉시컬 환경이 최상위라면 그건 곧 전역 렉시컬 환경을 뜻하는 겁니다.

    • @dlgudwn00
      @dlgudwn00 2 года назад

      @@codingangma 감사합니다 이해했습니다

  • @사랑-t7p
    @사랑-t7p 3 года назад

    선생님이 사용하시는 코드펜은 어떻게 설정할수 있나요 방법 좀 알려주세요.

    • @codingangma
      @codingangma  3 года назад +1

      Auto-Updating Preview: OFF
      Format on Save: ON
      입니다!
      추가로 전 Vim 모드로 사용하고 있어요.
      (codepen.io/settings/editor > Key Bindings)

    • @사랑-t7p
      @사랑-t7p 3 года назад

      @@codingangma 감사합니다

  • @han-hb1kw
    @han-hb1kw 3 года назад

    함수 선언문은 let 변수와 달리 (코드 처음부터) 바로 초기화 된다(함수표현식은 안된다.) 이렇게 이해했습니다.
    그럼 함수 표현식은 실제 함수표현식이 코드로 작성된 부분을 만나야 그제서야 '전역 렉시컬 환경'에 올라가서 초기화가 되는것인가요?
    그리고 '함수의 렉시컬 환경'이 생성되는건 '해당 함수가 호출되었을 때' 라고 이해했는데 맞나요?

    • @codingangma
      @codingangma  3 года назад +1

      네 맞습니다.
      ruclips.net/video/Zwaxqf1gsTg/видео.html
      이 영상 한번 보셔도 좋을것 같아요.

    • @han-hb1kw
      @han-hb1kw 3 года назад

      @@codingangma 넵. 항상 좋은 강의 해주셔서 감사합니다 :)

  • @dpffpself
    @dpffpself 3 года назад +3

    선생님 ㅠ.ㅠ 5:01에서 function make_counter(){
    let num = 0; //은닉화
    return function(){return num++;}
    }//make_counter
    const counter = make_counter();
    console.log(counter());//0

  • @ill-young
    @ill-young 3 года назад

    c언어의 static정적지역변수같네요

  • @roof102
    @roof102 2 года назад

    면접가서 개털리고와서 클로저 찾다왔습니다. 광명을 주십쇼.

    • @codingangma
      @codingangma  2 года назад

      광명을 찾을것 입니다. 믿으십시오!!!

  • @typescripter
    @typescripter 3 года назад

    좋은 강의 정말 감사합니다.
    질문 한가지 드리고 싶습니다 . 마지막 예제에서 클로저란 함수가 생성될 당시의 외부 변수를 기억한다고 해주셨는데 그러면 counter = makeCounter(); 이렇게 counter 라는 함수가 생성될 당시에는 외부변수 num 은 0 인데 그러면 11,12,13 번째줄의 counter() 모두 num 이 0 일테고 그러면 0 , 0, 0 이찍혀야하지 않나요?? 왜 0,1,2 가찍히는지 이해가안됩니다 ㅠㅠ

    • @codingangma
      @codingangma  3 года назад

      음.. counter 가 3개가 아니라 3번 실행한 형태입니다. 실행할때마다 1씩 증가 하는거죠.

    • @typescripter
      @typescripter 3 года назад

      @@codingangma 헐..맞네요.. ㅠㅠ감사합니당ㅋㅋㅋ

    • @codingangma
      @codingangma  3 года назад

      @@typescripter 만약 이렇게 작성했다면
      let counter1 = makeCounter();
      let counter2 = makeCounter();
      let counter3 = makeCounter();
      console.log(counter1()); // 0
      console.log(counter2()); // 0
      console.log(counter3()); // 0
      셋 다 0이 나오는게 맞습니다.

    • @typescripter
      @typescripter 3 года назад

      @@codingangma 맞습니다 ㅠㅠ 해보니깐 그러더라고요 친절한답변감사합니다!

    • @kmseo7293
      @kmseo7293 Год назад +1

      @@typescripter 안녕하세요!! JS배우고있는 초보 개발자예요. 아마 지금은 시간이 많이 흘러 엄청난 고수가 되셨겠지만, 다른 분들중에서도 이런 비슷한 질문을 속으로 생각하셨을분이 계실거라 여겨 도움이 될까 이렇게 답변 남겨봅니다!! 저도 지금 막 함수 등등 엄청나게 많은 지식들을 습득중이라 헷갈리는 부분들이 엄청 많더라고요.. ㅜㅜ
      아마 질문자님이 그 당시 여쭤보셨던 의도는 'counter는 makeCounter라는 함수를 매번 실행하는거라 늘 num값이 0부터 시작하는거 아닌가?' 라고 생각하신것같습니다.
      여기서 counter는 makeCounter라는 함수자체가 할당된게 아니라 makeCounter()가 할당된거라 makeCounter함수가 한번 실행돼서 리턴된 결과값인 익명함수가 할당되어 counter를 실행할때마다 num++이 진행되는것같습니다!!

  • @Alex-by4zm
    @Alex-by4zm 2 года назад

    함수가 생성되면서 만들어진 렉시컬 환경의 외부 변수에 계속 접근이 가능해지면서 이 함수 이외에는 따로 접근이 불가능해져서 은닉화된다..... 이렇게 이해하면 될까요? ㅎ

  • @태신-t9t
    @태신-t9t Год назад

    전역 렉시컬환경은 함수나 변수가 선언 됐을 때 생성되고
    그냥 렉시컬환경은 함수가 호출 됐을 때
    실행 컨텍스트가 만들어지고
    그걸 기반으로 렉시컬 환경이 생성된다고 알고 있는데
    호출이 아닌 변수에 할당이 됐을 때에도
    함수의 실행이라 보고 렉시컬 환경이 만들어지는건가요?
    함수를 변수에 할당하는 것은
    함수를 단순히 참조하는걸로 알고 있는데
    제가 잘못 이해를 한걸까요?

  • @리브올-o1k
    @리브올-o1k 10 месяцев назад

    선생님 질문있습니다.
    function makeCounter(){
    let num = 0;

    return function(){
    return num ++;
    };
    }
    let counter = makeCounter();
    console.log(counter());
    console.log(counter());
    console.log(counter());
    여기서 counter()를 실행할 때마다 내부 lexical 환경이 생성이 되는건가요?
    혹시 생성되지 않는다면,
    내부함수 return function(){...} 자체에 변수가 없기 때문에 내부 lexical환경이 생성되지 않는 건가요?