프로그래밍/JavaScript 16

[모딥다] JS (13) - 실행 컨텍스트

소스코드의 타입: ECMAScript 사양은 소스코드를 4가지 타입으로 구분함, 4가지 타입의 소스코드는 실행 컨텍스트를 생성함.1) 전역 코드 : 전역에 존재하는 소스코드를 말함. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함하지 않음2) 함수 코드 : 함수 내부에 존재하는 소스코드를 말함. 함수 내부에 중첩된 함수. 클래스 등의 내부 코드는 포함되지 않는다.3) eval 코드 : 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드를 말함.4) 모듈 코드 : 모듈 내부에 존재하는 소스코드를 말함. 모듈 내부의 함수, 클래스 등의 내부 코드는 포함하지 않음. 소스코드 타입 분리 이유: 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다름1) 전역 코드 : 전역 ..

[모딥다] JS (12) - this

1. this 키워드: this 란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. : this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. : this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정됨.* this 바인딩 : 바인딩이란 식별자와 값을 연결하는 과정을 의미, 예를 들어 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩 하는 것. 2. this 예시 // 생성자 함수function Circle(radius) { // this 는 생성자 함수가 생성할 인스턴스를 가리킴 this.radius = radius; } Circle.prototype.getDiamet..

[모딥다] JS (11) - 빌트인 객체

1. 자바스크립트 객체의 분류 1) 표준 빌트인 객체   - ECMAScript 사양에 정의된 객체를 말함. 애플리케이션 전역의 공통 기능을 제공함  - ECMAScript 사양에 정의된 객체이므로 자바스크립트 실행 환경과 관계 없이 언제나 사용 할 수 있음.  - 전역 객체의 프로퍼티로서 제공되며 따라서 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다. 2) 호스트 객체  - ECMAScript에 정의 되어 있진 않지만 자바스크립트 실행 환경에서 추가로 제공되는 객체를 말함  - 브라우저 환경에서는 DOM , BOM , Canvas , XMLHttpRequest, fetch , SVG , WebStorage , Web Component , Web Worker와 같은 클라이언트 사이드 Web AP..

[모딥다] JS (10) - strict mode

1. 암묵적 전역: 변수의 선언이 존재하지 않지만 자바스크립트 엔진이 암묵적으로 전역 객체에 프로퍼티를 동적 생성하는 것: 아래처럼 x는 선언되지 않았기 때문에 foo 스코프를 넘어 전역 스코프로 넘어갔을 때도 x 변수는 선언이 되지 않아 Referrence Error가 떠야할 것 같지만 그렇지 않고 전역객체에 암묵적으로 x 프로퍼티를 동적 생성함.: 그래서 꼭 var , let ,const 키워드를 사용하여 변수를 선언한 다음 사용해야 한다. function foo() { x = 10; } foo(); console.log(x); 2. strict mode: 그럼에도 불구하고 오타나 문법 지식의 미비로 인한 실수는 발생하기 때문에 이러한 오류를 발생시키지 않기 위한 환경을 만드는 것이 중요하다..

[모딥다] JS (9) - 프로토타입

1. JavaScript: 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어: JS는 객체 기반의 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체라고 할 수 있다.: 원시 타입의 값을 제외한 나머지 값들(함수 , 배열 , 정규 표현식 등)은 모두 객체라고 할 수 있다. 2. 객체지향 프로그래밍: 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임: 실세계의 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작함: 실체는 특징이나 속성을 나타내는 속성(어트리뷰트 / 프로퍼티) : 추상화는 다양한 속성 중에서 필요한 속성만 간추려 내어 표현하는 것ex) "이름"과 "주소"라는 속성을 갖는 person 객체c..

[모딥다] JS (8) - 함수와 일급객체

1. 일급객체란?: 아래와 같은 조건을 만족하는 객체를 일급 객체라 한다.1) 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성 가능함2) 변수나 자료구조(객체, 배열) 등에 저장할 수 있다.3) 함수의 매개변수에 전달 할 수 있다.4) 함수의 반환값으로 사용할 수 있다.=> JS의 함수는 위 조건을 모두 만족하므로 일급 객체다.=> 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미다.  2. 일급객체로서 함수가 가지는 가장 큰 특징: 일반 객체와 같이 함수의 매개변수에 전달 할 수 있으며, 함수의 반환값으로도 사용할 수 있다는 것이다. 3. 함수 객체의 프로퍼티: 함수는 객체기 때문에 프로피터를 가질 수 있다.function square(number) { return n..

[모딥다] JS (7) - 생성자 함수에 의한 객체 생성

1. Object 생성자 함수: new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환됨.const person = new Object();// 프로퍼티 추가person.name = "Lee"; : 생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말함.: 생성자 함수에 의해 생성된 객체를 인스턴스라 한다.: :객체 생성 방법은 객체 리터럴을 사용하는 것이 더 간편한다. 2. 생성자 함수1) 객체 리터럴에 의한 객체 생성 방식의 문제점: 직관적이고 간편하나 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적임const circle1 = { radius: 5, getDiameter() ..

[모딥다] JS (6) - 프로퍼티 어트리뷰트

1. 내부 슬롯과 내부 메서드1) 내부 슬롯 : 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(Psuedo Property) 2) 내부 메서드 : 의사 메서드 ex) ([[...]]) 2. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체: 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의함: 프로퍼티 상태란 프로퍼티의 값, 값의 갱신 가능 여부 , 열거 가능 여부, 정의 가능 여부를 말한다.: 프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값인 내부 슬롯이다.ex) [ [ Value ] ] , [ [ Enumerable ] ] , [ [Configurable ] ]= 프로퍼티 ..

[모딥다] JS (5) - var , let ,const 키워드와 블록 레벨 스코프

1. var 변수 문제점1) 변수 중복 선언 허용2) 함수 레벨 스코프 : var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정함.: 따라서 함수 외부에서 var로 선언한 변수는 코드 블록 내 선언해도 모두 전역 변수가 됨.3) 변수 호이스팅: 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작함 2. let 키워드: 변수 중복 선언 금지: 블록 레벨 스코프 - 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따름: 변수 호이스팅 발생 X: var 키워드와 달리  "선언 단계" 와 "초기화 단계"가 분리되어 진행 된다.: 따라서 초기화 단계 실행되기 이전에 변수에 접근하려고 하면 참조 에러가 발생함: 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 ..

[모딥다] JS (4) - 전역 변수의 문제점

1. 변수의 생명 주기1) 지역 변수의 생명 주기: 변수는 선언에 의해 생성되고 할당을 통해 값을 갖음. 그리고 소멸하는데 이러한 것을 생명 주기라고 함.: 만약 생명주기가 없다면 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다.: 변수 선언은 선언문이 어디에 있든 상관 없이 가장 먼저 실행됨, 즉 한 줄 씩 순차적으로 실행되는 런타임 시점이 아닌 시작 전 자바스크립트 엔진에 의해 먼저 실행된다. => 전역 변수에 한정된 설명: 지역 변수는 함수 몸체의 다른 문들이 순차적으로 실행 되기 이전에 자바스크립트 엔진에 의해 변수가 선언되고 undefined로 초기화 된다. 그 후 함수 몸체의 다른 문들이 순차적으로 실행 될 때 값의 할당이 이루어진다. :  즉, 지역 변수의 생명 주기는 함수의 생명 주기..