오늘은 ES6에서 추가 된 문법인 전개구문( Spread Syntax )에 대해 알아보자. 배열이나 객체를 복사하여, 새로운 배열 및 객체를 생성 할 때 사용하는 문법으로, 연결 및 복사 할 때 유용하게 쓰이는 문법이다. 1. 배열에서의 Spread Syntax ----------------------------------------------------------------------------------------------------------------------------------- ES6에 추가된 문법으로 기존에는 각 배열을 합쳐 새로운 배열을 생성할 때 concat함수를 이용하고는 했는데, 전개구문이 나오면서 더 깔끔하게 구현할 수 있게 되었다. 1) 배열병합 2. 배열복사 2. 객체에서의..

기존 ES5에서의 indexOf와 비슷하지만, ES6에서 findIndex()라는 메서드를 지원하며 더욱 강력한 배열 검색 기능을 지원하게 되었다. 가장 큰 차이점은 indexOf이 특정값만 찾는 데 사용되었다면, findIndex()는 filter등의 다른 함수와 조합하여 더욱 복잡한 조건의 검색도 가능하다는 점이다. findIndex()이란? ----------------------------------------------------------------------------------------------------------------------------------- Array.prototype.findIndex() : 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니..

javascript를 이용하다 보면 문자열 및 배열에서 특정값이 있는 지 확인 해야 할 때가 있는데, 그럴 때 Includes()를 활용할 수 있다. Includes()는 ES6에서 추가 된 메서드이다.. MDN에서는 Includes()를 2가지로 나누고 있다. 1. Array.prototype.includes() : 배열이 특정 문자열을 포함하고 있는 지 판별한다. 2. String.prototype.includes() : 하나의 문자열이 다른 문자열에 포함되어 있는 지 판별한다. 결국 판별해주는 함수이기 때문에 둘 다 리턴 되는 값은 true/false이다.. -------------------------------------------------------------------------------..

오늘은 Promise( '이하 프로미스' )에 대해서 정리를 해보려고 한다. Promise 자체가 정리할 게 많기 때문에 1. 프로미스 기본 사용법. 2. 프로미스를 활용한 실제 비동기 통신 이렇게 2단계로 나눠서 정리를 해보려 한다. 프로미스란 무엇일까? ============================================================================ 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미 나는 지금까지 제이쿼리를 활용한 Ajax를 사용해오다가 외부라이브러리를 활용한 Axios, ES6 내장함수인 Fetch..

예전에 setTimeout에 대한 글을 정리했으니, setTimeout의 기본문법에 대해 궁금한 사람은 (해당 링크) 확인 이번에 또 이렇게 글을 쓰게 된 건.. 이번에 async랑 await을 쓰면서 비동기 처리 함수를 동기처리 하는 걸 보고 있는데, 이 setTimeout()은 조금 다르게 동작하는 것 같아서 정리해본다.. 아래 샘플코드는 내가 처음 await으로 setTimeout함수를 사용해보려고 했던 코드와 비슷하게 맞추었다. 샘플코드 내 예상으로는 start => setTimeout log => end 가 순서대로 콘솔에 찍혀야 하는데... 결과는 아래와 같았다. 콘솔에 보이는 것처럼 동기처리가 안되고, end가 먼저 찍히고, setTimeout이 나중에 찍힌 것을 확인 할 수 있다.. 그래서..

이번에 promise를 공부할까 하다가 async와 await을 먼저 공부하게 되서 이렇게 공부한다. 계속 거꾸로 가는 느낌.. 우선 아래와 같은 코드가 있다고 해보자. ( async와 await만 볼 사람은 바로 아래로 내려가도록 하자. ) 샘플코드1 javascript는 동기적인 언어이기 때문에 한줄한줄 순서대로 실행이 될 것이다. 그럼 아래와 같은 결과가 나온다. 그럼 또 하나의 샘플코드를 보자. API통신을 했다고 생각하고 setTimeOut을 줬다.. 샘플코드2 아까도 말했듯 javascript는 동기적인 언어이기 때문에, 한줄한줄 실행이 된다. 그럼 결과는 어떻게 될까? 아래와 같이 실행된다. 동기지만, 비동기인 것처럼 실행이 되었다. 이렇게 보면 별 문제 아니겠지 라고 생각할 수 있지만, 실..