목록FrontEnd/Javascript (25)
동그란 도그린
34-1. 이터레이션 프로토콜 이터레이션 프로토콜 ES6에 도입 순회 가능한terable 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙 이터러블 프로토콜과 이터레이터 프로토콜이 있음 ES6 이전 순회 가능한 데이터 컬렉션(배열 , 문자열 , 유사 배열 객체 , DOM 컬렉션 등)은 통일된 규약 없이 각자 나름의 구조를 가지고 for 문, for .. in 문, forEach 메서드 등 다양한 방법으로 순회 가능 ES6 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for … of문, 스프레드 문법, 배열 디스트럭처링 할당 대상으로 사용할 수 있도록 일원화 이터러블 이터러블 프로토콜을 준수한 객체를 이터러블이라고 함 이터러블은 ..
33-1. 심벌이란? 심벌 ES6에서 도입된 7번째 데이터 타입으로, 변경 불가능한 원시 타입의 값 다른 값과 중복되지 않는 유일무이한 값 ⇒ 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용 33-2. 심벌 값의 생성 Symbol 함수를 호출하여 생성 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이한 값 new 연산자와 함께 호출하지 X (new 연산자와 함께 생성자 함수 또는 클래스를 호출하면 객체가 생성되지만 심벌 값은 변경 불가능한 원시 값임) const mySymbol = Symbol(); console.log(mySymbol); // Symbol() : 심벌 값은 외부로 노출되지 않으므로 확인 불가 Symbol 함수에는 선택..
32-1. String 생성자 함수 String 객체는 생성자 함수 객체 new 연산자와 함께 호출하여 String 인스턴스 생성 가능 new 연산자와 함께 호출하면 [[StringData]] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성 ⇒ ES5에서는 [[StringData]]를 [[PrimitiveValue]]라고 불렀음 String 래퍼 객체 배열과 마찬가지로 length 프로퍼티와 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키로, 각 문자를 프로퍼티 값으로 갖는 유사 배열 객체이면서 이터러블 배열과 유사하게 인덱스를 통해 각 문자에 접근 가능 단, 문자열은 원시 값이므로 변경 불가 String 생성자 함수의 인수로 문자열이 아닌 값을 전달하면 인수를 문자열로 강제 변환한 후..
27-1. 배열이란? 여러 개의 값을 순차적으로 나열한 자료구조 배열은 배열의 길이를 나타내는 length 프로퍼티를 가짐 자바스크립트에는 배열이라는 타입 존재 X, 배열은 객체 타입 배열은 배열 리터럴, Array 생성자 함수, Array.of, Array.from 메서드로 생성 가능 Array.prototype은 배열을 위한 빌트인 메서드 제공 배열은 객체지만, 일반 객체와는 다른 특징이 있음 27-2. 자바스크립트 배열은 배열이 아니다 일반 배열 vs 자바스크립트 배열 자료구조에서 말하는 배열 밀집 배열 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조 배열의 요소는 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접 요소에 빠르게 접근 가능하다는 장점 배열에 요소를 삽입 및..
25-1. 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어 (클래스가 필요 없는 객체지향 프로그래밍 언어) ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있음 // 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'); me.sayHi..

자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어 자바스크립트를 이루고 있는 거의 “모든 것”이 객체 📍 객체 지향 프로그래밍 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 추상화 : 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 표현하는 것 객체 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조 상태 데이터(프로퍼티)와 동작(메서드)를 하나의 논리적 단위로 묶은 복합적인 자료구조 📍 상속과 프로토타입 상속 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 사용하는 것 자바스크립트는 프로토타입 기반으로 상속 구현 코드 재사용 관점에서 유용 📍 프로토타입 객체 프로토타입 객체 객체 간 상속을 구현하기 위해 사용됨 프로토타입 : 어떤 객체의 상위 객체(부모)..
📍 일급 객체 무명의 리터럴로 생성 가능(런타임에 생성 가능) 변수나 자료구조에 저장 가능 함수의 매개변수에 전달 가능 함수 반환 값으로 사용 가능 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용 가능하다는 의미 📍 함수 객체의 프로퍼티 Object. prototype 객체의 프로퍼티는 모든 객체가 상속받아 사용 가능 arguments 프로퍼티 arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체 함수 내부에서 지역 변수처럼 사용 함수 외부에서 참조 불가 매개변수의 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용 배열 형태이지만, 실제로 배열이 아닌 유사 배열 객체 🔅 유사 배열 객체 : length 프로퍼티를 가진 객체로, for문으로 순..
📍 Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환 🔅 생성자 함수 : new 연산자와 함께 호출, 객체(인스턴스)를 생성하는 함수 📍 생성자 함수 객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성 ⇒ 동일한 프로퍼티를 갖는 객체를 여러개 생성해야 하는 경우에는 매번 같은 프로퍼티를 기술해야 함 ⇒ 비효율적 생성자 함수에 의한 객체 생성 방식은 객체 생성 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성 가능 🔅 this : 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수 new 연산자와 함께 생성자 함수를 호출하지 않으면 생성자 함수가 아니라 일반 함수로 동작 생성자 함수가..