JavaScript/ES6+
-
ES6+ | reduce 배열 메서드JavaScript/ES6+ 2020. 5. 21. 15:47
Reduce 배열 메서드 중 하나로 함수형 프로그래밍의 기초 중 하나 배열의 각 요소에 콜백 함수를 실행하고, 해당 반환값을 누적값에 합친 뒤 최종 누적값을 반환 잘 활용하면 거의 모든 코드를 한 줄의 코드로 바꿀 수 있는 강력한 메서드 두 개 이상의 배열 메서드가 필요할 때 reduce 메서드만 사용해서 해결가능한 경우가 많음 복잡한 문제를 깔끔하게 해결할 수 있는 디자인 패턴의 기초가 됨 구조 ARRAY.reduce((total, value, index, array) => { // javascript code }, initialValue) total: 매 리턴 값을 합친 누적값 value: 배열의 각 요소 값 index: 배열 인덱스 array: 전체 배열을 뜻하는 값 initialValue: 누적을..
-
ES6+ | Array Methods 배열 메서드 간단 정리JavaScript/ES6+ 2020. 5. 21. 15:38
every 배열의 모든 요소가 조건에 맞으면 true를, 그렇지 않다면 false를 반환 수행 중 거짓이 나온다면 수행을 멈추고 false 반환 예제 const arr = [2, 3, 4]; const isBiggerThanOne = arr.every((key) => key > 1); console.log(isBiggerThanOne); // true find 배열 내에서 특정 요소를 찾는 데 사용하며 조건에 맞는 요소를 반환 예제 const arr = ["node.js", "올인원"]; const res = arr.find((key) => key === "올인원"); console.log(res); // 올인원 includes 배열 내에 특정 요소가 있다면 true를, 그렇지 않다면 false를 반환 ..
-
ES6+ | Async AwaitJavaScript/ES6+ 2020. 5. 18. 14:42
Async Await async await은 비동기 프로그래밍을 동기 프로그래밍처럼 작성할 수 있도록 함수에 추가된 기능 ES2017에 자바스크립트 표준으로 등록 프로미스의 then 메서드를 체인 형식으로 호출하는 것보다 가독성이 좋음 프로미스는 비동기 상태를 값으로 다룰 수 있는 async await 보다 큰 개념으로, async await이 프로미스를 완전히 대체할 수는 없음 async await 이해 async await 함수는 프로미스를 반환 프로미스는 객체로 존재하지만 async await은 함수에 적용되는 개념 async function getData() { return 123; } getData().then(data => console.log(data)); // 123 // Promise {..
-
ES6+ | Generator 제너레이터JavaScript/ES6+ 2020. 5. 13. 16:38
Generator 제너레이터(generator)는 함수의 실행을 중간에 멈추고 재개할 수 있는 ES6의 독특한 기능 특징 실행을 멈출 때 값을 전달할 수 있기 때문에 반복문에서 제너레이터가 전달하는 값을 하나씩 꺼내서 사용할 수 있음 제너레이터는 보통의 컬렉션과 달리 값을 미리 만들어 놓지 않음 → 필요한 순간에 값을 계산해서 전달 가능하기에 메모리 측면에서 효율적 다른 함수와 협업 멀티태스킹(cooperative multitasking) 가능 제너레이터가 실행을 멈추고 재개할 수 있기 때문에 멀티태스킹이 가능해짐 협업이라고 부르는 이유는 제너레이터가 실행을 멈추는 시점을 자발적(non-preemptive)으로 선택하기 때문 제너레이터 구조 별표와 함께 정의된 함수와 그 함수가 반환하는 제너레이터 객체로..
-
ES6+ | PromiseJavaScript/ES6+ 2020. 4. 7. 11:12
Promise 사용 배경_비동기 처리 예 setTimeout, addEventListener 메서드, XMLHttpRequest 객체의 작업은 비동기로 실행됨 비동기 작업은 동기와 다르게 순차적으로 실행되지 않음 자바스크립트에서 비동기 코드의 순서를 동기적으로 보장받으려면 콜백 함수를 사용해야 함 비동기 코드 실행 순서 console.log("A"); setTimeout(() => console.log("B"), 0); console.log("C"); // A → C → B setTimeout 함수는 인수로 받은 콜백 함수를 n밀리초 뒤에 실행되도록 예약만 하고 바로 다음 코드가 실행됨 setTimeout 함수가 콜백 함수를 0초 후에 실행되도록 했으나 실제로는 호출 스택에 실행 문맥이 남아 있을 때는 ..
-
ES6+ | Destructuring 구조 분해 할당 & 객체 확장 표현식JavaScript/ES6+ 2020. 3. 6. 16:57
Destructuring 구조 분해 할당 & 객체 확장 표현식 객체 확장 표현식 ES6에 도입되었으며 객체 내부에서 표현식을 사용하거나 보다 편리하게 키와 키값을 저장할 수 있도록 하는 문법 객체의 키에 저장할 값을 가진 변수와 키의 이름이 동일한 경우 키 이름만 작성 가능 객체 생성 블록 안에 대괄호[]를 사용하여 표현식 작성 가능 함수 선언 시 function 키워드 생략 가능 const x = 0; const y = 0; const obj = {x, y}; console.log(obj); // {x: 0, y: 0} const randomKey = 'other'; const comObj = { ['the' + randomKey]: 'hello?' } console.log(comObj); // {th..
-
ES6+ | Spread Operator 전개 연산자JavaScript/ES6+ 2020. 3. 6. 15:26
Spread Operator 전개 연산자 나열형 자료를 추출하거나 연결할 때 사용하는 연산자 배열, 객체, 변수명 앞에 마침표 세 개(...) 입력 배열, 객체, 함수 인자 표현식([], {}, ()) 안에서만 사용 가능 기본값 지정 가능 Spread Operator 배열, 함수 인자 표현식 배열에 저장된 순서대로 요소 나열 기본값을 지정하면 해당 변수에 저장될 값이 없을 때 기본값이 저장됨 const arr1 = [1, 2]; const arr2 = [3, 4]; const combined = [...arr1, ...arr2]; console.log(combined); // [1, 2, 3, 4] // Destructuring(구조 분해 할당)과 함께 사용 const [first, second, thi..
-
ES6+ | Template Literal 템플릿 문자열JavaScript/ES6+ 2020. 3. 6. 14:42
Template Literal ES6에 새로 도입된 문자열 표기법 Template Literal 특징 백틱(``) 사용 내부에 큰따옴표(""), 작은따옴표('') 혼용 가능 여러 줄에 걸쳐 문자열 작성 가능 줄바꿈을 그대로(enter) 표현할 수 있음 특수 기호 $를 사용해서 변수 또는 식 포함 가능 예제 const t1 = `"안녕"이라고 '안녕'`; console.log(t1); // "안녕"이라고 '안녕' const t2 = `줄바꿈을 이렇게 편하게 할 수 있습니다.` console.log(t2); /* 줄바꿈을 이렇게 편하게 할 수 있습니다. */ const v1 = `제 나이는 ` const v2 = 20; const t3 = `${v1}${v2}살입니다.` console.log(t3); // ..