본문 바로가기

Javascript/모던 자바스크립트 DeepDive

 (24)
[모던 자바스크립트 Deep Dive] 24 클로저 클로저는 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어 등에서 사용되는 중요한 특성 클로저는 자바스크립트 고유의 개념이 아니므로 ECMAScript 사양에 들어가지 않음 MDN에서 정의한 클로저 "A closure is the combination of a function and the lexical environment within which that function was declared" "클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다" // innerFunc 함수가 outerFunc 함수의 내부에서 정의된 중첩 함수가 아니라면 // innerFunc 함수를 outerFunc 함수의 내부에서 호출하더라라도 outerFunc 함수의 변수에 접근 불가 const x = 1; funct..
[모던 자바스크립트 Deep Dive] 23 실행 컨텍스트 ECMAScript 사양은 소스코드를 4가지 타입으로 구분. 4가지 타입의 소스코드는 실행 컨텍스트를 생성 소스코드의 타입에 따라 실행 컨텍스트르 생성하는 과정과 관리 내용이 다르기 때문 소스코드의 타입 설명 전역 코드 global code - 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않음 - 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프 생성 - var키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 개체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 변수와 연결 - 전역 코드가 평가되면 전역 실행 컨텍스트 생성 함수 코드 function code - 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부 ..
[모던 자바스크립트 Deep Dive] 22 this this 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 self-referencing variable this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있음 this를 가리키는 값, this 바인딩은 함수 호출 방식에 의해 동적으로 결정 / 클래스 기반 언어인 자바나 c++에서는 언제나 클래스가 생성하는 인스턴스를 가리킴 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조변수이므로 일반 함수에서는 의미가 없음. strict mode가 적용된 일반 함수의 내부의 this에는 undefined가 바인딩 // this는 어디서든지 참조 가능 // 전역에서 this는 전역 객체 window를 가리킴 console..
[모던 자바스크립트 Deep Dive] 21 빌트인 객체 자바스크립트 객체의 분류 표준 빌트인 객체 standard built-in objects / native objects / global objects ECMAScript 사양에 정의된 객체 (브라우저 또는 Node.js환경에 관계 없이 사용 가능 ) 애플리케이션 전역 공통의 기능 제공 전역 객체의 프로퍼티로 제공, 별도의 선언 없이 전역 변수처럼 언제나 참조 가능 호스트 객체 host objects ECMAScript 사양에 정의되지 않았지만 실행ㄹ 환경에서 추가로 제공하는 기능 브라우저 환경: DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 같은 클라이언트 사..
[모던 자바스크립트 Deep Dive] 20 strict mode strict mode란? ES5부터 추가된 strict mode(엄격 모드) strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생싴닐 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킴 ESLint 같은 린트 도구를 사용해도 유사한 효과를 얻을 수 있음. 린트 도구는 정적 분석 기능을 통해 소스코드를 실행하기 전에 소스코드를 실행하여 문법적 오류뿐만 아니라 잠재적 오류까지 찾아내고 오류의 원인을 리포팅해주는 도구 DeepDive 필자는 린트 도구가 strict mode에서 제한하는 오류는 몰론 코딩 컨벤션을 설정 파일 형태로 정의하고 강제하는 등 더 강력한 효과를 얻을 수 있기 때문에 strict mode의 사용보..
[모던 자바스크립트 Deep Dive] 19 프로토타입 자바스크립트는 명령형 imperative, 함수형 functional, 프로토타입 기반 prototype-based, 객체지향 프로그래밍 OOP; Object Oriented Programming을 지원하는 멀티 패러다임 프로그래밍 언어 ES6에서 클래스 도입. 클래스는 생성자 함수보다 엄격하며 생성자 함수에서는 제공하지 않는 기능도 제공 객체지향 프로그래밍 객체지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보느 전통적인 명령형 프로그래밍 imperative programming의 절차지향적 관점에서 벗어나 여러 개의 독립적인 단위, 즉 객체 object의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 실체는 특징이나 성질을 나타내는 속성 attribute/property를 가지고 있고, ..
[모던 자바스크립트 Deep Dive] 18 함수와 일급 객체 일급 객체의 조건 무명의 리터럴로 생성 가능. 즉, 런타임에 생성이 가능 변수나 자료구조(객체, 배열 등)에 저장 가능 함수의 매개변수에 전달 가능 함수의 반환 값으로 사용 가능 // 1. 함수는 무명의 리터럴로 생성 가능 // 2. 함수는 변수에 저장 가능 // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당 const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체에 저장 가능 const auxs = { increase, decrease }; // 3. 함수의 매개변수에 전달 가능 // 4. 함수의 반환 값으로 사용 가능 fu..
[모던 자바스크립트 Deep Dive] 17 생성자 함수에 의한 객체 생성 Object 생성자 함수 생성자 함수 constructor란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수 생성자 함수에 의해서 생성된 객체를 인스턴스 instance라 함 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환 Object 외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수 제공 // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = "Jin"; person.sayHello = function () { console.log("Hi! My name is " + this.name); }; co..

티스토리툴바