목록[ javascript ]/modern javaScript (8)
IT_susu
ES6에서 도입된 제너레이터(Generator) 함수는 이터러블을 생성하는 함수입니다. 또한 제너레이터 함수는 비동기 처리에 유용하게 사용됩니다.
1. 프로미스란? http 통신의 결과를 우리 입맛에 맞게 처리할 때 비동기 처리를 위한 패턴방식중에 하나. es6에서 비동기 처리를 위한 패턴으로 도입하였으며 기존 콜백 패턴이 가진 단점을 보완하고 비동기 처리 시점을 명확하게 표현합니다. promise는 비동기식 작업의 최종 완료 또는 실패를 나타내는 객체. 2. 배경 기존 비동기 처리를 위한 패턴의 불편함. 2.1 콜백 헬 비동기로 처리를 하게되면 동기로 처리해야하는, 즉 앞선 처리의 결과값으로 뒤에 처리를 해야할 때 처리순서를 보장할 수 없기에 콜백패턴을 사용한다. 그런데 이게 많아질수록 중첩이 많이 되고 복잡도가 올라가게 된다. 코드는 위에서 아래로 보는데 왼쪽에서 오른쪽으로 읽게되어 가독성도 많이 떨어진다. 따라서 아래 블로그와 같은 콜백헬에 ..
비구조화 할당이란? 객체나 배열에서 값을 빼와서 새로운 변수에 할당하는 과정을 기존의 문법보다 좀 더 간결하고 깔끔하게 작성하는 방법. [1] 배열의 해체 할당 let Arr = ['a', 'b', 'c']; let [, second] = Arr; console.log(second); // 'b' - rest parameter와 섞어서 사용 const arr = [1,2,3,4,5]; const [a, ...b] = arr; const [ , , ...c] = arr; - 기본값 적용 const [a = 10, b = 20] = []; // a = 10, b = 20 const [ c, d = c * 2] = [5]; // d = 10 - 값을 서로 바꿀 때 let a = 10; let b = 20; [..
새로운 함수 표현 방식입니다. [1] 표현 방식의 차이 // before function before() { return 'test' } // after const before = () => 'test'; 파라미터가 한개면 ()를 생략할 수 있고, 함수 스코프 안에 return값만 있다면 {}와 return을 생략할 수 있습니다. 그런데 객체의 경우는, 함수 스코프와 객체를 표현하는 {}가 똑같이 생겨서 혼란이 오므로, 예외적으로 객체만 리턴하는경우는 ()로 {}를 대체합니다. //before function e(x) { return {x:x} } // after const e = x => ({x}) 함수를 리턴하는 경우 생김새도 특이해서 남겨둠. // before var f = function(a) {..
includes()텍스트가 포함되어있는지 여부를 불리언 값으로 반환. (es5)var word = "abcdefg";word.indexOf('bcd') > -1 (es6)let word = "abcdefg";word.includes('bcd') startsWith()어떤 문자열이 특정 문자로 시작하는지 확인하여 불리언 값으로 반환. (es5)var kings_4 = '청룡 백호 현무 주작'; // 1. kings_4의 글자는 '백호'로 시작하는가?kings_4.substr(0,2) === '백호'; function startsWith(word, find, start) {start = start || 0;return word.substr(start, find.length) === find;} startsW..
gulp는 task runner. 일의 반복작업을 줄여주는 자동화 툴입니다. gulp.task 처리할 작업 정의gulp.src 읽을 파일gulp.src.pipe 플러그인 연결gulp.dest 저장할 파일gulp.watch src의 glob 파일들을 주시하고 있다가, 변동이 생기면 task를 실행
모듈이란 구현 로직을 캡슐화하고 공개 API를 노출해 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드 조각이다. 모듈패턴을 사용하려면 이론적으로 다음 사항을 허용해야 한다.- 코드 추상화-코드 캡슐화-코드 재사용-의존성 관리 기존 자바스크립트 언어는 모듈을 염두해두고 디자인되지 않았기 때문에, 모듈 비슷한 패턴들을 고안하여 사용하고 있었다. iife와 노출식 모듈이다. iife는 즉시실행함수 표현식으로 선언과 동시에 실행되는 익명함수이다.또한, iife 안에서 정의한 변수는 전역 스코프를 오염시키지 않고 iife 내부 스코프에 머물러 있는다.하지만, IIFE는 의존성 관리가 되지 않는다. 노출식 모듈패턴은 함수 변수에 반환값을 담아 객체 형태로 return하는 것이다.// Expose ..