2024/05 7

모던 자바스크립트 - 실행 컨텍스트(2)

실행 컨텍스트(1)에서 익힌 개념들을 가지고 구체적으로 예시를 통해 실행 컨텍스트가 어떻게 구현되는지 살펴보자 var x = 1;const y = 2;function foo (a) { var x = 3; const y = 4; function bar (b) { const z = 5; console.log(a + b + x + y + z); } bar(10);}foo(20); 1. 전역 객체가 생성된다. 우리가 알고 있는 window 객체가 생성된다. 이후에 나올 과정부터는 특정 실행 컨텍스트 동작 원리의 반복이다. 아래 과정을 명심하고 넘어가자.1. 실행 컨텍스트 생성2. 함수 렉시컬 환경 생성2-1. 함수 환경 레코드 생성2-2. this 바인딩2-3. ..

모던 자바스크립트 - 실행 컨텍스트(1)

1. 자바스크립트에서는 소스코드를 4가지 타입으로 구분하고 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정이 다르다. 2. 소스코드의 평가와 실행  예시로 아래 과정을 보자 var x; // 1. 소스코드의 평가과정에서 실행 컨택스트에 등록되는 정보x = 1; // 2. 소스코드의 실행과정에서 x를 실행컨택스트에서 찾아 1이라는 값을 할당한다.  3. 그래서 실행 컨텍스트가 뭔데?실행 컨텍스트: 식별자, 스코프를 렉시컬 환경으로 관리, 코드 실행 순서를 관리하는 실행 컨텍스트 스택으로 관리하는 것으로 소스코드를 실행하는 데 필요한 환경을 제공하고 관리하는 영역.   3-1. 실행 컨텍스트 스택이란코드 실행 순서를 관리한다. const x = 1;function foo() { const y = 2; ..

모던 자바스크립트 - 빌트인 객체

자바스크립트 객체는 크게 3가지로 분류된다.표준 빌트인 객체: ECMA Script 사양에 정의된 객체로 자바스크립트 실행환경과 무관하게 언제든지 전역 객체의 프로퍼티로서 사용가능.호스트 객체: ECMA script 사양에 정의되지 않지만 자바스크립트 환경(브라우저 또는 node.js 환경)에서 추가로 제공하는 객체를 말한다.사용자 정의 객체: 사용자가 직접 정의한 객체우리는 이 중에서도 표준 빌트인 객체를 살펴볼 것이다. 1. 표준 빌트인 객체Math, Reflect, Json을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있다. const numObj = new Number(123); // Number {123} 이렇게 생성된 인스턴스는 표준 빌트인 객체의 프로토타입 메서드를 사용할 수 있게..

모던 자바스크립트 - strict mode

1. strict mode는 ES5부터 도입 된 것으로 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. ES6부터 도입된 클래스와 모듈은 기본적으로 strict mode가 적용된다. 2. strict mode 왜 써야하나? 왜냐하면 자바스크립트 엔진은 암묵적으로 개발자가 원하지 않는 행위를 하는 경우가 존재함. 이런 행위를 막기 위해 명시적인 에러를 발생시킬 필요가 있다는 것이다.// 전역 객체에 x 프로퍼티를 동적으로 생성한다.function foo() { x = 10;}foo(); 3. strict mode를 사용하려면 아래처럼 전역의 선두 또는 함수 몸체의 선두에 'use strict'를..

모던자바스크립트 - 함수와 일급 객체

1. 일급 객체는 아래의 조건을 만족하는 객체를 일급 객체라고 한다.무명과 리터럴로 생성할 수 있다. 즉, 런타입에 생성이 가능하다.변수나 자료구조에 저장할 수 있다.함수의 매개변수에 전달할 수 있다.함수의 반환값으로 사용할 수 있다.// 1. 함수는 무명의 리터럴로 생성할 수 있다.// 2. 함수는 변수에 저장할 수 있다.const increase = function (num) { return ++num;};// 3. 함수는 매개변수에 함수를 전달할 수 있다.const increaser = makeCounter(increase);//4. 함수의 반환값으로 사용할 수 있다.const makeFunction = () => { return increase;} 함수가 일급객체라는 것은 함수를 객체와 동일하게..

모던자바스크립트 - 생성자 함수에 의한 객체 생성

Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다. const person = new Object();console.log(person) // {}person.name = '반원재'console.log(person) // {name: '반원재'}; 객체를 생성하는 방법은 객체 리터럴을 사용하는 것이 더 간편하기 때문에 Object 생성자 함수를 사용해 객체를 생성하는 방식은 그다지 유용해 보이지 않는다. 하지만 생성자 함수를 사용하면 프로퍼티 구조가 동일한 객체 여러개를 간편하게 생성할 수 있다. // 생성자 함수function Circle(radius) { this.radius = radius; this.getDiamet..

카테고리 없음 2024.05.06

모던 자바스크립트 - let, const 키워드와 블록 레벨 스코프

변수 선언 방법에는 크게 3가지가 존재한다1. var 변수 중복 선언 허용var x = 1;// 중복 선언이 가능하다.var x = 100; 변수를 중복 선언하면 var키워드가 없는 것처럼 행동하는데 만약 초기화문이 없다면 (var x;) 무시한다. 에러가 발생하지 않는다. -> 의도치 않은 변경을 만들어낼 수 있어서 좋지 않음.함수 레벨 스코프var 키워드로 선언한 변수는 함수 코드 블록만을 지역 스코프로 인정한다. 함수 외부에서 var키워드로 선언한 변수는 코드 블록 내에서 선언해도 전역변수 취급해버린다. 지역변수를 쓰려면 외부에서 선언되어 있으면 안된다는 말이다. var x = 1;// 함수가 아닌 단순 코드블록 내에서는 지역변수 취급을 안한다.if (true) { var x = 10;}consol..