본문 바로가기
반응형

ES612

map, filter, reduce map // map (고차함수) // 함수에서는 처리한 결과값을 리턴하게 된다 const map = (f, iter) => { let res = []; for (const a of iter) { res.push(f(a)); } return res; }; // 예제 1 let names = []; for (const p of products) { names.push(p.name); } console.log(names); // map을 이용해서 다시 작성한 예제 1 console.log(map(p => p.name, products)); // 예제 2 let prices = []; for (const p of products) { prices.push(p.price); } console.log(prices).. 2021. 11. 24.
제너레이터와 이터레이터 1) 제너레이터와 이터레이터 제너레이터 : 이터레이터이자 이터러블을 생성하는 함수, well-formed iterator를 리턴하는 함수 어떠한 값들을 제너레이터를 통해서 이터러블로 만들고, for.. of 문을 통해 순회를 할 수 있게 만들 수 있다는 것! function *gen() { yield 1; yield 2; yield 3; } let iter = gen(); console.log(iter[Symbol.iterator]() == iter); // true 반환 예제 10까지의 홀수만 뽑아내는 제너레이터 함수 function *odds(l) { for(let i = 0; i < l; i++) { if (i % 2) yield i; } } let iter2 = odds(10); console.l.. 2021. 11. 24.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (13편) async / await 1. Promise로 비동기 네트워크 호출 코드 만들기 function fetchUser() { // resolve나 reject를 호출하지 않으면 Promise가 pending 상태에 머무르게 된다. return new Promise((resolve, reject) => { // do network request in 10 secs.. resolve('ellie'); }); } // 동기적으로 처리하게 되면 네트워크와 통신하는 10초 동안 사용자는 빈 화면을 보게 된다. const user = fetchUser(); user.then(console.log); console.log(user); 2. async // async // 함수 앞에 async라는 키워드를 쓰면 자동으로 .. 2021. 11. 19.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (12편) Promise - 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있게 하는 Object - 정해진 기능을 성공적으로 처리하면 메세지와 함께 결과값을 반환, 처리하지 못하면 에러를 전달해줌 - 콜백함수 대신에 유용하게 쓰일 수 있음 파일을 읽어오거나, 네트워크 요청 하는 것들은 시간이 걸리는 작업이기 때문에 비동기로 처리하는 것이 좋음 만약, 동기적으로 처리하게 된다면 작업을 하는 동안 다음 코드가 실행되지 않는 번거로움이 발생하기 때문이다. Promise는 만드는 순간에 excuter 함수를 실행하기 때문에, 원하지 않을 때도 네트워크 통신이 일어날 수 있음을 유의해야 한다. 'use strict'; // Promise is a JavaScript object for asynchoronous op.. 2021. 11. 18.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (11편) 비동기 처리의 시작 콜백 이해하기 'use strict'; // JavaScript is synchronous : 자바스크립트는 동기적인 언어다. // Execute the cod block in order after hoisting. // hoisting: var, function declaration 은 맨 위로 선언됨 console.log('1'); setTimeout(() => console.log('2'), 1000); // 1000msc = 1초 console.log('3'); // Synchronous callback function printImmediately(print) { print(); } printImmediately(()=> console.log('hello')); // Asyn.. 2021. 11. 16.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (10편) JSON HTTP (Hypertext Transfer Protocol) - 웹사이트, 웹 어플리케이션과 같은 클라이언트가 어떻게 서버와 통신할 것인지 정해놓은 규약 - 클라이언트가 서버에게 데이터를 요청 (request), 서버는 클라이언트 요청에 맞게 응답(response) Hypertext - HyperLink, 문서, 이미지 파일 등을 포함한 것들을 말함 AJAX (Asynchronous JavaScript And XML) - 웹 페이지에서 동적으로 서버와 데이터를 주고 받을 수 있는 기능을 말함 - 대표적으로 XHR(XMLHttpRequest)라는 Object가 있음, 브라우저 오픈 API에서 제공하는 것들 중의 하나 - 최근에는 새로 추가된 fetch() API를 통해서 데이터를 쉽게 주고 받을.. 2021. 11. 16.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (9편) 강의 시작 전 Quiz 내 답안 // Q1. make a string out of an array const fruits = ['apple', 'banana', 'orange']; let toString = fruits.toString(); console.log(toString); // Q2. make an array out of a string const fruits2 = '🍎, 🥝, 🍌, 🍒'; let toArray = fruits2.split(', '); console.log(toArray); // Q3. make this array look like this: [5, 4, 3, 2, 1] const array = [1, 2, 3, 4, 5]; console.log(array.reverse()); .. 2021. 11. 15.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (8편) 배열에 관한 내용 간단한 개념 정리 - 비슷한 종류의 데이터를 묶어 놓는 것 = 자료구조 - Object : 서로 연관된 것들끼리 묶어 놓는 것 - 비슷한 타입의 Object들을 묶어 놓는 것을 자료구조라고 이해하면 된다. 배열을 정의하는 방법과 인덱스를 활용하는 법 // 1. Declaration const arr1 = new Array(); const arr2 = [1, 2]; // 2. Index position const fruits = ['apple', 'banana']; console.log(fruits); console.log(fruits.length); console.log(fruits[0]); // 배열의 인덱스에 해당하는 값을 출력한다. console.log(fruits[fruits.l.. 2021. 11. 15.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (7편) Object // Objects // one of the JavaScript's data types. // a collection of related data and/or functionality. // Nearly all objects in JavaScript are instances of Object // object = { key : value };, object는 key와 value의 집합체이다 // 1. Literals and properties // Object를 만드는 방법 const obj1 = {}; // 'object literal' syntax const obj2 = new Object(); // 'object constructor' syntax function print(person.. 2021. 11. 15.
반응형

티스토리툴바