5주차 블로그 챌린지 -js

 

 

 

• 01 자바스크립트 함수가 실행되는 과정
  • 자바스크립트 코드의 실행 1
    • 자바스크립트 엔진은 코드가 없어도 실행 환경(실행 컨텍스트)을 초기화한다.
    • 스코프(scope)는 코드가 현재 실행되는 환경, 맥락(context)을 의미한다.
    • this 포인터, 스코프에 저장된 변수들, 스코프 체인 등이 환경에 포함된다.
    • this 포인터의 경우, 글로벌 스코프에서는 window를 가리킨다.
  • 자바스크립트 코드의 실행 2
    • 함수가 실행되면, 함수 스코프에 따라 환경이 만들어진다.
    • this, 함수 스코프의 변수들, 그리고 스코프 체인이 형성된다.
    • 스코프 체인을 따라 글로벌 환경에 도달한다
  • 자바스크립트 코드의 실행 3
    • 객체의 메서드의 경우, 메서드 환경의 this는 해당 객체를 가리키게 된다.
    • 하지만 this가 가리키는 것은 환경에 따라 변할 수 있다
  • 02 실행컨텍스트
    • 실행 컨텍스트 (Execution context)
      • 실행 컨텍스트 혹은 실행 맥락은, 자바스크립트 코드가 실행되는 환경.
      • 코드에서 참조하는 변수, 객체(함수 포함), this 등에 대한 레퍼런스가 있다.
      • 실행 컨텍스트는 전역에서 시작해, 함수가 호출될 때 스택에 쌓이게 된다
    • 실행 컨텍스트 스택
    • 전역 실행 컨텍스트, 함수 실행 컨텍스트
      • 자바스크립트가 실행될 때 전역 실행 컨텍스트(Global Execution Context)가만들어진다.
        • 함수가 실행될 때 함수 실행 컨텍스트(Function Execution Context)가 만들어진다
      • 빈 코드의 실행 컨텍스트
      • 함수의 실행 컨텍스트
  • 03 this가 가리키는 것
    • dynamic binding
      • 함수가 호출되는 상황은 4가지가 있다.
      • 함수 호출 - 함수를 직접 호출한다.
      • 메서드 호출 - 객체의 메서드를 호출한다.
      • 생성자 호출 - 생성자 함수를 호출한다.
      • 간접 호출 - call, apply 등으로 함수를 간접 호출한다.
      • 그 외 콜백 함수의 호출이 있다.
      • 콜백 함수는 특정 동작 이후 불려지는 함수이다.
      • 콜백 함수란 보통 다른 함수의 인자로 보내지는 함수를 의미한다.
      • 코드 예시 01)
        
        • 함수는 이렇듯 다양한 상황(환경)에서 호출될 수 있다.
        • 함수의 호출 환경에 따라 this는 동적으로 세팅된다.
        • 이렇게 this가 환경에 따라 바뀌는 것을 동적 바인딩(dynamic binding)이라 한다.
        • bind, apply, call 등으로 this가 가리키는 것을 조작할 수 있다
      • 코드 예시 02 )
        
        • f1은 화살표 함수로 호출 시 this는 함수가 생성된 환경을 가리키도록 고정된다.
        • f2는 일반 함수로 this는 함수를 호출된 환경을 가리키며 this는 동적으로 바뀔 수 있다.
        • f2는 객체의 메서드로 호출될 때 객체가 this로 할당된다
      • 코드 예시 03 )
        
        • 최상단 스코프의 실행 컨텍스트는 전역이다.
        • setTimeout으로 함수의 실행 환경을 바꾼다.
    • this 를 조작하는 경우
      • 예시 01 )
        • bind, call, apply 등의 함수로 this를 조작한다. • setTimeout은 함수 호출과는 다른 콜백 호출이다. • printName 메서드는 bind 함수를 이용해 this 변수가 o를 가리키도록 컨텍스트를 동적 바인딩한다
          
          
          
  • 04 화살표 함수와 일반 함수
    • 화살표함수 vs 일반함수
      • 화살표 함수의 this는 호출된 함수를 둘러싼 실행 컨텍스트를 가리킨다.
      • 일반 함수의 this는 새롭게 생성된 실행 컨텍스트를 가리킨다.
      • 코드 예시 01 )
        •  
        • f1()은 실행될 때 새로운 컨텍스트를 생성한다.
        • 이때 f1에 바인딩된 컨텍스트가 없으므로 this는 global을 가리킨다.
        • f2()는 함수 컨텍스트를 생성하며 this 변수는 부모의 컨텍스트를 가리킨다.따라서 this는 o가 된다
          • 화살표 함수의 this는 정해지면 바꿀 수 없다.
          • call, bind, apply를 사용해도 바뀌지 않는다.
          • setTimeout 등 this가 바뀌는 상황에서 유용하다.
• 05 자바스크립트 Closure
  • 함수는 일급 객체 ( first-class object )
    • 일급 객체란, 다른 변수처럼 대상을 다룰 수 있는 것을 말한다.
    • 자바스크립트에서 함수는 일급 객체이다.
    • 즉, 자바스크립트에서 함수는 변수처럼 다룰 수 있다
  • 클로저 ( closure )
    • 자바스크립트 클로저는, 함수의 일급 객체 성질을 이용한다.
    • 함수가 생성될 때, 함수 내부에서 사용되는 변수들이 외부에 존재하는 경우 그 변수들은함수의 스코프에 저장된다.
      • 함수와 함수가 사용하는 변수들을 저장한 공간을 클로저라 한다
      •  
      • base는 app 함수 내부, rate는 app 함수 외부의 스코프에 존재한다.
      • 함수가 참조하는 변수는 실행 시점에 실행 컨텍스트에 의해 스코프가 결정된다.
      •  
      • 스코프에 따라서 변수에 영향을 받는다.
      • rate의 변경은 두 클로저 함수 호출에 반영되지만, base는 증가해도 영향을 미치지 않는다.
      • base는 app 호출 시 매번 생성되는 반면, rate는 매번 생성되지 않는다.
• 06 ES6 Rest,Spread operator
  • Rest Operator
    • 함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용하도록 한다.
    • 함수의 인자 중 나머지를 가리킨다.
    • 배열의 나머지 인자를 가리킨다.
    • 객체의 나머지 필드를 가리킨다
  • 함수 인자 Rest Operator
    • 함수 인자 rest operator는, 인자들을
    • 배열로 묶는다.
    • rest에는 숫자들이 배열로 담긴다.
    • reduce 함수로 min 값을 리턴한다
  • 객체 Rest Operator
    • 객체의 rest operator는, 지정된 필드 외의나머지 필드를 객체로 묶는다.
      • age, name을 제외한 나머지 필드는, rest변수로 할당된다
        • 배열 Rest Operator
          • 배열의 rest operator는 나머지 인자를 다시 배열로 묶는다.
          • sumArray의 tail 변수는, 첫 번째 원소 head를 제외한 나머지 값들을 다시 배열로 묶는다.
          • tail은 하나씩 줄어들게 되며, 길이가 0이 되면 합을 반환한다.
        • Spread Operator
          • 묶인 배열 혹은 객체를 각각의 필드로 변환한다.
          • 객체는 또 다른 객체로의 spread를 지원한다.
          • 배열은 또 다른 배열의 인자, 함수의 인자로 spread를 지원한다
            • 객체 Spread Operator
              • spread operator의 등장 순서에 따라, 객체의 필드가 덮어씌워 질 수 있다.
              • • ...o 가 뒤에 등장하면, 기존의 name 필드가 나중에 등장하여 앞의 name: "Tom"을 덮어씌운다.
            • 배열 Spread operator
              • mergeObjects는 주어진 객체들의 필드를 합친다.
              • findMinInObject에서는 객체의 필드들 중 최소값을 반환한다.
              • Object.values는 객체 값들의 배열을 반환한다. • 배열 spread operator로, Math.min의 인자를 넘긴다.
                 
                ​

• #엘리스트랙 #엘리스트랙후기 #온라인코딩부트캠프 #온라인코딩학원 #백엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #DOCKER #백엔드 #자바스프링 #스프링강의 #백엔드인강 #RESTAPI #스프링개발자
•  
• 추천인 코드 : o6i4B3y95   :  앨리스트랙 참여 링크