es64 [ES6] 기존 javascript 비동기 방식과 새로운 Promise 함수 2020.12.07 - [웹 프론트엔드/자바스크립트] - [ES6] 기존 javascript 비동기 방식과 새로운 Promise 함수 어떤 프로그램 언어를 불문하고 비동기 처리는 중요합니다. 특히 웹 환경에서는 서버와의 잦은 통신으로 비동기 처리가 필수라고 할 수 있습니다. 그래서 오늘은 기존 자바스크립트의 비동기 방식과 새로운 Promise 함수를 비교하겠습니다. 먼저 총 4개의 프로세스가 있고 3개는 비동기 처리를, 나머지 하나는 즉시 호출하는 예로 코딩해보겠습니다. // 기존 자바스크립트 방식 function process1(onFin){ setTimeout(function(){onFin('프로세스1 완료')}, 1000); } function process2(onFin){ setTimeout(fu.. 2020. 12. 7. [ES6] 템플릿 문자열 (Template String) 2020.09.16 - [웹 프론트엔드/자바스크립트] - [ES6] 화살표 함수와 커링 디자인 패턴 오늘은 가볍게 템플릿 문자열에 대해서 알아보겠습니다. 먼저 기존 자바스크립트의 병합 연산자(+)입니다. var val1 = "코로나"; var val2 = 9; console.log(val1 + val2); // 코로나9 var val3 = 10; console.log(val1 + val2 + val3); // 코로나910 console.log(val1 + (val2 + val3)); // 코로나19 이처럼 기존 병합 연산자는 플러스 기호를 쓰기 때문에 문자형과 숫자형의 연산이 알아보기 어렵습니다. 또한 문자열 안에 계산식을 넣을 수 없기 때문에 코드가 길어지고 가독성이 떨어집니다. (디버깅 지옥 오픈) .. 2020. 9. 18. [ES6] 화살표 함수와 커링 디자인 패턴 2020.09.05 - [웹 프론트엔드/자바스크립트] - [ES6] 전개 연산자(spread operator) 사용법 화살표 함수 ES6에 새로 추가된 화살표 함수(arrow function)는 함수 표현을 간단하게 할 수 있습니다. 기존 함수 사용과 화살표 함수 표현식을 비교해보고, 그것을 응용한 커링 디자인 패턴을 보겠습니다. // 기존 function plusFunc(num1, num2) { return num1 + num2; } var plusFunc = function (num1, num2) { return num1 + num2; }; // ES6 var plusFunc = (num1, num2) => { return num1 + num2; }; var plusFunc = (num1, num2).. 2020. 9. 16. [ES6] 자바스크립트 문법 (var, let, const) var, let, const 변수 선언 var 선언은 아래 코드 처럼 중복 선언이 가능하고 에러 없이 막 쓸 수 있습니다. var text = 'korea'; console.log(text);// korea var text = 'japan'; console.log(text);// japan // 같은 변수명으로 중복 선언했는데도 에러없이 덮어씌어짐 // 기분이 나쁘게 한국에서 일본으로 바뀜 let 선언은 아래 코드 처럼 중복 선언이 불가능하지만 재할당은 가능합니다. let text = 'korea'; console.log(text);// korea let text = 'japan'; console.log(text);// Uncaught SyntaxError: Identifier 'text' has alr.. 2020. 9. 1. 이전 1 다음
