Symbol이란?1997년 자바스크립트가 ECMAScript로 처음 표준화된 이래로 자바스크립트는 6개의 타입을 가지고 있었다.[원시 타입(primitive data type)]BooleannullundefinedNumberString[객체 타입(Object type)]Object심볼(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. Symbol의 생성심볼은 아래의 3가지 방법으로 생성할 수 있다.Symbol()Symbol.for()Symbor.iteratorSymbol()Symbol은 Symbol() 함수로 생성할 수 있다. 이때 생성된 심볼은 객체가 아..

전개 연산자(...)는 ES6에서 새로 도입된 문법이다. 이 전개 연산자를 사용하는 spread와 rest는 서로 완전히 다르지만 한편으로는 은근히 비슷하다. spreadspread라는 단어는 펼치다, 퍼뜨리다라는 의미를 가지고 있다. 이 문법을 사용하면 객체 또는 배열을 펼칠 수 있다. 예를 들어 다음과 같은 객체들이 있다고 가정해 보자.const slime = { name: '슬라임'};const cuteSlime = { name: '슬라임', attribute: 'cute'};const purpleCuteSlime = { name: '슬라임', attribute: 'cute', color: 'purple'};console.log(slime);console.log(cuteSlime);c..

비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있도록 하는 자바스크립트의 표현식이다. 쉽게 말하면 배열 혹은 객체 안의 값을 편하게 꺼내 쓸 수 있도록 해 주는 문법이라는 것이다. 객체의 비구조화 할당 우선 아래의 예시에서부터 시작해 보자.const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨'};const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카'};function print(hero) { const text = `${hero.alias}(${hero...

보통 서버에 데이터를 전송하기 위해 아래와 같이 HTML5의 을 이용해 구성하여 제출해 본 경험들이 있을 것이다. 아이디 비밀번호 성별 남자 여자 응시분야 영어 수학 이처럼 보통은 HTML5의 을 이용해 input 값을 서버에 전송하지만 자바스크립트에서는 FormData()를 이용해 동일하게 스크립트로도 전송할 수 있다. 즉 FormData란 HTML이 아닌 자바스크립트 영역에서 폼 데이터를 다루는 객체라고 할 수 있다. 그리고 HTML에서의 submit 제출 동작은 Ajax를 통해 서버에 제출하는 것으로 이해할 수 있다.let formData = new FormData(); // new FromData()로 새로운 객..

객체 리터럴 { ... }을 사용하면 객체를 쉽게 만들 수 있다. 하지만 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 하는데 이럴 때 new 연산자와 생성자 함수를 사용하면 편리하다. 생성자 함수생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다. 다만 생성자 함수의 경우 아래의 두 가지 관례를 따른다.함수 이름의 첫 글자는 대문자로 작성한다.반드시 'new' 연산자를 붙여 실행한다.function User(name) { this.name = name; this.isAdmin = false;}let user = new User("John");alert(user.name); // Johnalert(user.isAdmin); // false n..

async 함수의 병렬 처리 getApple()과 getBanana()라는 비동기 함수가 있고 각 함수들은 1초의 딜레이 후 실행된다고 가정해 보자. 아래 예시에서는 await을 두 번 써서 총 2초를 기다리게 되는 것인데 만약 getApple()과 getBanana()라는 함수가 서로 연관성이 없다고 가정하면 이는 결국 시간 낭비인 셈이다. function delay(){ return new Promise( (resolve, reject) => { setTimeout(() => resolve(), 1000); })}async function getApple(){ await delay(); return "apple";}async function getBanana(){ await delay(..