JavaScript(1)

윤호성·2022년 3월 17일
0

JavaScript

목록 보기
1/2

2022. 03. 17. 목요일

브라우저(browser)와 JavaScript

웹 브라우저의 정의 : 웹 브라우저(Web Browser, 열람기)는 웹 서버에서 쌍방향 통신하는 HTML 문서나 파일과 연동하고 출력하는 응용 소프트웨어

초창기 웹 : 웹브라우저, 웹서버로 구성되며 HTML 문서를 주고 받았다.

웹은 HTML, CSS, JavaScript로 구성된다.

  • HTML : 정적인 언어로 웹의 구조를 담당한다.
  • CSS : 정적인 언어로 웹의 디자인를 담당한다.
  • JavaScript : 동적 언어로 웹의 제어를 담당한다.

이해한 것 : 웹은 browser를 통해 우리에게 전달된다. JavaScript는 Web Browser를 제어하여 일을 처리한다.

함수(function)와 스코프(scope)

함수(function) : 자신의 외부 코드가 호출할 수 있는 하위 프로그램

  • 명령문의 시퀀스로 구성된다.
  • 함수에 값(argument)를 주면, 함수는 값(return)을 반환한다.
  • JavaScript에서는 함수는 Function 객체(Object)로 property method를 지닌 first-class 객체이다.

스코프(Scope) : 범위를 의미, 정확히는 현재 실행되는 컨텍스트(Excution context)

실행 컨텍스트(Excution context) : 실행가능한 코드가 실행하는 환경

  • c언어에서는 stack 형태로 쌓이는데 이와 마찬가지로 JavaScript에서도 stack형태를 지니고 있다.
  • 하위 켄텍스트에서 상위 켄텍스트로 접근할 수 있지만, 상위 컨텍스트에서 하위 켄텍스트로 접근을 불가능하다.
  • 하위 켄텍스트에 변수가 없을 경우 상위 켄텍스트에 접근하여 변수를 찾는다. 이 순서는 스코프 체인에 맞추어 실행한다.

구성

  • 변수 객체 : Excution context에서 필요한 정보들을 배열 형태로 저장한다. ex) 인수 객체, 사용자 정의 변수 및 객체
  • 지역 변수 : 함수 내 정의 변수나 객체. 단, 초기화하지 않기에 undefined된다.
  • 스코프 체인 : List형태로 유효범위를 언급한다. 함수 호출이 아닌 함수 정의된 위치에서 상위 컨텍스트의 스코프 체인을 불러온 뒤 현재 실행범위 객체를 헤드에 추가한다.
  • this : 이 변수 객체의 this에 바인딩할 객체를 저장.

참조

클로저(closure)

클로저란 ?

: 상위 켄텍스트(context)에서 하위 켄텍스트(context)로 접근은 불가능하다. 이를 해결하기 위한 방식으로 사용하는 것이 클로저(closure)이다.

  1. 하위 컨텍스트(context)에서 함수 객체(function object)를 반환.
  2. 이를 상위 켄텍스트(context)에서 변수로 받아 접근한다.
  3. 이렇게 하면 함수 객체의 스코프 체인(scope chain)은 변수 켄텍스트 -> 하위 켄텍스트 -> 상위 켄텍스트로 이어진다.
  4. 상위 컨텍스트에서 하위 켄텍스트로 접근한 것처럼 사용할 수 있다.
function greeting() {
    let message = 'Hi';

    function sayHi() {
        console.log(message);
    }

    return sayHi;
}
let hi = greeting();
hi(); // Hi 출력

-> 실제로 message을 사용하지만 상위 켄텍스트에서 접근할 수는 없기에 클로저를 사용한 모습.

참조

profile
프론트엔드 개발자

0개의 댓글