본문 바로가기

Javascript

 (47)
[모던 자바스크립트 Deep Dive] 23. ES6함수의 추가 기능 함수의 구분 ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출 가능 ES6 함수의 구분 constructor prototype super arguments 일반 함수 O O X O 메서드 X X O O 화살표 함수 X X X X 메서드 ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미 const obj = { x : 1, // foo 는 메서드 foo(){ return this.x; }, // bar에 바인딩된 함수는 메서드가 아닌 일반 함수 bar : function(){ return this.x; } }; ES6 사양에서 정의한 메서드 (이하 ES6 메서드)는 인스턴스를 생성할 수 없는 non-construct ES6 메서드는 인스턴스를 생성할..
[모던 자바스크립트 Deep Dive] 22. 클래스 클래스는 프로토타입의 문법적 설탕인가? 생성자 함수와 클래스의 차이 클래스를 new 연산자 없이 호출하면 에러 발생 /생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출 클래스는 상속을 지원하는 extends 와 super 키워드를 제공 /생성자 함수는 extends 와 super 키워드를 지원하지 X 클래스는 호이스팅이 발생하지 않는 것처럼 동작 /함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode 해제 X /생성자 함수는 임묵적으로 strict mode 지정 X 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모..
[모던 자바스크립트 Deep Dive] 21. 클로저 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정 함수의 상위 스코프를 결정한다 = 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조 값을 결정한다 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정됨 함수 객체의 내부 슬롯 [[Environment]] 함수가 정의된 환경(위치)과 호출되는 환경(위치)는 다를 수 있음 → 렉시컬 스코프가 가능하려면 함수는 자신이 호출되는 환경과 상관없이 자신이 정의된 환경, 즉 상위 스코프 (함수 정의가 위치하는 스코프)를 기억해야함 → 함수는 자신의 내부 슬롯 [[Environment..
[모던 자바스크립트 Deep Dive] 20. 실행 컨텍스트 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분 소스코드의 타입 설명 전역 코드 전역에 존재하는 소스코드 (전역에 정의된 함수, 클래스 등의 내부 코드는 포함 X) 함수 코드 함수 내부에 존재하는 소스코드 (함수 내부에 중첩된 함수, 클래스 등의 내부코드는 포함 X) eval 코드 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 모듈 코드 모듈 내부에 존재하는 소스코드 (모듈 내부의 함수, 클래스 등의 내부 코드는 포함 X) 소스 코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다름 1. 전역 코드 전역코드는 전역 함수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성 해야함 var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역..
[모던 자바스크립트 Deep Dive] 19. this this 키워드 this : 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드 참조 가능 this는 자바스크립트 엔진에 의해 암묵적으로 생성되며 코드 어디서든 참조 가능 함수를 호출하면 arguments 객체와 this 가 암묵적으로 함수 내부에 전달 → arguments 객체와 this 지역변수처럼 사용 가능 this 바인딩은 함수 호출 방식에 의해 동적으로 결정 바인딩 : 식별자와 값을 연결하는 과정 자바스크립트의 this 는 함수가 호출되는 방식에 따라 this 에 바인딩될 값, 즉 this 바인딩이 동적으로 결정 // this는 어디서든지 참조 가능 // 전역에서 this 는 전역 객체 win..
[모던 자바스크립트 Deep Dive] 18. 빌트인 객체 자바스크립트 객체의 분류 자바스크립트 객체는 크게 3개의 객체로 분류 표준 빌트인 객체 : ECMAScript 사양에 정의된 객체로 애플리케이션 전역의 공통 기능을 제공, 전역 객체의 프로퍼티로 제공되어 별도의 선언 없이 전역 변수처럼 언제나 참조 호스트 객체 : ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체 사용자 정의 객체 : 사용자가 직접 정의한 객체 표준 빌트인 객체 Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, WeakMap/WeakSet, Function, Promise, Reflect, Proxy, JSON, Error 등 40여 개의 표준 빌트인 객체..
[모던 자바스크립트 Deep Dive] 17. strict mode strict mode 란 functon foo(){ x = 10; } foo(); console.log(x); // 10 foo 함수 내에서 선언하지 않은 x 변수에 값 10 할당 → x 변수를 찾아야 x 에 값을 할당할 수 있기 때문에 스코프 체인을 통해 x 변수 선언을 찾기 시작 foo 함수의 스코프에서 x 변수의 선언을 찾음 → 실패 전역 스코프 (foo 함수의 상위 스코프) 에서 x 변수의 선언 검색 → 실패 전역 객체에 x 프로퍼티 동적 생성 → 전역 변수처럼 사용 가능 암묵적 전역 : 변수 선언이 존재하지 않을 때 전역 객체에 프로퍼티를 동적으로 생성 → 오류를 발생시키는 원인 strict mode : 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립..
[모던 자바스크립트 Deep Dive] 16. 프로토타입 객체지향 프로그래밍 객체지향 프로그래밍 : 여러 개의 독립적인 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 객체지향 프로그래밍은 실세계의 실체 (사물이나 개념)를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작 실체는 특징이나 성질을 나타내는 속성을 가짐 → 실체를 인식, 구별 가능 추상화 : 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것 객체 : 상태 데이터와 동작을 하나의 논리적 단위로 묶은 복합적인 자료구조 프로퍼티 : 객체의 상태를 나타내는 데이터 메서드 : 상태 데이터를 조작할 수 있는 동작 상속과 프로토타입 상속 : 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것 자바스크립트는 프로토타입을 기반으로 ..

티스토리툴바