[JS] Syntax | 12. Arrow function
·
Language/JavaScript
Arrow function은 ES2015부터 새로 추가된 함수 선언 방식입니다. 기존의 function 예약어를 사용해 선언하던 함수를 다음과 같이 선언할 수 있습니다.// 이 함수와const func = function(arg) { return arg * 2;}// 이 함수는 동일합니다.const func = (arg) => { return arg * 2;}만약 받는 매개변수가 하나 뿐이라면, 매개변수의 괄호( )를 생략할 수 있습니다.const func = arg => { return arg * 2;}만약 함수 부분이 return 문 하나로만 구성되어 있다면, 함수 부분의 중괄호{ }도 생략할 수 있습니다.const func = (arg) => arg * 2;단, 객체를 반환할 때는 ..
[JS] Syntax | 11. rest parameter - 가변 변수 사용하기
·
Language/JavaScript
1. argumentargument는 함수에서 가변적인 매개변수들을 받아 접근할 때 사용할 수 있습니다. argument는 유사 리스트의 형태로 반환되어 리스트와 관련된 메소드를 사용할 수는 없습니다. 단, argument.length와 argument[0] 등의 인덱스 접근은 가능합니다.const func1 = (arg1, arg2) => { console.log(arg1); console.log(arg2);}func1(1); // 1, undefinedfunc1(1, 2); // 1, 2func1(1, 2, 3); // 1, 2 (3은 출력되지 않음)const func2 = (arg1, arg2) => { for (const arg of arguments){ ..
[JS] Syntax | 10. 병합연산자(??)
·
Language/JavaScript
JavaScript에서는 and(&&)와 or(||) 연산을 할 때 첫 번째 값에 무엇이 오느냐에 따라 출력값이 달라집니다.operand 1operand 2ANDORTruthyTruthy operand 2operand 1TruthyFalsyoperand 2operand 1FalsyTruthyoperand 1operand 2FalsyFalsyoperand 1operand 2그리고 이를 이용하여 특정 변수에 기본값을 지정하는 코드를 작성할 수도 있습니다.const perhapsNull = null;// perhapsNull이 false라면 'notNull'을, true라면 perhapsNull을 반환합니다.const value = perhapsNull || 'notNull';여기서 true / false 값..
[JS] CommonJS & ES에 대해서
·
Language/JavaScript
CommonJSCommonJS는 주로 Node.js 환경에서 사용되는 모듈 시스템의 표준입니다. 모듈 시스템을 도입하여 특정 함수나 오브젝트를 외부에서 사용할 수 있도록 모듈화 하였습니다.이 덕분에 모듈을 사용하려는 파일에서는 필요한 모듈만 선택적으로 불러와 사용할 수 있게 되었습니다.ESJavaScript를 다루다보면 es6 혹은 es 접두사가 붙은 용어를 볼 수 있습니다. 이 es는 ECMA Script의 약어로, ECMA에서 명시한 문서자료를 가리킵니다.ECMA?ECMA(또는 Ecma) international은 정보와 통신 시스템을 위한 국제적 표준화 기구입니다. JavaScript는 그 역사가 오래된 만큼, 시간이 지남에 따라 많은 부분이 수정되어 왔습니다. Ecma international은 ..
[JS] Library | 02. Papaparse
·
Language/JavaScript
https://www.papaparse.com/ Papa Parse - Powerful CSV Parser for JavaScriptEpiML is an agent-based mathematical model for the web, still in its early stages of development. "Papa makes it so easy to use CSV, which is good for scientists."www.papaparse.comPapaparse는 JS 환경에서 csv 파일을 읽고 파싱할 수 있게 해주는 패키지입니다. Response로 응답받은 csv파일을 csvText라고 할 때, papaparse의 사용법은 아래와 같습니다.Data() signal에는 각 속성에 대한 값이 저장됩..
[JS] Library | 01. Superstruct
·
Language/JavaScript
https://docs.superstructjs.org/ Introduction | SuperstructIntroduction Superstruct makes it easy to define interfaces and then validate JavaScript data against them. Its type annotation API was inspired by TypeScript, Flow, Go, and GraphQL, giving it a familiar and easy to understand API. But Superstruct is desigdocs.superstructjs.org Superstruct는 특정 데이터가 의도된 형식으로 작성되어 있는지 확인하는 유효성 검사를 도와주는 패키지입..
[JS] Syntax | 09. Promise.all()
·
Language/JavaScript
.all()은 여러 개의 Promise를 일괄적으로 처리할 때 사용합니다..all의 인자로는 Promise 객체의 배열 등을 넘겨줄 수 있습니다.const promises = []const asyncFunc = async (i) => { const res = await fetch(`http://.../${i}`) console.log(res)}for (let i=0; iPromise.all()은 배열의 모든 Promise가 fufiled 상태가 될 때 fulfiled 상태가 됩니다.만약 하나 이상의 요소가 rejected 상태가 된다면, Promise.all() 역시 rejected가 됩니다.
[JS] Syntax | 08. .then()
·
Language/JavaScript
1. .then().then은 Promise를 반환하는 작업이 끝난 뒤 작업을 이어 할 수 있게 해주는 구문입니다.사용할 때는 목표하는 함수 뒤에 .then()을 붙이고, 이어서 할 작업을 인자로 넘겨줍니다.const thenFunc = () => { fetch("https://something.com") .then(console.log("fetch done")) // fetch()가 끝난 뒤 이어할 작업을 작성합니다.}then에서 작성할 작업에서 이전 함수(여기서는 fetch입니다)의 결과값을 사용해야 한다면,아래와 같이 함수의 매개변수로 넘겨줄 수 있습니다.const thenFunc = () => { fetch("https://something.com") .then((res) => re..