본문 바로가기

javascript42

[7주차 스터디]34장-이터러블 이터러블 이터레이션 프로토콜 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. es6이전의 순회 가능한 데이터 컬렉션(배열, 문자열 등등..)은 통일된 규약 없이 각자 나름의 구조를 가지고 있음 es6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다. 이터러블 프로토콜(iterable protocol) Well-known Symbol인 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 상속 받아 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환하는 규약을 이터러블 .. 2022. 3. 27.
[7주차 스터디]33장-Symbol 7번째 데이터 타입 Symbol 심벌이란? 자바스크립트에는 6개의 데이터 타입이 있습니다. 문자열 숫자 불리언 undefined null 객체 타입 심벌(symbol)은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시타입의 값 다른 값과 중복되지 않는 유일 무이한 값으로 이름 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 프로퍼티 키로 사용할 수 있는 값은 빈 문자열을 포함하는 모든 문자열 또는 심벌 값이다. 심벌 값의 생성 Symbol 함수 Symbol값은 다른 원시값과 다르게 리터럴 표기법이 없고 Symbol 함수를 통해 생성합니다 이때 생성된 심벌값은 외부로 노출되지 않고, 다른 값과 절대 중복되지 않는 유일무이한 값 // 함수 호출을 통해 생성 const mySymbo.. 2022. 3. 27.
[5주차 스터디]26장-ES6 함수 추가 기능 ES6 함수의 추가 기능 함수의 구분 es6 이전의 함수는 사용 목적에 따라 명확 하게 구분 되지 않음 일반 함수로서 호출 가능 new연산자와 함께 호출하여 생성자 함수로 호출 가능 객체에 바인딩 되어 메서드로서 호출 가능 즉, es6이전의 모든 함수는 일반 함수, 생성자 함수 둘다 호출 가능 es6이전의 모든 함수는 callable 이면서 constructor 이다 실수를 유발할 수 있으며 성능 면에서도 손해 이러한 문제를 해결하기 위해 es6에서는 함수를 사용 목적에 따라 세 가지 종류로 명확히 구분 ES6 함수의 구분 constructor prototype super arguments 일반 함수(Normal, ES6 이전 함수) O O X O 메서드(Method) X X O O 화살표(Arrow) .. 2022. 3. 27.
[5주차 스터디]25장-클래스 클래스 문법적 설탕(Syntactic Sugar) 자바스크립트는 프로토타입 기반의 객체지향 언어를 지원합니다. es6에서 도입된 클래스는 클래스 기반 객체 지향 프로그래밍 언어와 매우 흡사한 객체 생성 메커니즘을 제시합니다. 사실 클래스는 객체 지향 모델을 제공하는 것이 아닌 함수이며 프로토타입 기반 패턴을 클래스 기반 패턴 처럼 사용할 수 있게 하는 문법적 설탕(Syntactic Sugar) 이라고 볼 수 있다. 클래스는 생성자 함수와 매우 유사하게 동작하지만 몇 가지 차이가 있다. 클래스를 new키워드 없이 호출 하면 에러, 생성자 함수는 일반 함수로 호출됨 클래스는 상속을 지원하는 extends와 super 키워드를 제공 클래스는 호이스팅이 발생하지 않는 것 처럼 동작, (함수는 함수 선언문 으로 .. 2022. 3. 27.
[5주차 스터디]24장-클로저 클로저 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합 렉시컬 환경의 이해 const x = 1; function outerFunc() { const x = 10; innerFunc(); } function innerFunc() { console.log(x); // 1 } outerFunc(); 자바스크립트는 렉시컬 스코프를 따르기 때문에 중첩된 함수가 아니라면 outerFunc 함수의 변수에 접근할 수 없다. 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라고 한다. 전역에서 정의된 함수의 상위 스코프는 전역이다. 실행컨텍스트의 렉시컬 환경은 자신의 외부 렉시컬 환경에 대한 참조에 상위 .. 2022. 3. 27.
[4주차 스터디] 23장-실행 컨텍스트 실행 컨텍스트 실행 컨텍스트를 바르게 이해 한다면 알 수 있는 것들 자바스크립트의 스코프 기반 식별자와 식별자 바인딩을 관리하는 방식 호이스팅이 발생하는 이유 클로저의 동작 방식 태스크 큐와 함께 동작하는 이벤트 핸들러 비동기 처리의 동작 방식 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분, 이때 소스크도는 실행 컨텍스트를 생성 전역 코드(global code) 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함 X 함수 코드(function code) 함수 내부에 존재하는 소스코드 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함 X eval 코드(eval code) 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드. 모.. 2022. 2. 23.