개발 스터디

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 25.1 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. 프로타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어이다. ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. var Person = (function() { function Person(name) { this.name = name } Person.prototype.sayHi = function () { console.log('Hi! My name is ' + this.name) } return Person }) var me = new Person('Lee'..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 실행 컨텍스트는 자바스크립트의 동작원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하려면 자바스립트가 스코프를 기반으로 식별자에 바인딩된 값을 관리하는 방식과 오이스팅이 발생하는 클로저의 동작방식 그리고 태크스 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작방식을 이해할 수 있다. 23.1 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 전역코드 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성한다. 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다. 함수 코드 함수 내부..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 22.1 this 키워드 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. 22-01 this 는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조변수다. this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수있다. this 는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조 할 수 있다. this가 가리키는 값, this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 객체 리털럴과 생성자 함수의 예제를 this를 사용해 수정해보자. 22-03 객체 리터럴의 메서드 내부에서의 this는 ..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 21.1 자바스크립트 객체의 분류 자바스크립트 객체는 크게 3개의 객체로 분류할 수 있다. 표준 빌트인 객체 표준 빌트인 객체는 ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공 자바스크립트 실행 환경과 관계없이 언제나 사용할 수 있다. 표준 빌트인 객체는 전역 객체의 프로퍼티로서 제공된다. 별도의 선언없이 전역 변수처럼 언제나 참조할 수 있다. 호스트 객체 ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체를 말한다. 브라우저 환경에서는 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 20.1 strict mode란? function foo() { x = 10 } foo() console.log(x) 전역 스코프에도 x변수의 선언이 존재하지 않기 때문에 ReferenceError를 발생시킬 것 같지만 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. 개발자의 의도와는 상고나없이 발생한 암묵적 전역은 오류를 발생시키는 원인이 될 가능성이 크다 따라서 반드시 var, let, const 키워드를 사용하여 변수를 선언한 다음 사용해야한다. ES5부터는 strict mode가 추가 되었다. ESLint 같은 린트 도구를 사용해도 strict mode와 유사한 효과를 얻을 수 있다. strict mode 보다 린트..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 15.1 var 키워드로 선언한 변수의 문제점 ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이였다. 15.1.1 변수 중복 선언 허용 var 키워드로 선언한 변수를 중복 선언하면 초기화문 유무에 따라 다르게 동작한다. 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작하고 초기화문이 없는 변수 선언문은 무시된다. var x = 1 var y = 1 var x = 100 var y console.log(x) // 100 console.log(y) // 1 15.1.2 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다 함수 외부에서 v..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 전역 변수의 부분별한 사용은 위험하다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야한다. 14.1 변수의 생명 주기 14.1.1 지역 변수의 생명 주기 변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 됨 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 함수 내부에서 선언된 지역변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. function foo() { var x = 'local' console.log(x) return x } foo() // local console.log(x) // Uncau..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 13.1 스코프란? 스코프는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있으므로 주의가 필요하다. var, let, const 키워드로 선언한 변수의 스코프도 다 다르게 동작한다. 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있다. function add(x, y) { console.log(x, y) // 2 5 return x + y } add(2, 5) console.log(x, y) // Uncaught ReferenceError: x is not defined 변수는 코드의 가장 바깥 영역뿐 아니라 코드 블록이나 함수 몸체 내에서도 선언할 수 있..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 12.1 함수란? 함수는 자바스크립트에서 가장 중요한 핵심 개념 자바스크립트의 핵심 개념인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 갱성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다 함수는 자바스크립트를 정확히 이해하고 사용하기 위해 피해갈 수 없는 핵심 중의 핵심 수학의 함수는 “입력(input)”을 받아 “출력(output)”을 내보내는 일련의 과정을 정의한 것 f(x, y) = x + y 라는 함수를 정의하고 이 함수에 입력 2, 5를 전달하면 함수는 정의된 일련의 과정, 즉 x + y를 싫애하여 7을 출력 프로그래밍 언어의 함수도 수학의 함수와 같은 개념 함수 f(x, y) = x + y를 ..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 원시 타입과 객체 타입은 크게 세가지 측면에서 다른다. 원시 값은 변경 불가능한 값이다. 객체는 변경 가능한 값이다. 원시 값을 변수에 할당하면 변수에는 실제 값이 저장된다. 객체를 변수에 할당하면 변수에는 참조 값이 저장된다. 원시 값을 갖는 변수에 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다.(값에 의한 전달) 객체를 가르키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다.(참조에 의한 전달) 11.1 원시 값 11.1.1 변경 불가능한 값 원시 값은 변경 불가능한 값이다. 한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다. 변경 불가능하다는 것은 변수가 아니라 값에 대한 진술이다. 원시 값은 변경 불가능..