Language/Javascript (8) 썸네일형 리스트형 [Javascript] async와 await에 대하여 async와 await를 이용하면 Promise를 좀 더 편하게 사용할 수 있다. 즉 읽고, 쓰기 쉬운 비동기 코드 작성이 가능하다! async 함수 async 키워드는 function 앞에 위치한다. async function func() { return true; } function 앞에 async를 붙이면 해당 함수는 항상 Promise를 return함. Promise가 아닌 값을 반환하더라도 resolved promise로 값을 감싸 이행된 Promise가 반환되도록 함. async function func(){ return Promise.resolve(1); } func().then(alert) //1로 alert 표시. async function func(){ return 1; } func().. [Javascript] Promise chaining 에 대하여 자바스크립트에서 순차적으로 수행되어야하는 비동기 작업은 promise chaining으로 해결할 수 있다. 아래는 promise chaining의 예시이다. new Promise((resolve, reject)=>{ setTimeout(()=>resolve(1), 1000); }).then((result)=>{ alert(result); //1 return result * 2; }).then(()=>{ alert(result); //2 return result * 2; }).then(()=>{ alert(result); //4 return result * 2; }); promise chaining은 result가 then 핸들러의 체인을 통해 전달된다는 점에서 착안. then 핸들러의 return값이 다.. [Javascript] Promise의 기본 Promise는 어떤 액션이 실행(Execute)되고 그 이후에 성공여부에 따라 특정한 액션(resolve/reject)을 할 수 있도록 하는 기능을 가지고 있다. 따라서 어떠한 액션의 실행을 완료한 후, 특정한 액션이 발생하도록 하기위해서 이 기능을 사용한다고 볼 수 있다.(비동기 처리 등) Promise를 만드는 방법 let promise = new Promise(function(resolve, reject) { // executor - 실행하길 원하는 액션 }); new Promise에 전달되는 함수 파라미터는 Executor(실행자, 실행 함수)라고 부른다. Executor는 Promise가 만들어질때 자동으로 실행되는 코드이다. Executor의 인수인 resolve와 reject는 콜백함수로 .. [Javascript] ES6 Array helper 배열과 관련된 작업을 보다 깔끔하게 처리할 수 있는 ES6의 Array helper에 대해서 알아보자. 1) forEach 배열의 요소를 하나씩 반환하여 함수를 실행. const example_array = ['apple','banana','peach','blue berry']; example_array.forEach((elem)=>{ //배열의 요소를 elem이라는 변수로 하나씩 파라미터로 전달한다. console.log(elem); }); 2) map 배열의 각 요소에 대해 주어진 함수로 처리되어 리턴된 새로운 배열을 만들어 준다. return이 없는 요소의 경우는 undefined처리가 됨. const example_array = ['apple','banana','peach','blue berry'.. [Javascript] 싱글스레드 기반 이벤트 루프와 비동기 동기/비동기란? 1) 동기 동기란 Request를 보내는 시기와 Response를 받는 시기가 일치. 요청을 하게 되면 응답이 올 때까지 프로그램은 정지하고 응답이 오면 다시 진행됨. const longTimeTask = () => { // 시간이 오래 걸리는 작업 console.log('시간이 오래 걸리는 작업'); for(let i = 0 ; i < 100000000 ; i++){ console.log("."); } }; console.log('시작'); longTimeTask(); console.log('종료'); 2) 비동기 Request와 Response가 동시에 일어나지 않음. 비동기로 수행을 할 경우, Request를 보낸 후, Response를 기다리지 않고 다음 작업을 바로 진행. con.. [Javascript] Scope와 변수 선언 (var, let, const) 키워드 차이점 스코프(Scope) 식별자 접근 규칙에 따른 유효 범위를 말함. 식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다. 범위는 중괄호(블록) 또는 함수에 의해 나눠진다. 각각 Block Scope, Function Scope라고 불린다. function scopeExample(){ //Function Scope var local = 'Seoul'; console.log(local); { //Block Scope let name = 'Jook'; console.log(`${name} lives in ${local}`); } } 스코프 주요 규칙 1. 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만, 반대는 불가하다. 바깥쪽 스코프에서 선언한 식별자는 안쪽 스코프에서 사용가능. 안쪽 스코프에서 .. [Javascript] Hoisting이란? 호이스팅이란? 코드 실행 전, 변수/함수선언이 파일의 맨 위로 끌어 올려진 "것 같은 현상"을 이야기한다. Hoisting이 발생하는 이유 자바스크립트 엔진 동작의 특징 때문! 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정을 거침 (실행 컨텍스트를 위한 과정) 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언들(var, let, const, function, class)을 메모리에 저장. 코드 실행 전 이미 변수/함수 선언이 메모리에 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작. (정확히는 var 키워드로 선언한 변수와 함수 선언문일 경우 오류 없이 동작.) 따라서 이는 선언이 파일의 맨 위로 끌어올려진 것 처럼 보이게 한다. *실행 컨텍스트는 실.. [Javascript] ES6 문법 정리 ECMAScript란? ECMAScript(ES)는 자바스크립트를 표준화 하기 위해 만들어진, ECMA-262 기술 규겨에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말함. 1) const / let const - 객체와 함께 사용할 때를 제외하고는 변경이 불가능한 변수. 상수로 사용. ex) react에서 특정 이벤트를 실행하는 버튼이 있거나 특정 요소를 정의하는데에 const를 사용. let - 새로운 값을 받을 수도 있고 재할당할 수도 있음. *var을 쓰지않고 const/let을 사용하는 이유는 var의 hoisting현상을 피하기 위함이다. 2) 화살표 함수 function 키워드 없이 함수를 만들 수 있음. return 키워드 없이 식을 계산한 값이 자동으로 반환. ()안에 함수의.. 이전 1 다음
