JS/Javascript & ES6
자바스크립트로 프로그래밍을 하다 보면 비동기 함수를 종종 반복문을 돌려야 할 상황이 있다. 내가 많이 사용하는 경우 중 하나는 데이터베이스에 Object 객체 리스트를 동시에 Insert하는 경우가 있을 수 있는데 여기서 흔히 실수할 수 있는 경우를 찾아보고, 적절한 방법을 찾아보았다. const insertDatabase = (data) => { return new Promise((resolve, reject) => { setTimeout(() => { console.log("Insert Database : " + data); resolve(); }, 1000); }); }; const data = ["Apple", "Banana", "Carrot", "Donut"]; let start = new Da..
이전장에서 Promise를 통해 비동기 로직을 처리하는 방법을 알아보았다. Promise를 사용하여 가독성 좋게 콜백함수를 작성하고, 비동기 처리를 할 수 있었는데, 프로미스 체이닝이 아닌 일반적인 문법을 작성하는 것처럼 비동기 처리를 할 수 있도록 도입된 Async&Await이라는 키워드가 있다. Async & Await의 규칙 1. 작성 방법 const p = (x, y) => { return new Promise((resolve, reject) => { const result = x + y; resolve(result); }); }; const main = () => { p(5000, 1000).then((x) => { console.log('success', x) }); } 이것은 Promise를..
Promise란 앞장의 콜백 지옥을 해결하기 위한 방법으로 Promise를 언급하였었다. Promise는 지금 당장에는 어떤 결과가 나올지 모르나 추후에 어떠한 결과를 제공하겠다는 약속(Promise)의 개념이다. 주로 Javascript의 비동기 처리에 사용하며, 이것을 사용하면 비동기 연산이 종료된 이후의 결과를 받아 추가 연산을 하는 등 동기 메서드처럼 값을 반환받을 수도 있다. Promise의 상태는 다음 세 가지이다. 대기(pending): 이행 및 거부가 이루어지지 않은 초기 상태. 이행(fulfilled): 연산이 완료됨. 거부(rejected): 연산이 실패함. 일련의 비동기 연산이 이루어지는 과정은 Pending, 연산이 성공했을 경우 Fulfilled, 오류 등이 일어났을 경우 Reje..
콜백 함수란? 어떤 이벤트가 발생한 이후 수행되는 함수를 의미한다. 주로 비동기 실행의 결과값으로 반환되어 실행되는 함수를 의미한다. function sum(x, y, callback){ let res = x + y; callback(res); } //3, 4를 sum함수에서 더한 후 callback메서드로 * 2된 결과 출력 sum(3, 4, (res) => { let callbackRes = res * 2; console.log(callbackRes); }); 다음을 보면 sum()의 인자로 들어가는 callback은 함수이다. 연산이 끝난 후 인자로 들어온 함수를 실행시키는 것이다. 따라서 Argument Input값으로 함수를 넣어주며, 주로 익명 함수로 작성된다. 콜백함수는 Closure이다. ..
Arrow Function JS에서 ES6가 도입되면서 다양한 문법들이 생겼는데 그 중 이 화살표 함수가 가장 잘 쓰이고 있을 것이다. 타 언어에서의 람다식과 형태가 유사하다. function foo(x){ return x; }//일반 const bar = (x) => { return x; }//Arrow 선언은 일반 변수 선언하듯이 해주며, ()안에 Argument를, {}안에 로직과 리턴값을 넣어주는 것은 같으며 =>로 이어준다. Closure Function 클로저 함수는 함수의 리턴값이 함수인 형태를 뜻한다. const getDiscount = function(rate){ return (function(price){ return price * rate; }); } console.log(getDis..
일반적인 값의 복사 일반적으로 변수에서 다른 변수로의 값을 복사하기 위해서는 다음과 같이 사용한다. //값의 복사 let a = "철수"; let b = a; console.log(`${a}, ${b}`);//철수 철수 b = "훈이"; console.log(`${a}, ${b}`); //철수 훈이 일반적인 값의 경우에는 해당 방법으로 복사한 값을 변경해도 원본의 값은 변하지 않는다. 그렇지만 객체나 배열의 경우 이야기가 달라진다. //1. 객체 & 배열의 복사 let profile = { name : "짱구", age : 5 } let copProfile = profile; //같은 매모리 주소 참조 copProfile.name = "맹구"; console.log(profile);//맹구 5 conso..
구조화와 비구조화 쉽게 말해서 배열이나 객체를 선언하는 과정을 구조화라고 하며, 배열이나 객체의 프로퍼티 값을 가져오는 과정을 비구조화라고 한다. 우리는 일반적으로 다음과 같은 형태로 객체를 선언하고 값을 얻어오는 방식을 많이 사용한다. const obj = { title : 'this is title', value : 'this is value', info : { name : 'this is name', age : 'this is age' } } const title2 = obj.title; const value2 = obj.value; const name2 = obj.info.name; console.log(title2, value2, name2); obj를 선언하는 과정은 구조화, obj에서 프로퍼..
