HYE-ON HYE-ON

저번 포스트 Promise에 이어 ES6+에서 비동기 처리를 할 때 사용하는 Async/Await에 대해 알아봅시다. 💪 Async/Await란 Async와 Await는 단순히 말해 Promise의 업데이트된 버전으로, 편리하고 깔끔한 비동기 코드를 작성할 수 있습니다. 먼저 MDN Document에서 Async와 Await를 어떻게 설명하고 있는지부터 살펴볼까요? Async Async를 MDN Document에서 찾아보면 이렇게 설명하고 있습니다. async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. 간단히 한 줄로 정리하자면, A..

JavaScript에서 비동기 처리를 할 때 사용되는 중요한 기능 Promise에 대해 공부했습니다. Promise란? MDN Document에서 Promise는 아래와 같이 설명하고 있습니다. Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. 프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결괏값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 합니다. 즉, Promise는 어떤 값이 언제 리턴될지 모르는 비동기 작업을 진행할 때 사용되는 객체로, 비동기 작업의 실패나 성공 처리를 할 수 있습니다. Promise의 기본 Promise는 세 가지 형태를 갖습니다. 대기(pending): 성공 혹은 실패 여..

개인적으로 ES6+에서 새롭게 추가된 기능 중 가장 편리하다고 생각하는 기능이다! Default Value ES6+에서는 함수에 인자를 받을 때 기본값을 지정할 수 있다. function sayHi(name) { return `hello ${name}`; } sayHi('HYEON'); // hello HYEON sayHi(); // hello undefined sayHi라는 함수가 있을 때, name에 값이 넘어가지 않으면 undefined가 뜬다. 이렇게 원치 않는 undefined가 뜨는 것을 방지하기 위해 function sayHi(name) { if(!name) name = 'stranger'; return `hello ${name}`; } 조건문으로 넘어온 값이 없는 경우 값을 세팅해주는 경우..

저번 글에 이어 배열과 관련된 메서드들을 좀 더 살펴보겠다. Array.of Array.of는 []로 배열을 생성하지 않고 ,로 연결된 문자열들을 배열 형태로 만드는 메서드이다. Array.of() 메서드는 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 Array 인스턴스를 만듭니다. Array.of()와 Array 생성자의 차이는 정수형 인자의 처리 방법에 있습니다. Array.of(7)은 하나의 요소 7을 가진 배열을 생성하지만 Array(7)은 length 속성이 7인 빈 배열을 생성합니다. MDN document const jediNormal = ['Rey', 'Yoda', 'Luke', 'Leia']; // 이렇게 배열을 생성할 수도 있지만 const jediOf = Array.of('Rey..

🚂 Array Function 기존 ES5에서는 배열을 컨트롤할 때 for문이나 each문 등 반복문 안에서 index값을 가지고 배열 내 요소들에 대한 작업을 하곤 했다. ES6+에서는 배열을 컨트롤하는 다양한 함수들을 제공해주기 때문에 반복문을 사용하지 않고도 배열로 원하는 값을 리턴 받는 등의 작업을 쉽게 처리할 수 있다. 🔭 find find는 이름 그대로 배열에서 조건에 맞는 요소 중 첫번째 요소를 리턴하는 메서드이다. find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다. MDN document 현재 요소, 현재 요소의 인덱스, 현재 배열을 파라미터로 전달받는다. const emails = ['aaa@abc.com..

➰ forEach forEach 반복문은 각각의 엘리멘트에 반복해 특정한 함수를 실행하는 반복문이다. forEach 안에서 동작하는 함수의 인자는 현재 요소, 현재 인덱스, 현재 배열 (배열 전체)로 총 3개가 있다. let crews = ['Kirk', 'Spock', 'Sulu', 'Uhura', 'Chekov', 'Scott', 'McCoy']; crews.forEach((crew, index, currentArr) => console.log(`This is ${crew}`)); 이때 forEach()는 Array에만 사용할 수 있다. 만약 Array-like Object에서 forEach를 호출한다면 let divs = document.getElementsByClassName('list-div')..

🔜 Arrow Function Arrow Function, 화살표 함수는 ES6에서 발표된 형태의 함수이다. 이름 그대로 화살표 => 모양을 사용한 함수로, 우리가 평소에 function 키워드를 이용해 함수를 사용했던 것에 비해 짧고 깔끔한 코드를 작성할 수 있는 것이 특징이다. 그럼 ES5에서 썼던 함수 형태와 ES6의 화살표 함수 형태를 비교해보자! // ES5 function helpMe() { console.log('Obi-Wan Kenobi'); } // or var helpMe = function() { console.log('Obi-Wan Kenobi'); } // ES6 const helpMe = () => { console.log('Obi-Wan Kenobi'); } 화살표함수는 이렇게..

🤔 ES6? ES6는 ECMA2015 버전으로, 2009년에 나온 ES5에서 Arrow function, map, filter 등이 추가되며 큰 폭의 변화가 생긴 자바스크립트 버전이다. ES6로는 더 쉽고 간결한 방법으로 코드를 짤 수 있으며 위에서 잠시 언급했다시피 Class, Module, Arrow function, let & const, 비구조화 할당, Promise 등 추가된 다양한 기능을 활용할 수 있다. 🕰 ES6 이전의 변수들 let과 const가 생기기 이전에 var라는 예약어가 있었다. var는 한 번 선언하면 함수, 블록에 관계없이 전역에서 사용할 수 있는 범위를 가져 언제 어디에서 어떻게 값이 변경되었는지 알기 힘들다. 이렇게 변수의 scope가 전역이고 hoisiting이 일어난다..