반응형 ES613 [ES6+] for of 반복문을 사용한 Map, Set 등의 객체 반복하기 ES6부터 새롭게 생겨난 반복문 for...of 에 대해 알아보고자 한다. for...of 문은 반복가능한 객체(Array, Map, Set, String, TypedArray, arguments 객체 등)를 반복하는 문법이다. ▷ 구문 for (variable of iterable) { statement } variable: 각 반복에 서로 다른 속성값이 variable에 할당된다. iterable : 반복되는 열거가능(enumerable)한 속성이 있는 객체. 예제를 통해 쉽게 접해보자. ▷ 예제1) Array에 대한 반복 let arr = [1, 2, 3]; for (let value of arr) { console.log(value); //1, 2, 3 } ▷ 예제2) String에 대한 반복 l.. 2022. 1. 14. [ES6+] Map(), Set() 객체의 특징과 사용법 ES6에서 새롭게 등장한 자료구조인 맵(Map) 과 셋(Set) 객체에 대해 알아보자. 1. 맵(Map) - 맵(Map)은 키가 있는 데이터를 저장한다는 점에서 객체(obj)와 유사하다. - 객체는 키값으로 문자열만 사용 가능하지만 맵(Map)은 다양한 자료형을 허용한다. - 객체는 삽입된 순서를 기억하지 못하지만 맵(Map)은 삽입된 순서를 기억해 반복문 사용시 삽입 순서대로 반복된다. 1-1. 주요 메서드와 프로퍼티 맵(Map)에서 주요 사용되는 메서드와 프로퍼티는 다음과 같다. new Map(iterable) : 맵 객체를 만든다. (매개변수로 [키, 값] 으로 이루어진 배열이나 이터러블 객체를 전달하면 그안의 값을 복사해 맵에 넣어준다.) set(key, value) : key를 이용해 value.. 2022. 1. 14. [ES6+] async와 await - Promise syntactic sugar 비동기 처리를 도와주는 async와 await에 대해 알아보자. 기존의 비동기 처리 방식인 콜백 함수와 프로미스(Promise)의 단점을 보완하고 개발자가 일기 좋은 코드를 작성할 수 있게 도와주는 문법인데, 제목에서 말한것처럼 Promise의 syntactic sugar라고 보면 된다. 기존에 없던게 아니고 그냥 좀더 Promise를 사용하기 쉽게 도와주는 문법이라 생각하면 될 것 같다. (object와 class의 관계랄까...?) 코드를 통해 하나씩 알아가보자. 1. async 사용법 // 1.함수로 만들어진 기본 promise 문법 (async x) function blog() { return new Promise((resolve, reject) => { resolve('mine-it-record.. 2022. 1. 14. [ES6+] Promise란? - 비동기 처리를 위한 객체 ES6부터 정식으로 지원해주기 시작한 Promise 객체에 대해 알아보자. Promise란 말 그대로 '약속(프로미스)'을 의미하는데, 이는 최종 결과를 반환한다기보다는 미래의 어떤 시점에 결과를 제공하겠다는 의미로 보면 된다. 코드를 통해 하나씩 알아가보자. 1. Promise() 기본 구조 const promise = new Promise((resolve, reject) => { // ...비동기 처리할 영역 // 보통 network 통신에 사용된다. }); 우선 Promise() 객체의 기본 구조에 대해 알아보자. Promise 객체는 3가지 상태를 가진다. 대기(pending) : 이행하지도, 거부하지도 않은 초기 상태 이행(fulfilled) : 연산이 성공적으로 완료됨 거부(rejected) .. 2022. 1. 14. [ES6+] 클래스(Class)문법에 대하여 ES6부터는 자바스크립트 또한 Class문법을 사용할 수 있게 되었다. 자바스크립트에서의 Class는 함수라는 것을 알아두고 클래스(Class)문법에 대해 하나씩 알아가보자. 1. 클래스(Class) 정의 1-1. 클래스 선언 class Rectangle { constructor(height, width) { this.height = height; this.width = width; } } 우선 클래스를 선언하는 방식은 매우 간단한데, 위 예제처럼 [ Class 클래스명 ] 구조로 선언해주면 된다. 위에서 클래스를 함수라고 설명했지만 예외가 있는게, 클래스는 호이스팅(Hoisting)이 불가능하기 때문에 반드시 먼저 선언하고 인스턴스를 생성하거나 호출해야한다. 1-2. 클래스 표현식 // unnamed .. 2022. 1. 7. [ES6+] 향상된 객체 리터럴(Enhanced Object property) ES6에서 객체 리터럴 프로퍼티 기능이 향상되었는데, 향상된 객체 릴터럴에 대해 알아보자. 1. 객체 프로퍼티 축약 표현 //ES5 var mine = 'Mine'; var it_record = 'ItRecord' var fn = function(){return 'fn'}; var obj = { mine : mine, it_record : it_record, fn : fn } console.log(obj); // {mine: 'Mine', it_record: 'ItRecord', fn: ƒ} //ES6 let mine = 'Mine'; let it_record = 'ItRecord' let fn = () => 'fn'; const obj = {mine, it_record, fn} console.log(o.. 2022. 1. 3. [ES6+] 모듈 사용하는 방법 (ft. 내보내기(export)/가져오기(import)) ES6에서 새롭게 지원하는 컴포넌트 정의를 위한 모듈 형태를 사용하기 위해 모듈을 내보내고(export) 가져오는(import) 방법에 대해 알아보자. 우선 모듈을 사용하기 위해서는 script 태그에 type="module" 속성을 추가해 줘야한다. 그렇게 되면 해당 자바스크립트 하일은 모듈로서 동작한다. 이 상태로 이제 export 와 import 방법에 대해 예제로 하나하나 알아가보자. 1. export (내보내기) 1-1. 기본 사용법 (named exports) // common.js // 1) 하나씩 내보내기 export function plus (a, b) { return a + b; } // 2) 목록으로 내보내기 const minus = (a, b) => a - b; export {min.. 2021. 12. 31. [ES6+] 배열 및 객체의 비구조화 할당- Destructuring Assignment (ft. 나머지 매개 변수 및 확산 연산자 - Rest parameter and Spread operator) ES6에서 새롭게 추가된 비구조화 할당(Destructuring Assignment)에 대해 알아보자. 비구조화 할당이란? 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식이다. 각 배열과 객체의 비구조화 할당에 대해 하나씩 알아가보자. 1. 배열 비구조화 (Array Destructuring) 1-1. 기본 사용법 // 기본 문법(비구조화 할당 x) const colorList = ['red', 'yellow', 'green']; const red = colorList[0]; const yellow = colorList[1]; const green = colorList[2]; // 비구조화 할당 문법 const [red, yellow, green] = ['.. 2021. 12. 30. [ES6+] 기본 함수 매개변수 (default function parameter) 자바스크립트에서 함수의 매개변수는 기본값이 undefined 였지만 ES6에서 이 함수의 매개변수 기본값을 설정해 줄 수 있다. 구문은 다음과 같다. ▷구문 function fnName(param1 = defaultValue1, ..., paramN = defaultValueN) { ... } 예제를 통해 더 쉽게 접근해보자. 1. 일반적인 함수 매개변수의 기본값 function mine(a){ return a; } console.log(mine()); // undefined 위 예제를 보면 함수의 매개변수는 기본적으로 undefined값을 가진다. 그래서 매개변수를 넣지 않고 함수를 그냥 실행해 버리면 undefined를 그대로 반환하는것이다. 그래서 이를 방지하기 위해 매개변수에 기본값을 사용하여 미.. 2021. 12. 28. 이전 1 2 다음 반응형
