이것저것 스터디📚/JavaScript - Deep Dive (24) 썸네일형 리스트형 DeepDive - 27장.배열 27.1 배열이란? - 배열은 여러 개의 값을 순차적으로 나열한 자료 구조다. - 배열이 가지고 있는 값을 요소라고 부른다. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. - 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다. - 배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다. - 자바스크립트에 배열이라는 타입은 존재하지 않는다. 배열은 객체 타입이다. * 배열과 일반 객체와 구별되는 독특한 특징 구분 객체 배열 구분 프로퍼티 키와 프로퍼티 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 값의 순서 X O length 프로퍼티 X O - 인덱스로 표현되는 값의 순서와 length 프로퍼티를 갖는 배열은 반복문을 통해 순차적으로 값에 접.. DeepDive - 26장.ES6 함수의 추가 기능 26.1 함수의 구분 ES6 이전까지 자바스크립트 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있었다. 따라서, 실수를 유발시킬 수 있으며 성능 면에서도 손해다. * 호출할 수 있는 함수 객체를 callable이라 하며, 인스턴스를 생성할 수 있는 함수 객체를 constructor, 인스턴스를 생성할 수 없는 함수 객체를 non-constructor라고 부른다. ES6 이전에 일반적으로 메서드라고 부르던 객체에 바인딩된 함수도 흔치는 않겠지만, 문법상 생성자 함수로서 호출이 가능하다. 하지만 객체에 바인딩된 함수가 constructor라는 것은 객체에 바인딩된 함수가 prototype 프로퍼티를 가지며, 프로토타입 객체도 생성한다는 점에서 성능상의 문제도 존재한다. 콜백함.. DeepDive - 25장.클래스 25.1 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 클래스가 필요 없는 객체지향 프로그래밍 언어이고 ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있었다. ES6의 클래스는 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새롭게 클래스 기반 객체지향 모델을 제공하는 것이 아닌, 기존 프로토타입 기반 패턴을 클래스 기반 패턴처러 사용할 수 있도록 하는 문법적 설탕이다. 클래스는 생성자 함수와 매우 유사하게 동작하지만 다음과 같은 차이점이 있다. 1. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 생성자 함수는 new 연산자가 없이 호출되는 경우 일반 함수로서 호출한다. 2. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한.. DeepDive - 24장.클로저 클로저는 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성으로 자바스크립트의 고유한 개념이 아니고, ECMAScript 사양에 등장하지도 않는다. 자바스크립트에서 클로저를 이해하려면 먼저 "함수가 선언된 렉시컬 환경"의 의미를 알아야한다. const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } innnerFunc(); } outerFunc(); 위의 예제에서 outerFunc 함수 내부에 중첩 함수 innerFunc가 정의되고 호출되었고, 중첩 함수 innerFunc의 상위 스코프는 외부 함수 outerFunc 스코프이기 때문에, 중첩 함수 innerFunc 내.. DeepDive - 23장.실행 컨텍스트 23.1 소스코드의 타입 * ECMAScript 사양은 소스코드(ECMAScript code)를 4가지 타입으로 구분하고, 4가지 소스코드는 실행 컨텍스트를 생성한다. - 전역코드 : 전역에 존재하는 소스코드(전역에 정의된 함수, 클래스 등의 내부코드는 포함되지 않음) 전역 변수를 관리하기 위해 전역 코드가 평가되면 최상위 스코프인 전역 스코프를 생성한다. - 함수 코드 : 함수 내부에 존재하는 소스코드(함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않음) 지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체를 관리하기 위해 함수코드가 평가되면 함수 실행 컨텍스트가 생성된다. - eval 코드 : 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 str.. DeepDive - 22장.this 22.1 this 키워드 객체의 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 하고, 이때 메서드는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. // 재귀적으로 자기 자신이 속한 객체를 참조하는 방법 const circle = { // 프로퍼티 radius: 5; // 메서드 getDiameter() { return 2 * circle.radius; } } console.log(circle.getDiameter()); // 10 // this를 사용하는 방법 const circle = { radius: 5, getDiameter() { return 2 * this.radius; } }; console.log(circle.getDiamete.. DeepDive - 21장.빌트인 객체 21.1 자바스크립트 객체의 분류 * 표준 빌트인 객체(standard build-in objects/native objects/global objects) 표준 빌트인 객체는 ECMAScript 사양에 정의된 객체이다. 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)과 관계없이 언제나 사용할 수 있다. 전역 객체의 프로퍼티로 제공되므로 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다. * 호스트 객체(host objects) 호스트 객체는 ECMAScript 사양에 정의되어 있진 않지만 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)에서 추가로 제공하는 객체이다. * 사용자 정의 객체 사용자 정의 객체는 표준 빌트인 객체와 호스트 객체처럼 기본 제공되는 객체가 아닌 사용자가.. DeepDive - 20장.strict mode 20.1 strict mode란? function foo() { x = 10; } foo() console.log(x) 위의 예제의 실행 결과는 ReferenceError가 아닌, 10이 출력되는데, 이는 자바스크립트 엔진이 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성하기 때문이다. 이러한 현상을 암묵적 전역(implicit global)이라고 한다. 하지만, 암묵적 전역은 오류를 발생시키는 원인이 될 가능성이 크기 때문에 ES5부터는 strict mode가 추가되었다. strict mode(엄격 모드) : 자바스크립트의 문법을 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적 에러를 발생시킨다. * strict mode 대신.. 이전 1 2 3 다음
