본문 바로가기

Javascript40

[Javascript] ES6 - for of for of 문 for of 문 은 내부적으로 이터레이터의 next 메소드를 호출하여 이터러블을 순회하며 next 메소드가 반환한 이터레이터 리절트 객체의 value 프로퍼티 값을 for of 문 의 변수에 할당한다. 그리고 이터레이터 리절트 객체의 done 프로퍼티 값이 false이면 이터러블의 순회를 계속하고 true이면 이터러블의 순회를 중단한다. // 배열 for (const item of ['a', 'b', 'c']) { console.log(item); } // 문자열 for (const letter of 'abc') { console.log(letter); } // Map for (const [key, value] of new Map(.. 2023. 12. 4.
[Javascript] ES6 - 이터레이션 이터레이션 이터레이션 이란 데이터 컬렉션을 순회하기 위한 프로토콜이다. 이터레이션을 준수한 객체는 for of 문으로 순회할 수 이쏘 Spread 문법의 피연산자가 될 수 있다. 이터러블 이터러블 프로토콜을 준수한 객체를 이터러블 이라 한다. 이터러블 은 Symbol.iterator 메소드를 구현하거나 프로토타입 체인에 의해 상속한 객체를 말한다. Symbol.iterator 메소드는 이터레이터를 반환한다. 이터러블 은 for of 문에서 순회할 수 있으며 Spread 문법의 대상으로 사용할 수 있다. 배열은 이터러블 프로토콜을 준수한 이터러블이다. const array = [1, 2, 3]; // 배열은 Symbol.iterator 메소드를 소유한다. // 따라서 배열은 이터러블 프로토콜을 준수한 이터.. 2023. 12. 1.
[Javascript] ES6 - Symbol Symbol Symbol은 ES6에서 새롭게 추가된 7번 째 타입으로 변경 불가능한 원시 타입이다. 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용한다. Symbol 생성 Symbol 은 Symbol() 함수로 생성하며 new 연산자를 사용하지 않는다. let mySymbol = Symbol(); console.log(mySymbol); // Symbol() console.log(typeof mySymbol); // symbol Symbol 사용 객체의 프로퍼티 키로 사용할 수 있으며 Symbol 값을 키로 갖는 프로퍼티는 다른 어떤 프로퍼티와 충돌하지 않는다. const obj = {}; const mySymbol = Symbol('mySymbol'); obj.. 2023. 11. 30.
[Javascript] ES6 - 모듈 모듈 모듈 이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 파일 단위로 분리되어 있으며 명시적으로 모듈 을 로드하여 재사용한다. 기능별로 분리되어 작성되므로 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있으며 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다. 모듈 스코프 // foo.js var x = 'foo'; // 변수 x는 전역 변수이다. console.log(window.x); // foo // bar.js // foo.js에서 선언한 전역 변수 x와 중복된 선언이다. var x = 'bar'; // 변수 x는 전역 변수이다. // foo.js에서 선언한 전역 변수 x의 값이 재할당되었다. console.. 2023. 11. 29.
[Javascript] ES6 - 클래스 클래스 자바스크립트는 프로토타입 기반 객체지향 언어로 클래스가 필요없는(class-free) 객체지향 프로그래밍 스타일로 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화(정보 은닉) 등의 개념을 구현할 수 있었다. 하지만 ES6에서는 클래스에 대한 새로운 문법을 다음과 같이 제시한다. 클래스 정의 ES6 클래스는 class 키워드를 사용한다. // 클래스 선언문 class Person { // constructor(생성자) constructor(name) { this._name = name; } say() { console.log(`Hi! ${this._name}`); } } // 인스턴스 생성 const me = new Person('Lee'); me.say(); // H.. 2023. 11. 28.
[Javascript] ES6 - 디스트럭처링 디스트럭처링 디스트럭처링(Destructuring) 은 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당한다. 배열 디스트럭처링 배열의 각 요소를 추출하여 변수 리스트에 할당하며 배열의 인덱스를 기준으로 한다. const arar = [1, 2, 3]; const [num1, num2, num3] = arr; console.long(num1, num2, num3); // 1 2 3 const [a, b] = [1]; console.log(a, b) // 1 undefined const [a, b] = [1, 2, 3]; console.log(a, b); // 1 2 const [a, b.. 2023. 11. 27.
728x90

티스토리툴바