await & async promise가 콜백지옥을 무찌를 수 있는 좋은 방법이지만 그래도 코드가 복잡하기는 하다. 그래서 ES8 문법으로 await 과 async 가 추가되었다. await 과 async 는 promise를 더 깔끔하게 사용할 수 있는 방법이다. 하지만 경우에 따라 더 좋은 방법들이 다르기때문에, 적절히 섞어서 활용하는 것이 필요하다. promise 복습을 먼저 해보자 1초 후 텍스트 출력, 다시 2초후 텍스트 출력, 다시 3초후 텍스트를 출력하는 함수가 있다. function timer(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(time); }, time); }); } console.log(..
object : 속성을 가진 값을 저장할때 객체 자료형으로 만든다. array : 요소들을 순서대로 저장할때 배열 자료형으로 만든다. 작업을 하다보면 객체나 배열 데이터 전부가 아닌, 일부만 필요한 경우가 있다고 한다. 이럴때 자료를 변수로 '분해' 할 수 있게 해주는 문법이 [ 구조분해할당 ] 이다. Array 데이터를 변수에 담기 const arr = [1,2,3] const a = arr[0] const b = arr[1] const c = arr[2] // 위 코드를 아래와 같이 바꿀 수 있다. const [a,b,c] = arr 왼쪽에 선언한 변수 명의 갯수와, 배열 요소의 갯수가 맞지 않으면 값이 제대로 할당되지 않으므로 디폴트값을 넣어줄 수 있다. const arr = [1,2] const ..
같은 부모 유전자를 가진 여러 객체를 만들어내기 위해 변수와 메소드가 정의되어 있는 Class라는 틀을 사용한다. 이전에는 Constructor를 사용해서 위 기능을 구현했고, ES6에서 Class 문법이 추가되었다. Class를 사용하면 Constructor보다 더 명확하고 깔끔한 코드를 만들 수 있다. 📌 constructor로 생성자를 만든 경우 function Person (name, age) { this.name = name; this.age = age; } // 상속할 속성을 constructor에 정의 Person.prototype.sayHello = function() { console.log('Hello, I am ' + this.name ); } // 메서드를 prototype에 추가 ..
자바스크립트의 객체지향적 특성에 대해 공부하며 프로토타입 기반의 언어라는 내용이 계속 나왔지만 한번에 다 이해할 수가 없어서.. 때되면 이해할 수 있겠지 하며 넘겨왔었다. 그리고 이제 드디어 정리가 좀 되는 중! 👀 Prototype 이란? 프로토타입은 유전자 같은 것이다. 부모가 가진 유전자를 기반으로 자식객체를 만드는 개념이다. 자바스크립트가 프로토타입 기반 언어라는 것은 결국 객체지향적 특성을 설명한다. 클래스 기반 객체지향 VS 프로토타입 기반 객체지향 객체지향은 블럭을 조립해 제품을 만들어가는 과정 같은 것이라고 했다. Java 나 Python, C++ 같은 언어에서는 클래스를 정의해 그것으로부터 블럭(자식 객체)을 만들어 나간다면, Javascript는 클래스 없이 부모의 유전자를 가진 자식객..
이제까지 배웠던 자료형은 각각 다른 데이터 타입을 가지고 있었다. 그리고 그 타입에 따라 변수 할당,수정,복사 등의 작업을 하는 과정에서 다른 결과가 나올 수 있다. 👀 Primitive data type 기본형 데이터 타입 문자, 숫자, 불리언 등 자료 자체가 변수에 저장되는 타입으로 아래와 같은 단순 변수들을 말한다. let name = 'Jessie'; let age = 20; 기본형 데이터 타입의 변수를 복사 한 후 값을 변경하면 어떻게 될까? let name1 = 'Jessie'; // output : Tony let name2 = name1; // output : Jessie name1 = 'Tony'; 위 코드에서 name1에 Jessie가 직접 저장되었고, name2는 name1의 값을 공..
👀 Spread operator 기본 사용법 ES6 에서 추가된 Spread operator는 ... 기호를 붙여서 배열이나 객체의 값을 펼쳐주는 연산자이다. 배열과 객체 이름 앞에 ... 을 사용해주면, 배열에서 괄호를 제거해 내부의 값만 빼서 펼쳐준다. 데이터의 연결, 복사 등으로 유용하게 활용할 수 있다. 괄호를 제거해 주는 연산자 이므로 소괄호 / 중괄호 / 대괄호 내부에서만 사용할 수 있다. const words = ['hello', 'world']; const number = {a: 1, b: 2, c: 3} console.log(words); // output: ['hello', 'world'] console.log(...words); // output: hello world console..
자바스크립트 ES6에서 문자열을 다루기 쉽도록 템플릿 리터럴(Template literals) 이라는 새로운 표기법이 생겼다. 기존에 '' 혹은 "" 안에 넣던 문자열을, esc키 밑에 있는 백틱 기호(``) 안에 넣어서 표기한다. 📌 Template literals 사용의 장점 1. 문자열을 변수와 함께 호출할때, 문자열을 ''로 각각 분리하지 않고 사용할 수 있다. 양 옆에 + 기호도 챙겨줄 필요가 없다. const name = 'Jessie'; console.log('Hello, I am ' + name + '.'); console.log(`Hello, I am ${name}.`); // 둘 다 콘솔에 Hello, I am Jessie. 출력됨 2. 문자열 안에서 따옴표를 사용하고 싶거나, 줄바꿈을..
자바스크립트 ES6 문법에서 변수 공부 중 전에는 어려워서 접근 못하던 TDZ에 대해 좀 더 정리를 해볼 수 있을 것 같아 포스팅해본다. >> 변수 기본개념 포스팅 2021.12.27 - [Javascript] - [JS] const, let, var 개념정리 (feat. hoisting, scope) 👀 Hoisting? 변수의 선언은 선언 / 초기화 / 할당의 단계로 나누어 진행된다. 선언 단계 : var name 등의 방식으로 변수를 정의한다. 초기화 단계 : 선언단계의 변수를 위한 메모리를 만들고, undefined로 값을 초기화 한다. 할당 단계 : 초기화된 메모리에 다른 값을 할당한다. hoisting 이라는 단어는 끌어올린다는 뜻이다. 호이스팅은 선언하는 단계의 코드가 유효범위의 최상단으로 ..
- Total
- Today
- Yesterday
- 다중조건삼항연산자
- notworking
- class
- Prototype
- 생각정리
- 조건부삼항연산자
- callsignature
- 개념정리
- Synchronous
- destructuring
- Callback
- javascript
- ES6
- CSS
- Ternary
- promise
- Prettier
- Asynchronous
- scrollEvent
- Til
- DOM
- 삼항조건연산자중복사용
- JSX
- JS
- 리액트
- VSCode
- 타입스크립트
- JQuery
- typescript
- 구조분해할당
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |