MD 기록저장소

async와 await 키워드는 promise가 너무 복잡해서 쓰기 싫을 때 사용할 수 있는 대체품 같은 것이라 할 수 있습니다. async는 함수 앞에만 사용할 수 있다는 특징이 있습니다. await은 async 함수 안에서만 사용할 수 있습니다. 1️⃣ async 사용법 함수 앞에 async 키워드를 붙인 상태로 만들면 저절로 Promise 오브젝트가 만들어집니다. async function add() { 1+1; } 이렇게 함수를 만들면 함수 자체가 곧 Promise가 됩니다. 그래서 뒤에 then을 붙일 수 있습니다. async function add() { 1+1; } add.then(()=>{ console.log('성공'); } 이렇게 하면 콘솔에 '성공'이라는 글자가 출력됩니다. promi..

Promise 역시 콜백함수와 마찬가지로 디자인패턴 중 하나입니다. 1️⃣ Promise 만들기 const promise1 = new Promise(); 이렇게 해주면 promise가 만들어진 것입니다. 이제 promise1 뒤에 then, catch, finally 등을 사용해서 코드를 작성할 수 있습니다. then은 프로미스 안의 코드가 성공했을 때 실행하는 것이고 catch는 프로미스 안의 코드가 실패했을 때 실행하는 것이고 finally는 프로미스 안의 코드의 성공과 실패에 상관없이 실행시키는 것입니다. 사실 promise를 만들 때는 Promise 안에 코드를 넣어줘서 만들어야 합니다. 자세한 건 차차 공부해보겠습니다. 2️⃣ Promise 사용하기 프로미스의 정체는 사실 성공과 실패를 판단해주..

1️⃣ 동기식(synchronous) 처리 자바스크립트는 기본적으로 동기식(synchronous)처리 언어입니다. 이 말이 무슨 뜻이냐 하면 코드를 한 번에 한 줄씩 처리한다는 뜻입니다. console.log(1); console.log(2); console.log(3); 코드를 이렇게 작성하고 콘솔을 보면 1, 2, 3이 순서대로 한 줄 씩 출력되는 것을 확인할 수 있습니다. 자바스크립트를 실행하는 웹 브라우저에는 stack이라는 공간이 있는데 코드를 그 stack에 보관하고 있다가 한 줄 씩 처리하는 것입니다. 2️⃣ 비동기식(asynchronous) 처리 그런데 자바스크립트에서는 비동기식 처리도 가능합니다. console.log(1); setTimeout(function(){}, 1000); con..

Destructuring은 구조분해 할당이라고도 합니다. 변수에 값을 할당할 때 ES6 문법에서 새롭게 추가된 개념입니다. 1️⃣ Array 안에 들어있는 데이터를 변수에 담는 방법 const array = [2,3,4]; 위와 같은 array가 있습니다. 이 때 array 안의 자료를 각각 a,b,c 에 할당하고 싶다면 어떻게 해야될까요? const a = array[0]; const b = array[1]; 이렇게 하면 할 수 있지만 조금은 비효율적인 것처럼 보입니다. 구조분해 할당을 이 때 활용할 수 있습니다. const [a,b,c] = [2,3,4] 이렇게 해주면 됩니다. 왼쪽의 변수의 개수와 넣을 데이터의 개수를 일치시켜서 만들어 주면 됩니다. 그러면 만약에 개수가 서로 일치하지 않으면 어떻게..

const data = { odd: [ ], even: [ ] } (1) data 오브젝트에는 setter 역할 함수가 하나 필요합니다. setter 함수에 1,2,3,4 이렇게 아무 자연수나 파라미터로 입력하면 홀수는 odd, 짝수는 even 이라는 속성에 array 형태로 저장되어야합니다. (2) data 오브젝트에는 getter 역할 함수가 하나 필요합니다. getter 함수를 사용하면 odd, even에 저장된 모든 데이터들이 숫자순으로 정렬되어 출력되어야합니다. 예를 들면 data.setter함수(1,2,3,4,5) 이렇게 입력하면 data = { odd : [1,3,5], even : [2,4] } 이렇게 저장이 되어야합니다. const data = { odd: [], even: [], sor..

최근 코딩 트렌드로 원본 데이터는 변경 불가능하게 하는 것이 대세입니다. 원본 데이터는 그대로 두고 함수로 데이터를 수정하거나 뽑아 쓰는 추세로 가고 있습니다. 이런 흐름에 따라 나타난 것이 getter와 setter 입니다. getter 와 setter를 살펴보기에 앞서 object 내에 함수를 만들어 데이터를 조작하는 법에 대해 알아보겠습니다. 1️⃣ 원본데이터를 그대로 두고 데이터를 뽑아오는 법 const person = { name: 'kim', age: 30 } person 오브젝트가 있습니다. 이런 상태에서 내년 나이를 출력하고 싶으면 어떻게 하면 될까요? 가장 먼저 떠오르는 방법은 person.age = 31 이렇게 직접적으로 원본데이터를 수정해주는 것입니다. 그런데 요즘 트렌드에는 맞지 않..

상속을 시켜주는 방법으로 지금까지 constructor, prototype을 공부했습니다. 마지막으로 배울 것은 Class입니다. class를 사용하는 방법은 다음과 같습니다. 1️⃣ class 만드는 법 class Parent() { constructor(){ this.name = 'kim'; } } const child = new Parent(); 기존에 배웠던 constructor와 크게 다르지 않습니다. 차이점은 class라고 선언한 것 안에 constructor를 만들어준다는 점입니다. 2️⃣ class 안에 상속 가능한 함수 만드는 방법 1. constructor 안에 만들어 주기 class Parent() { constructor(){ this.name = 'kim'; this.sayHi =..

1️⃣ Prototype 개념 객체지향1 - Constructor에서 Constructor의 내용을 Instance에 그대로 넘겨주는 것을 객체지향 용어로 Inheritance(상속)이라고 합니다. 이 때 Constructor를 '부모', Instance를 '자식'이라는 관계에 빗대어 많이 설명합니다. 이런 상속을 가능하게 하는 자바스크립트만의 고유한 장치가 하나 더 있는데 바로 Prototype입니다. Prototype은 Constructor를 만들 때 내부에 자동으로 생성되는 항목입니다. 좀 더 이해하기 쉽게 비유적으로 설명하자면 prototype은 '부모의 유전자' 라고 생각하면 이해가 쉽습니다. function Student(){ this.name = 'Kim'; this.age = 15; } c..

1️⃣ Constructor의 개념 const student1 = {name: 'kim', age: 20} const student2 = {name: 'park', age: 22} object를 여러 개 만들고 싶을 때 이렇게 일일이 하드코딩 해주게 되면 굉장히 비효율적인 코딩이 됩니다. 이런 과정을 쉽게 만들어 줄 때 Constructor를 이용합니다. 다시 말해 Constructor는 object를 여러개 만들고 싶을 때 사용하는 문법입니다. function Student() { this.name = 'kim'; this.age = 20; } Constructor는 함수의 형식을 빌려서 만듭니다. 이 때 Constructor의 이름은 일반 함수와 다르다는 것을 표시하기 위해 관습적으로 대문자로 시작합..

자바스크립트의 자료형은 크게 두 가지로 분류를 할 수 있습니다. 1. Primitive Type 2. Reference Type 1번은 문자, 숫자 등의 자료를 의미합니다. 이 자료형은 변수에 자료가 곧바로 저장이 됩니다. const name = 'john'; const age = 20; john, 20 이라는 값이 왼쪽의 name, age 변수에 곧바로 저장이 됩니다. 그래서 이런 일이 가능합니다. let name1 = '김'; let name2 = name1; name1 = '박'; console.log(name1); // 박 console.log(name2); // 김 name1 이라는 변수에 값을 넣고 name2에는 그 변수를 복사해서 넣었습니다. 그리고 name1 변수의 값을 변경했습니다. 그리..