반응형 Language200 [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. [JavaScript] 템플릿 리터럴(Template Literal) - 백틱(back-tick) ` ES6에서 도입된 템플릿 리터럴(Template Literal)인 문자열 표기법에 대해 알아보자. 템플릿 리터럴은 지금까지 문자열 표현에 흔히 사용해왔던 이중 따음표("") 나 작은 따음표('') 대신 백틱(``)을 사용한다. 템플릿 리터럴을 통해 다양한 기능을 제공하는데, ES5에서의 기존 방식과 백틱을 사용한 비교 예제 코드를 통해 하나씩 알아가보자.1. 백틱(back-tick) 기본 사용법let blog = `mine-it-record`; 우선 기본 사용법에 대해 알아봤는데, 일단 기본적으로 더블쿼터와 싱글쿼터를 이용해 문자열을 선언하는 방식과 동일하다. 2. 줄바꿈 선언 (Multi-line strings)//ES5var str1 = 'string line 1\n' + "string line 2".. 2021. 12. 22. 이전 1 ··· 4 5 6 7 8 9 10 ··· 23 다음 반응형
