반응형 ES613 [JavaScript] 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에 대한 반복let st.. 2022. 1. 14. [JavaScript] 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. [JavaScript] 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.. 2022. 1. 14. [JavaScript] Promise란? - 비동기 처리를 위한 객체 ES6부터 정식으로 지원해주기 시작한 Promise 객체에 대해 알아보자. Promise란 말 그대로 '약속(프로미스)'을 의미하는데,이는 최종 결과를 반환한다기보다는 미래의 어떤 시점에 결과를 제공하겠다는 의미로 보면 된다. 코드를 통해 하나씩 알아가보자.1. Promise() 기본 구조const promise = new Promise((resolve, reject) => { // ...비동기 처리할 영역 // 보통 network 통신에 사용된다.});우선 Promise() 객체의 기본 구조에 대해 알아보자. Promise 객체는 3가지 상태를 가진다.대기(pending) : 이행하지도, 거부하지도 않은 초기 상태이행(fulfilled) : 연산이 성공적으로 완료됨거부(rejected) : .. 2022. 1. 14. [JavaScript] 클래스(Class)문법에 대하여 ES6부터는 자바스크립트 또한 Class문법을 사용할 수 있게 되었다. 자바스크립트에서의 Class는 함수라는 것을 알아두고 클래스(Class)문법에 대해 하나씩 알아가보자.1. 클래스(Class) 정의1-1. 클래스 선언class Rectangle { constructor(height, width) { this.height = height; this.width = width; }}우선 클래스를 선언하는 방식은 매우 간단한데, 위 예제처럼 [ Class 클래스명 ] 구조로 선언해주면 된다. 위에서 클래스를 함수라고 설명했지만 예외가 있는게, 클래스는 호이스팅(Hoisting)이 불가능하기 때문에 반드시 먼저 선언하고 인스턴스를 생성하거나 호출해야한다. 1-2. 클래스 표현식// unname.. 2022. 1. 7. [JavaScript] 향상된 객체 리터럴(Enhanced Object property) ES6에서 객체 리터럴 프로퍼티 기능이 향상되었는데, 향상된 객체 릴터럴에 대해 알아보자.1. 객체 프로퍼티 축약 표현 //ES5var 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: ƒ}//ES6let mine = 'Mine';let it_record = 'ItRecord'let fn = () => 'fn';const obj = {mine, it_record, fn}console.log(obj); // {m.. 2022. 1. 3. [JavaScript] 모듈 사용하는 방법 (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 {minus};con.. 2021. 12. 31. [JavaScript] 배열 및 객체의 비구조화 할당- 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] = ['red', 'ye.. 2021. 12. 30. [JavaScript] 기본 함수 매개변수 (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 다음 반응형
