에바니네

모던 자바스크립트 Deep Dive - 26장

ES6 함수의 추가 기능 ES6 이전까지의 자바스크립트의 함수는 별다른 구분 없이 사용되었다고 한다. 모든 함수는 callable하면서 constructor였다는 것. ES6 전부터 코딩을 해온게 아닌 나로써는 정확히 어떤 의미인지는 알기 쉽지 않지만... 보기에는 하나의 함수로 모든 것을 할 수 있으니까 편해보일 수 있으나 이런 특성은 실수를 유발하고 성능적인 면에서 손해라는 것이다. 예를 들어서 메소드를 new 연산자와 함께 생성자 함수로써 호출할 수 도 있는데 이렇게 되면 메소드에도 프로토타입 프로퍼티를 가지게되고 프로토타입 객체또한 생성한다는 것을 의미하니까, 불필요한 것들을 생산한다고 볼 수 있는거죠. 그래서 함수를 ES6부터는 3가지로 분류를 하였는데, ES6 함수의 구분 constructor..

모던 자바스크립트 Deep Dive - 25장

클래스 ES6에서부터 도입된 것은 정말 많다.. 클래스 또한 이때 도입이 되었다고 하는데, 기존 프로토타입 기반 객체지향 프로그래밍보다 자바나 다른 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 빠르게 학습할 수 있도록 매우 흡사하게 새로운 객체 생성 메커니즘을 제시한 것인데, 자스의 클래스는 함수이며, 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이라고 할 수 있다. syntax sugar ( 문법적 설탕 ) 이란 ? syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express. 한 프로그래밍 언어안에서 읽고 표현을..

모던 자바스크립트 Deep Dive - 24장

렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프라고한다. 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경에 의해 결정되는데 이게 렉시컬 스코프다. 전역 함수 foo에서 bar함수를 호출하였지만 렉시컬 스코프를 따르는 자바스크립트는 호출이 어디서 되었든, 함수가 정의된 스코프 상위에서 참조값을 찾기때문에 둘다 반환값이 1이라고 나오는걸 확인 할 수 있다. 클로저 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있는데 이러한 중첩 함수를 클로저라고 ..

모던 자바스크립트 Deep Dive - 23장

실행컨텍스트 실행컨텍스트를 생성하는 4가지 타입의 소스코드 소스코드의 타입 설명 전역코드 (global code) - 전역에 존재하는 소스코드를 말한다. - 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성 함수코드 (function code) - 함수 내부에 존재하는 소스코드를 말한다. - 지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체 관리 - 생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결 eval코드 (eval code) - 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 - stric mode에서 자신만의 독자적인 스코프를 생성 모듈코드 (module code) - 모듈 내부에 존재하는 소스코드 - 모듈별로 독립적..

모던 자바스크립트 Deep Dive - 22장

this 키워드 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메소드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 메소드는 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 이때 필요한게 this 다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다. this가 가리키는 값, 즉 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 일반 함수 내부에서 this를 사용할 필요가 없기 때문이다. 일반 함수 호출 기본적으로 this에는 전역 객체가 바인딩 된다.일반 함수로 호출하면 함수 내부의 this에는..

모던 자바스크립트 Deep Dive - 21장

빌트인 객체 자바스크립트 객체 분류 표준 빌트인 객체 ( Standard built-in object/native object/global objects ) ECMAScript 사양에 정의된 객체이며, 자바스크립트 실행환경과 상관없이 언제나 사용할 수 있다. 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다. 호스트 객체 ( host object ) 클라이언트 사이드 Web API를 호스트 객체로 제공하고, Node.js 환경에서는 고유의 API를 호스트 객체로 제공한다. 사용자 정의 객체 ( user-defined objects ) 기본 제공되는 객체가 아닌 사용자가 직접 정의한 객체 표준 빌트인 객체 중 Math, Reflect, JSON을 제외한 모든 객체는 인스턴스를 생성할 수 있는 생성자 ..

모던 자바스크립트 Deep Dive - 20장

Strict Mode 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드들에 대해 명시적인 에러를 발생시키는 ES5부터 추가 된 기능. ESLint 같은 린트 도구를 사용해도 Strict mode와 유사한 효과를 얻을 수 있고, 코딩 컨벤션을 설정 파일 형태로 정의하고 강제해서 더욱 강한 효과를 얻을 수 있다고 한다. 사용법은 아래 링크를 참고하도록 하자. https://poiemaweb.com/eslint ESLint | PoiemaWeb 코드 linting은 특정 스타일 가이드를 따르지 않거나 문제가 있는 패턴이나 코드를 찾기 위해 사용되는 정적 분석 툴이다. ESLint는 처음부터 유용하게 사용할 수있는 b..

모던 자바스크립트 Deep Dive - 19장

프로토타입 프로토타입 공부에 앞서 객체지향 프로그래밍(OOP)이란 무엇인가? 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. OOP는 실세계의 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작한다. 특징이나 성질을 나타내는 속성을 가지고 있고, 이를 통해 실체를 인식하거나 구별 할 수 있다. 이처럼 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것을 추상화라고한다. 프로퍼티 : 객체의 상태를 나타내는 데이터 메소드 : 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위 상속과 프로토타입 상속은 어떤 객체의 프로퍼티 또는 메소드를 다른 객체가 상속 받아 그대로 ..