https://jaeyeophan.github.io/2017/05/16/Everything-about-babel/

[Tool] (번역) Everything you need to know about BabelJS

원본 : http://kleopetrov.me/2016/03/18/everything-about-babel/
이 글은 위 글을 기반으로 하여 나름 최신으로 업데이트하며 작성되었습니다 :) 물론, 본 저자의 동의하에 작성되었습니다.

babel

Babel은 아시다시피 ES6/ES7 코드를 ECMAScript5 코드로 transpiling 하기 위한 도구입니다. Babel은 다양한 작은 모듈들로 구성되어 있습니다. Babel 다양한 모듈을 담는 일종의 상자 역할을 하며 코드를 컴파일 하기 위해 작은 모듈들(ex. presets)을 사용합니다.

Set up

babel 학습을 위한 디렉토리를 구축합니다.

1
2
3
4
$ mkdir babel-tutorial && cd babel-tutorial
$ npm init
$ mkdir src && touch src/example.js
# Write some code of ES6 syntax in example.js

bael-cli

bael-cli는 command line을 통해 코드를 transpile 할 수 있는 도구입니다.

1
2
3
$ npm install --save-dev babel-cli
# or
$ yarn add -D babel-cli

-g 옵션을 통해서 bael-cli를 전역에 설치할 수도 있지만 --save-dev 옵션으로 설치하는 이유는 하나의 컴퓨터에 존재하는 다른 프로젝트들이 각각 다른 버전의 babel에 의존성을 갖고 있을 수 있습니다. --save-dev 옵션을 통해서 이를 해결할 수 있습니다.

설치한 후 터미널에서 다음 명령을 실행할 수 있습니다.

1
$ babel example.js --out-file compiled.js

이 명령어는 다음과 같은 의미를 담고 있습니다.

  • babel - babel을 호출합니다.
  • example.js - transpile 하고자하는 ES6/ES7의 자바스크립트 파일입니다.
  • --out-file - babel에게 전달할 옵션을 명시합니다. 파일로 output을 지정하는 옵션입니다.
    cf1> shortcut으로 -o 옵션을 제공합니다.
    cf2> 이 이외에도 --out-dir or -d 옵션을 전달할 수 있습니다.
  • compiled.js - 출력 파일의 이름을 명시합니다.

npm script를 사용하여 해당 프로세스를 자동화 할 수 있습니다.

package.json
1
2
3
4
5
6
7
{
...
"scripts": {
"build": "babel ./src -d ./lib -w"
}
...
}

and

1
$ npm run build

src 디렉토리 밑에 있는 파일을 transpile하여 lib 디렉토리 밑으로 output을 출력합니다. 이 때는 동일한 파일명이 사용됩니다. -w 옵션을 통해서 src 디렉토리 밑의 파일들이 변경될 때마다 자동으로 transpile 하도록 할 수 있습니다.

babel-register

babel-register는 각각의 모듈을 결합할 때 사용되는 후크(Hook) 모듈입니다. require 메소드를 바인드하여 자바스크립트 코드를 transpile 시킵니다. babel-register 모듈은 production을 위한 모듈은 아닙니다. 예를 들어 mocha 기반의 ES6로 작성된 테스트 코드를 실행시키기 위해서는 다음과 같은 스크립트를 사용할 수 있습니다.

package.json
1
2
3
"script": {
"test": "mocha --require babel-register"
}

Configuring Babel

처음에도 말했듯이, babel에게 어떠한 정보를 전달해주지 않는 한 babel은 아무 작업도 수행하지 않는 ‘상자’에 불과합니다. 방금 전에 살펴봤던 예제에서 아무 옵션없이 babel을 실행시키면 src 디렉토리에 있는 파일을 lib 디렉토리에 옮기는 작업만 수행하게 됩니다. 그렇기 때문에 babel에게 설정 정보를 전달해줘야 합니다. 이 정보는 .babelrc파일을 통해서 전달할 수 있습니다.

.babelrc

.babelrc파일은 babel을 설정하기 위한 파일입니다. 다음과 같이 구성되어 있습니다.

.babelrc
1
2
3
4
{
"presets": [],
"plugins": []
}

presets를 추가하기 위해서는 npm 설치가 필요합니다.

1
$ npm install --save-dev babel-preset-es2015

만약 React code를 transpile해야 한다면 다음과 같이 설치해줍니다.

1
$ npm install --save-dev babel-preset-react

그리고 .babelrc파일을 수정해줍니다.

.babelrc
1
2
3
4
{
"presets": ["es2015", "react"],
"plugins": []
}

자바스크립트 스펙으로 아직 확정되지 않은 proposal 스펙들이 존재합니다. 이들은 5개의 stage로 구분됩니다. babel에서는 각각의 stage에 대해서 preset을 제공합니다.

  • babel-preset-stage-0
  • babel-preset-stage-1
  • babel-preset-stage-2
  • babel-preset-stage-3

babel-preset-stage-4는 babel-preset-es2015를 의미합니다. 각각의 stage에 대해서도 위와 같은 방법으로 설치하고 .babelrc파일을 수정하여 사용할 수 있습니다. 하지만 babel에서 이들을 모두 한번에 사용할 수 있도록 해주는 preset을 하나 제공했는데요, 바로 babel-preset-env입니다. 이 preset으로 모든 stage를 대체할 수 있습니다.

babel-polyfill

babel-polyfill은 ES6 환경을 제공해줍니다.
polyfill이 없는 경우를 예제를 통해 살펴봅니다.

ES6
1
2
function allAdd() {
return Array.from(arguments).map(a => a + 2);

위 코드는 babel에 의해 다음과 같이 transpile됩니다.

ES5
1
2
3
4
5
function allAdd() {
return Array.from(argument).map(function(a) {
return a + 2;
});
}

Array.from()은 ES6 syntax이므로 지원하지 않는 브라우저가 존재하기 때문에 위 코드는 transpile은 되었지만 모든 브라우저에서 작동하지 않습니다. 이 문제를 해결하기 위해서 polyfill을 사용해야 합니다. polyfill이란 code 조각으로 런타임에 존재하지 않는 native API의 복사본을 말합니다.

babel-polyfill 사용을 위해서 다음과 같이 npm을 설치해줍니다.

1
$ npm install --save-dev babel-polyfill

그리고 해당 polyfill이 필요한 곳에서 import해줍니다.

1
import 'babel-polyfill';

만약 webpack과 함께 사용한다면 entry point에 babel-polyfill을 추가해줍니다.

webpack.config.js
1
2
3
4
module.exports = {
entry: ['babel-polyfill', '...']
...
};

babel-plugins

아직 공식 스펙에서 지원하지 않은 기능들을 transform-plugin을 추가하여 사용할 수 있습니다. 여러 플러그인은 babel 공식 홈페이지에서 확인실 수 있습니다. 추가로 설치한 플러그인은 plugins 옵션으로 추가할 수 있습니다. .babelrc파일에서 설정해줄 수도 있고 Webpack이란 도구에서도 설정해줄 수 있습니다.

주로 Webpack이라는 도구와 함께 사용하는 babel에 대해서 알아봤는데요, webpack과 함께 사용하는 것에 대해서는 Webpack2 입문 가이드 포스팅에 자세히 나와있습니다 :)

end

Reference


'C Lang > JS Program Diary' 카테고리의 다른 글

Babel이란?  (0) 2020.02.18
New features of ES6, ES7, ES8, ES9 and ES10  (0) 2020.02.12
JavaScript 버전별 표준  (1) 2019.09.06
javascript program diary  (0) 2018.05.13

https://medium.com/@ljs0705/babel-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-a1d0e6bd021a
 
react로 개발을 하고 있다면 거의 대부분 babel도 함께 사용하고 있을 것이다.create-react-app에도 기본으로 들어있고 기타 react 관련된 튜토리얼을 따라 하다 보면 자연스럽게 babel을 설치하게 된다. 굳이 react가 아니더라도 자바스크립트를 많이 사용한다면 babel을 함께 사용할 것을 추천한다.

babel은 자바스크립트 컴파일러다. 입력은 자바스크립트 코드고 출력도 자바스크립트 코드다. 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다.

ES6 문법

특히 ES6에는 상당히유용한 문법이 많다. 간단히 몇 가지만 살펴보자

arrow function

arrow function을 사용하면 함수 선언이 간단해진다. arrow function의 this는 자신을 포함하는 가장 근접한 일반 함수의 this를 참조한다. 따라서 arrow function의 this는 arrow function이 호출되는 시점과는 무관하게 선언되는 시점에 결정된다. 개인적으로 이 점이 상당히 편리해서 잘 쓰고 있다.

dataList.forEach(item => console.log(item.value))

classes

생성자, 상속 등의 클래스 기능을 사용할 수 있다.

enhanced object literals

object 생성이 편리해졌다.

// 예전 방식  
const obj = {  
foo: foo,  
bar: 42  
}  
// es6  
const obj = {  
foo,  
bar: 42  
}

template strings

여러 개의 문자열을 +로 붙이는 작업은 상당히 성가시다. 아래의 방식으로 자연스럽게 표현이 가능해졌다.

const msg = `Hello ${name}, current time is ${time}`

destructuring

object에서 필요한 부분만 뽑아낼 때 편리하다. 특히 함수에서 매개변수의 일부만 입력으로 받고 싶을때 유용하다.

const {foo} = obj;  
function savePerson({name, age, onSuccess, onFail}) {...}savePerson({name: "berry", onSuccess: () => alert("person saved")})

let & const

수정 가능한 변수는 let, 수정 불가능한 변수는 const를 사용한다. let은 var와 유사하지만 block-scope라는 차이점이 있다. var는 block-scope가 아니라서 실수하기가 쉽다. 또한 let과 const를 사용하면 코드가 좀 더 읽기 쉬워진다.

babel-polyfill

babel을 사용한다고 자바스크립트 최신 함수를 사용할 수 있는 건 아니다. 초기에 babel만 믿고 최신 함수를 사용했다가 브라우저에서 동작하지 않는 것을 보고 당황했었다. babel은 문법을 변환해주는 역할만 할 뿐이다. polyfill은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 각 object의 prototype에 붙여주는 역할을 한다. 즉, babel은 컴파일-타임에 실행되고 babel-polyfill은 런-타임에 실행된다.

babel-polyfill을 사용하고 싶다면 별도로설정해줘야 한다.

.babelrc

.babelrc파일을 프로젝트 root 폴더에 생성하자. plugins와 presets 속성이 중요하다. 위에서 설명했던 각 문법이 하나의 plugin이라고 생각하면 된다. 그리고 preset은 plugin 여러 개가 묶여있는 개념이다. 대표적으로 ES6 문법을 모아놓은 es2015 preset과 react 문법을 모아놓은 react preset이 있다. 사용할 preset을 presets에 추가하고 presets에 속해있는 plugin 외에 추가로 사용하고 싶은 plugin은 plugins에 넣자.

babel-cli

보통은 webpack을 사용해서 빌드하겠지만 직접 cli로 빌드할 수도 있다. 자세한 사용법은여기를 참고하자.

여기에서 babel의 출력을 테스트해볼 수 있다. 아래의 코드를 입력해보자.

const test1 = (a, b) => a + b

https://programming.vip/docs/new-features-of-es6-es7-es8-es9-and-es10.html

New features of ES6, ES7, ES8, ES9 and ES10

1. New features of ES6 (2015)

  • class
  • Modularization
  • Arrow function
  • Function parameter defaults
  • Template string
  • Destructuring assignment
  • Extension operator
  • Object attribute shorthand
  • Promise
  • Let and Const

1.1 module

ES5 does not support native modularity, and modules are added as an important part of ES6. The function of the module is mainly composed of export and import. Each module has its own scope. The mutual calling relationship between modules is to specify the exposed interfaces of modules through export, and to reference the interfaces provided by other modules through import. At the same time, it also creates a namespace for the module to prevent function naming conflicts.

1.1.1 export


//Derived variables
export var name = 'Rainbow'
 
var name = 'Rainbow';
var age = '24';
export {name, age};
 
 
//Derived constant
export const sqrt = Math.sqrt;
 
//derived function
export function myModule(someArg) {
  return someArg;

1.1.2 import

import {myModule} from 'myModule';//Structure assignment is used
import {name,age} from 'test';
 
//An import statement can import default functions and other variables at the same time.
import defaultMethod, { otherMethod } from 'xxx.js';

1.2 Arrow function

This is one of the most exciting features of ES6. =>It's not just a shorthand for the keyword function, it brings other benefits. Arrow function shares the same this with the surrounding code, which can help you to solve the problem of this pointing. Experienced JavaScript developers are familiar with patterns such as var self = this; or var that = this that refer to peripheral this. But with = > this mode is not needed.

1.2.1 structure of arrow function

Arrow function's arrow = > before is an empty bracket, a single parameter name, or multiple parameter names enclosed in brackets, and after the arrow can be an expression (as the return value of the function), or the function body enclosed in curly brackets (you need to return the value by yourself, otherwise it is undefined).

// Examples of arrow functions
()=>1
v=>v+1
(a,b)=>a+b
()=>{
    alert("foo");
}
e=>{
    if (e == 0){
        return 0;
    }
    return 1000/e;

The original said:

"Whether it's an arrow function or a bind function, it returns a new function reference every time it's executed, so if you need a function reference to do something else (such as uninstalling the listener), you have to save the reference yourself."

//Wrong practice
class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
    }
    onAppPaused(event){
    }
}
 
//Correct approach
class PauseMenu extends React.Component{
    constructor(props){
        super(props);
        this._onAppPaused = this.onAppPaused.bind(this);
    }
    componentWillMount(){
        AppStateIOS.addEventListener('change', this._onAppPaused);
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this._onAppPaused);
    }
    onAppPaused(event){
    }
}
 
//The right way to simplify
class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused);
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused);
    }
    onAppPaused = (event) => {
        //Define the function directly as an arrow function attribute, and bind this pointer when initializing
    }
}
 
 
//It should be noted that no matter bind or arrow function is executed, a new function reference is returned every time,
//So if you need a function reference to do something else (such as uninstalling the listener), you have to save the reference yourself.

1.3 default parameters

const test = (a='a',b='b',c='c')=>{
    return a+b+c
}
 
console.log(test('A','B','C')) //ABC
console.log(test('A','B'))     //ABc
console.log(test('A'))         //Abc

1.4 template string

//Do not use template string:
 
var name = 'Your name is ' + first + ' ' + last + '.'
 
//Use template string:
 
var name = `Your name is ${first} ${last}.`

1.5. Structure assignment

1.5.1 structure assignment of array


var foo = ["one", "two", "three", "four"];
 
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
 
//If you want to ignore some values, you can get the values you want as follows
var [first, , , last] = foo;
console.log(first); // "one"
console.log(last); // "four"
 
//You can write like this
var a, b; //Declare variables first
 
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

Use structure assignment to exchange the values of two variables.

var a = 1;
var b = 3;
 
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

1.5.2 structure assignment of objects

const student = {
  name:'Ming',
  age:'18',
  city:'Shanghai'  
};
 
const {name,age,city} = student;
console.log(name); // "Ming"
console.log(age); // "18"
console.log(city); // "Shanghai"

1.6 spread operator

Expand an array or object.

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];// Append all elements in arr2 after arr1 and return
//Equate to
var arr4 = arr1.concat(arr2);
 
 
 
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
 
var clonedObj = { ...obj1 };
// Cloned object: {foo: 'bar', X: 42}
 
var mergedObj = { ...obj1, ...obj2 };
// Merged object: {foo: 'Baz', X: 42, Y: 13}

Application in react

const params = {
    name: 'Jine',
    age: 21
}
<CustomComponent {...params} />
 
 
var params = {
    name: '123',
    title: '456',
    type: 'aaa'
}
 
var { type, ...other } = params;
 
<CustomComponent type='normal' number={2} {...other} />
//Equate to
<CustomComponent type='normal' number={2} name='123' title='456' />

1.7Promise


var test = (a,b)=>{
    return new Promise((reslove,reject)=>{
        //Asynchronous operation
        //...
        
        reslove(resoult)//Return correct results
        
        //...
        reject(err)    //Results on error
    })
}
 
 
//Use
 
test(a,b).then(res=>{
    //... promise reslove() returns the correct result and executes here
}).catch(err=>{
    //After the previous reject (err), the code will execute into
})
 
//perhaps
 
try{
    var resoult = await test(a,b)
    //...
}catch(er){
    //...
}

2 new features of ES7 (2016)

  • The array includes() method is used to determine whether an array contains a specified value. If it does, it returns true, otherwise it returns false.
  • a ** b index operator, which is the same as Math.pow(a, b).

    2.1 includes()

The includes() function is used to determine whether an array contains a specified value. If it does, it returns true. Otherwise, it returns false.

let arr = ['react', 'angular', 'vue'];
 
if (arr.includes('react'))
{
    console.log('react existence');
}

2.2 index operator**

In ES7, the exponential operator is introduced, and the result is equivalent to Math.pow(..)

console.log(2**10);// Output 1024
console.log(Math.pow(2, 10)) // Output 1024

3 new features of es8 (2017)

  • async/await
  • Object.values()
  • Object.entries()
  • String padding: padStart() and padEnd(), the padding string reaches the current length
  • Comma is allowed at the end of function parameter list
  • Object.getOwnPropertyDescriptors()
  • ShareArrayBuffer and Atomics objects for reading and writing from shared memory locations

    3.1 async/await

  async function init() {
    console.log('start')
    await this.testSync()
    console.log('End')
  }
  this.init()
  async function testSync() {
    const response = await new Promise(resolve => {
      setTimeout(() => {
          resolve("async await test...");
        }, 1000);
    });
    console.log(response);
  }

3.2 Object.keys()

var obj = { foo: "bar", baz: 42 };
Object.keys(obj)
// ["foo", "baz"]

3.3 Object.values()

var obj = { foo: "bar", baz: 42 };
Object.values(obj)
// ["bar", 42]

3.4 Object.entries()

The Object.entries method returns an array of key value pairs of all enumerable properties of the parameter object itself (excluding inheritance).

var obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]


const obj1 = {a: 1, b: 2, c: 3}
for(let [key,value] of Object.entries(obj1)){
    console.log(`key: ${key} value:${value}`)
}
//key:a value:1
//key:b value:2
//key:c value:3

One use of the Object.entries method is to turn an object into a real Map structure.

var obj = { foo: 'bar', baz: 42 };
var map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }

Object object keys(), values() entries()

3.5 String padding

String.padStart(targetLength,[padString])

String.padEnd(targetLength,padString])

  • targetLength: the target length to which the current string needs to be populated. If the value is less than the length of the current string, the current string itself is returned.
  • padString: (optional) fills the string. If the string is too long, so that the length of the filled string exceeds the target length, only the leftmost part will be retained, and the rest will be truncated. The default value of this parameter is' '.

console.log('0.0'.padStart(4,'*'))
console.log('0.0'.padStart(20))
console.log('0.0'.padEnd(4,'*')) 
console.log('0.0'.padEnd(10,'*'))
 
/*
*0.0
                 0.0
0.0*
0.0*******
*/

3.6 Object.getOwnPropertyDescriptors()

The Object.getOwnPropertyDescriptor method returns an object (descriptor). ES6 introduces the Object.getOwnPropertyDescriptors method, which returns the description object of all its own properties (non inherited properties) of the specified object.

const obj = {
  foo: 123,
  get bar() { return 'abc' }
};
 
Object.getOwnPropertyDescriptors(obj)
// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }

In the above code, the Object.getOwnProperDescriptors method returns an object. The property names of all the original objects are the property names of the object, and the corresponding property values are the property description objects.
The main purpose of this method is to solve the problem that Object.assign() can't copy get and set attributes correctly.

const source = {
  set foo(value) {
    console.log(value);
  }
};
 
const target1 = {};
Object.assign(target1, source);
 
Object.getOwnPropertyDescriptor(target1, 'foo')
// { value: undefined,
//   writable: true,
//   enumerable: true,
//   configurable: true }

In the above code, the value of the foo attribute of the source object is an assignment function. The Object.assign method copies this attribute to the target1 object. As a result, the value of this attribute becomes undefined. This is because the object. Assign method always copies the value of an attribute, not the assignment method or value method behind it.
ES6 object extension - Object.getOwnPropertyDescriptors()

3.7 SharedArrayBuffer object

With SharedArrayBuffer, multiple web workers can read and write the same block of memory at the same time. You no longer need postMessage communication with delay. Multiple web workers have no delay in data access

The SharedArrayBuffer object is used to represent a general, fixed length raw binary data buffer, similar to the ArrayBuffer object, which can be used to create views on shared memory. Unlike ArrayBuffer, SharedArrayBuffer cannot be separated.

/**
 * 
 * @param {*} length The size of the array buffer created, in bytes.  
 * @returns {SharedArrayBuffer} A new SharedArrayBuffer object of the specified size. Its contents are initialized to 0.
 */
new SharedArrayBuffer(length)

Illustration of ArrayBuffers and shared ArrayBuffers

3.8 Atomics objects

The Atomics object provides a set of static methods for atomic manipulation of the SharedArrayBuffer object.

These atomic operations belong to the Atomics module. Unlike general global objects, Atomics is not a constructor, so it cannot be called with the new operator or directly as a function. All properties and methods of Atomics are static (like the Math object).

Multiple threads sharing memory can read and write data at the same location at the same time. Atomic operation ensures that the value of the data being read or written meets the expectation, that is, the next atomic operation will not start until the end of the previous atomic operation, and its operation process will not be interrupted.

Atomics.add()
//Adds an array element at the specified location to the given value and returns the value of the element before it is added.
 
 
Atomics.and()
//Compares the array element at the specified location with the given value, and returns the value of the element before the operation.
 
 
Atomics.compareExchange()
//If the element specified in the array is equal to the given value, it is updated to the new value and the original value of the element is returned.
 
 
Atomics.exchange()
//Updates the element specified in the array to the given value and returns the value before the element is updated.
 
 
Atomics.load()
//Returns the value of the specified element in the array.
 
 
Atomics.or()
//Compares the array element at the specified location with the given value, and returns the value of the element before the or operation.
 
 
Atomics.store()
//Sets the element specified in the array to the given value and returns the value.
 
 
Atomics.sub()
//Subtracts an array element at the specified location from the given value and returns the value of the element before subtraction.
 
 
Atomics.xor()
//The array element at the specified location is different from the given value or, and the value of the element before the exclusive or operation is returned.
 
//The wait() and wake() methods use the futexes model on Linux (fast user space mutex,
//Fast user space mutex), which allows processes to wait until a specific condition is true, is mainly used to implement blocking.
 
Atomics.wait()
//Checks whether the value at a specified location in the array is still the given value, and if it is, holds until it wakes up or times out.
//The return value is "ok", "not equal" or "time out". When called, an exception is thrown if the current thread does not allow blocking
//Most browsers do not allow wait() to be called in the main thread.
 
 
Atomics.wake()
//Wakes up the thread in the waiting queue waiting on the element at the specified position in the array. The return value is the number of threads successfully woken.
 
 
Atomics.isLockFree(size)
//It can be used to detect whether the current system supports hardware level atomic operation. For arrays of a specified size, if the current system supports hardware level atomic operations,
//Returns true; otherwise, it means that for the array, each atomic operation in the Atomics object can only be implemented with a lock. This function is for technical experts.

4 new features of es9 (2018)

  • Asynchronous iterator
  • Template string for non escape sequence
  • Regular expression reverse (look behind) assertion (this article)
  • Regular expression Unicode escape
  • Regular expression s/dotAll mode
  • Regular expression named capture group
  • Object expansion operator
  • Promise.prototype.finally

4.1 asynchronous iterator

ES2018 introduces asynchronous iterators, just like regular iterators, except that the next() method returns a Promise. Therefore, await can be used with the for...of loop to run asynchronous operations in a serial manner. For example:

async function process(array) {
  for await (let i of array) {
    doSomething(i);
  }
}

4.2 template string of non escape sequence

Tags allow you to parse Template Strings with functions. The first parameter of the tag function contains an array of string values. The rest of the parameters are expression dependent. Finally, your function can return the processed string (or it can return something completely different).

function foo(str) {
    return str[0].toUpperCase();
}

foo`justjavac`; // Output JUSTJAVAC
foo`Xyz`; // Output XYZ

New features of ES2018: template string of non escape sequence

4.3 regular expression backward assertion (this article)

Assertion is a test of characters before or after the current matching position. It does not actually consume any characters, so assertion is also called "non consuming matching" or "non obtaining matching".

There are four forms of regular expression assertions:

  • (? = pattern) zero width positive lookahead assertion
  • (?! pattern) zero width negative lookahead assertion
  • (? < pattern) zero width positive look behind assertion
  • (? <! Pattern) zero width negative look behind assertion

The pattern in this is a regular expression.

lookahead and lookbehind are translated into:

  • Positive negative
  • Forward backward
  • Forward and reverse
  • Forward looking and backward looking
  • ......

This document uses forward and reverse.
Look behind assertion

4.4 regular expression Unicode escape

Generally speaking, the number character interpretation [0-9], the word character is [0-9a-zA-Z], and the blank character includes spaces, carriage returns and other characters, but this is the case in ASCII encoding, not in Unicode encoding.

                                    . Therefore, if you specify that regular expressions use Unicode mode in Python 2 (the simplest way to interpret is to specify the pattern modifier (? u) at the beginning of regular expressions), \ d \ w \ s can match all corner numbers, Chinese characters, and all corner spaces. In this case, it is called the Unicode matching rule in this book; correspondingly, the matching in the previous ASCII encoding is called the ASCII matching rule.
Regular expression -- Unicode matching rule

4.5 regular expression s/dotAll mode

Regular expression s/dotAll mode

4.6 regular expression named capture group

const
  reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  match  = reDate.exec('2018-04-30'),
  year   = match.groups.year,  // 2018
  month  = match.groups.month, // 04
  day    = match.groups.day;   // 30
 
const
  reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  d      = '2018-04-30',
  usDate = d.replace(reDate, '$<month>-$<day>-$<year>');

4.7 object expansion operator

let a = [1,2,3];
let b = [0, ...a, 4]; // [0,1,2,3,4]
 
let obj = { a: 1, b: 2 };
let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }
let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }
let object = {
  a: '01', b: '02'
};
 
let newObject = {
  c: '03',
  ...object
};
 
console.log(newObject); //{c: "03", a: "01", b: "02"}

4.8 Promise.finally()

A Promise call chain either successfully reaches the last. then(), or fails to trigger. catch(). In some cases, you want to run the same code no matter whether Promise runs successfully or fails, such as clearing, deleting conversations, closing database connections, etc.

function doSomething() {
  doSomething1()
  .then(doSomething2)
  .then(doSomething3)
  .catch(err => {
    console.log(err);
  })
  .finally(() => {
    // finish here!
  });
}

5 new features of ES10 (2019)

  • Added the flat() method and flatMap() method of Array
  • Added trimStart() method and trimEnd() method of String
  • Object.fromEntries()
  • Symbol.prototype.description
  • String.prototype.matchAll
  • Function.prototype.toString() now returns exact characters, including spaces and comments
  • JSON⊂ECMAScript
  • Simplify try {} catch {} and modify the catch binding
  • New basic data type BigInt
  • globalThis
  • import()
  • Legacy RegEx
  • Private instance methods and accessors

5.1 add the flat() method and flatMap() method of Array

flat() and flatMap() are essentially operations of reduce and concat.
The flat() method recursively traverses the array at a specified depth, and merges all elements and elements in the traversed sub array into a new array to return.

  • The basic function of flat() method is to reduce the dimension of array
  • Secondly, we can use the characteristics of the flat() method to remove the empty items of the array

5.1.1 flat()

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]
 
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
 
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
 
//Using Infinity as the depth, expand the nested array of any depth
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]
 
 
//Remove null items
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

5.1.2 flatMap()

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// Only "flatten" the array returned by the function in flatMap
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

5.2 added trimStart() method and trimEnd() method of String

String.trimStart() can be used to remove whitespace from the beginning of a string. String.trimEnd() can be used to remove whitespace from the end of a string.

let  greeting =  "    Hello World";
console.log(greeting.trimStart());// "Hello World"

let greeting = "Hello World    ";
console.log(greeting.trimEnd());// "Hello World"

5.3 Object.fromEntries()

The function of the Object.entries() method is to return an array of key value pairs of enumerable properties of a given object, which is arranged in the same order as when the for...in loop is used to traverse the object (the difference is that the for in loop also enumerates properties in the prototype chain).

Object.fromEntries() is the inversion of Object.entries().

The Object.fromEntries() function passes in a list of key value pairs and returns a new object with these key value pairs. This iteration parameter should be an object that can implement the @ iterator method and return an iterator object. It generates an array like object with two elements, the first being the value to be used as the attribute key, and the second being the value associated with the attribute key.

  • Through Object.fromEntries, Map can be converted to Object:
const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
const obj = Object.fromEntries(map);
console.log(obj); // { foo: "bar", baz: 42 }
  • Through Object.fromEntries, you can convert Array to Object:
const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }

5.4 Symbol.prototype.description

Read only description property, which is a string that returns an optional description of a Symbol object.

let mySymbol = `My Symbol`;

let symObj = Symbol(mySymbol);

console.log(symObj) // Symbol(mySymbol);

console.log(String(symObj) === `Symbol(${mySymbol})`); // true

console.log(symObj.description); // "My Symbol"

5.5 String.protype.matchAll()

The matchAll() method returns an iterator of all the results of matching a string with a regular expression, including the capture group.

const string = 'Hexadecimal number:DEADBEEF CAFE'
const regex = '\b\p{ASCII_Hex_digit}+\b/gu'

for(const match of string.match(regex)) {
  console.log(Math)
}
/*
  output
  DEADBEEF
  CAFE
*/
// 2.string.matchAll gives more detailed information about each match
const string = 'Hexadecimal number:DEADBEEF CAFE'
const regex = '\b\p{ASCII_Hex_digit}+\b/gu'

for(const match of string.matchAll(regex)) {
  console.log(Math)
}
/*
 output
 ["DEADBEEF", index: 8, input: "Hexadecimal number: DEADBEEF CAFE", groups: undefind]
 ["CAFE", index: 17, input: "Hexadecimal number: DEADBEEF CAFE", groups: undefind] 
*/

5.6 Function.prototype.toString() now returns exact characters, including spaces and comments

The toString() method returns a string representing the source code of the function. In ES6, when toString is called on a function, it returns the string representation of the function according to the ECMAScript engine. If possible, it will return the source code, otherwise - a standardized placeholder.

this.fruits = []
function buyFruits(fruit) {
  this.fruits = [...this.fruits, fruit]
}
console.log(buyFruits.toString())

/*
function buyFruits(fruit) {
  this.fruits = [...this.fruits, fruit]
}
*/

5.7 JSON⊂ECMAScript

In versions prior to ES10, non escaped line separator U+2028 and paragraph separator U+2029 are not accepted.

U+2028 is the paragraph separator.
U+2029 is the line separator.

let LS = ""
const PS = eval("'\u2029'")

5.8 simplify try {} catch {} and modify catch binding

The optional catch binding allows developers to use try/catch in catch blocks without using the error parameter.

// Use before ES2019
try {
  // some code
}catch (err) {
  // error handling code
}

// Now use try / catch like ES2019:
try  {
  // some code
}catch {
  // error handling code
}

5.9 new basic data type BigInt

BigInt is the seventh primitive type, which is an integer of arbitrary precision. Not just the maximum at 900719925474092.

13 new features of ES10

Keywords: Javascript Attribute React ascii encoding

'C Lang > JS Program Diary' 카테고리의 다른 글

바벨에 필요한 모든 것 : 실행방법, 주요 함수, 사용법  (0) 2020.02.18
Babel이란?  (0) 2020.02.18
JavaScript 버전별 표준  (1) 2019.09.06
javascript program diary  (0) 2018.05.13

https://medium.com/@hyunalee419/javascript-%ED%91%9C%EC%A4%80-58799e7a922f



JavaScript 표준

이현아
이현아
Sep 13, 2018 · 13 min read

EMCAScript

Ecma International

종류

ES1, ES2, ES3, ES4

ES5

ES6 / ES2015

ES7 / ES2016

let numbers = [1, 2, 3, 4];if (numbers.indexOf(2) !== -1) {console.log('Contains');}// ES2016if (numbers.includes(2)) {console.log('Contains');}
// NaN 포함여부 확인let numbers = [1, 2, 3, 4, NaN];console.log(numbers.indexOf(NaN)); // prints -1console.log(numbers.includes(NaN)); // prints true
let base = 3;let exponent = 4;console.log(base**exponent); // 81

ES8 / ES2017

ES9 / ES2018


TypeScript

TypeScript란?

TypeScript의 특징

TypeScript와 ECMAScript

TypeScript — The Myth of the Superset

왜 TypeScript를 사용해야하는가?

TypeScript의 구성요소



▶ "use strict" 
 간단히 말하면 use strict는 엄격한 코딩 규약을 적용시키는 것인데, *엄격한 코딩규약이란 무엇인지 *왜 사용하는지 등에 관해서는 아래의 링크를 참고하기 바란다.


http://jundol.kr/5
https://www.w3schools.com/js/js_strict.asp


▶ 함수나 변수명 앞에 underbar(_)를 사용하는 이유

 자바에선 public인지, private인지 알릴 방법이 없기 때문에 _로써 이건 private입니다 라고 약속하는 것


function _listen() {
_listenToLine();
_listenToLineWorks();
_listenToCotoha();
_listenToBlApi();
//_listenToMobile();
// _listenToSkype();
}




표현식과 템플릿 문자열

-벡틱문자 (`)사이에 ${}을 이용하면, 문자열내에 변수나 수식 사용가능, 심지어 함수도 사용가능

-문자열의 개행을 기존 문자열 개행하듯 하면됨 \n 사용할 필요없음


 template literals.라 불리며 String안에 변수가 위치하게 해준다.

이때 주의할 점은 싱글쿼테이션 '' 안에 들어가는 것이 아니라, `` 안에 들어가는 것임에 유의하자!

var foo = 'bar';
console.log(`Let's meet at the ${foo}`);
// Let's meet at the bar


1
2
3
4
5
6
7
8
9
let list = [1,2,3,4,5,6];
let num = list.filter(function(n){
    return n
});
 
 
console.log(`
num = ${num}
`);
cs


https://stackoverflow.com/questions/35835362/what-does-dollar-sign-and-curly-braces-mean-in-a-string-in-javascript



▶nodejs에서 프로젝트 초기 설정파일을 불러오는 방법 : config 모듈

 config모듈을 사용. 아래의 포스트 참고

http://valuefactory.tistory.com/205



▶nodejs에서 log를 기록해주는 모듈 : log4js

http://valuefactory.tistory.com/207



▶모듈의 함수나 프로퍼티를 외부로 보낼 수 있는 상태로 만드는 exports 키워드

 흔히 require 키워드를 사용해 타모듈을 사용하는데, exports하지 않으면 require할 수 없다.

http://valuefactory.tistory.com/208




▶실행되는 js파일의 디렉토리를 나타내는 nodejs 내장 객체 : __dirname 객체

 보통 프로젝트에서는 기본이 되는 프로젝트 루트 디렉토리에 app.js가 가장먼저 실행되는데, app.js의 상단부에 __dirname을 어떤 변수에 전역으로 담아놓고 사용한다.


app.js

'use strict';

global.__base = __dirname + '/';

(https://www.abeautifulsite.net/determining-your-apps-base-directory-in-nodejs)

nodejs internal object doc : https://nodejs.org/docs/latest/api/globals.html#globals_dirname




▶시스템 환경변수 값을 가져오는 내장 객체 : process.env 객체

 nodejs에서는 다양한 내장객체를 보유하고 있는데 그중하나인 process는 process를 관장하는 객체들을 관리하는 객체이다. 이중 process.env는 process의 환경변수를 설정한다. cmd에서 node에 접속해 process.env 객체를 실행하면, 사용자의 환경에서 설정된 환경변수들이 나타나게 된다. 


이때 주의해야할 점은, 환경변수를 수정하는 것은 가능하지만, 그러한 변경요소는 nodejs 프로세스 외부에서는 반영되지 않는 다는 점이다. 즉, 수정한 환경변수는 nodejs 프로세스 내에서만 사용할 수 있다.


(아래 환경변수들은 참고용으로 생략된 부분이 존재)

C:\dev\project\AI-HUB\test>node

> process.env

{ ALLUSERSPROFILE: 'C:\\ProgramData',

  APPDATA: 'C:\\Users\\daseul.kim\\AppData\\Roaming',

  CommonProgramFiles: 'C:\\Program Files\\Common Files',

  'CommonProgramFiles(x86)': 'C:\\Program Files (x86)\\Common Files',

  CommonProgramW6432: 'C:\\Program Files\\Common Files',

  COMPUTERNAME: 'CPX-SR1Y92T7IQK',

  ComSpec: 'C:\\WINDOWS\\system32\\cmd.exe',

  FSHARPINSTALLDIR: 'C:\\Program Files (x86)\\Microsoft SDKs\\F#\\4.1\\Framework\\v4.0\\',

  NVM_HOME: 'C:\\Users\\daseul.kim\\AppData\\Roaming\\nvm',

  NVM_SYMLINK: 'C:\\Program Files\\nodejs',

  OneDrive: 'C:\\Users\\daseul.kim\\OneDrive - Accenture',

  OS: 'Windows_NT',

  Path: 'C:\\Program Files (x86)\\Common Files\\Oracle\\Java\\javapath;%JAVA_HOME%\\bin;C:\\ProgramData\\Oracle\\Java\\javapath;C:\\WINDOWS\\system32;C:\\WINDOWS;C:\\WINDOWS\\System32\\Wbem;C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\;C:\\Program Files\\ODBC\\110\\Tools\\Binn\\;C:\\oraclexe\\app\\oracle\\product\\11.2.0\\server\\bin;C:\\Program Files (x86)\\;C:\\Program Files\\Microsoft VS Code\\bin;C:\\Users\\daseul.kim\\AppData\\Roaming\\nvm;C:\\Program Files\\nodejs',

  PATHEXT: '.COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH;.MSC',

  PROCESSOR_ARCHITECTURE: 'AMD64',

  PROCESSOR_IDENTIFIER: 'Intel64 Family 6 Model 78 Stepping 3, GenuineIntel', 

  USERDOMAIN: 'DIR',

  USERDOMAIN_ROAMINGPROFILE: 'DIR',

  USERNAME: 'daseul.kim',

  USERPROFILE: 'C:\\Users\\daseul.kim',

  windir: 'C:\\WINDOWS' }

> process.env.port

undefined




https://nodejs.org/docs/latest/api/process.html#process_process




▶Error 생성자 

const stack = (new Error().stack);

Error.prototype.stack

:The non-standard stack property of Error objects offer a trace of which functions were called, in what order, from which line and file, and with what arguments. The stack string proceeds from the most recent calls to earlier ones, leading back to the original global scope call.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stack

▶generator 객체

Generator는 빠져나갔다가 나중에 다시 돌아올 수 있는 함수입니다. 이때 컨텍스트(변수 값)는 출입 과정에서 저장된 상태로 남아 있습니다.


Generator 함수는 호출되어도 즉시 실행되지 않고, 대신 함수를 위한 Iterator 객체가 반환됩니다. Iterator의 next() 메서드를 호출하면 Generator 함수가 실행되어 yield 문을 만날 때까지 진행하고, 해당 표현식이 명시하는 Iterator로부터의 반환값을 반환합니다. yield * 표현식을 마주칠 경우, 다른 Generator 함수가 위임(delegate)되어 진행됩니다.


이후 next() 메서드가 호출되면 진행이 멈췄던 위치에서부터 재실행합니다. next() 가 반환하는 객체는 yield 문이 반환할 값(yielded value)을 나타내는 value 속성과, Generator 함수 안의 모든 yield  문의 실행 여부를 표시하는 boolean 타입의 done 속성을 갖습니다. next() 를 인자값과 함께 호출할 경우, 진행을 멈췄던 위치의 yield  문을  next() 메서드에서 받은 인자값으로 치환하고 그 위치에서 다시 실행하게 됩니다.


function* idMaker(){
  var index = 0;
  while(index < 3)
    yield index++;
}

var gen = idMaker();

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // undefined
// ...


https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function*



▶자바스크립트의 Class 선언


https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes



▶Class 내부의 static 메서드

 정적 메서드는 클래스의 인스턴스 없이 호출이 가능하며 클래스가 인스턴스화되면 호출할 수 없다. 정적 메서드는 종종 어플리케이션의 유틸리티 함수를 만드는데 사용된다.


▶uuid 모듈

 고유 id 값을 생성한다던가 할때 사용하는 모듈인데, 난수를 랜덤하게 발생시켜준다.

const Uuid = require("node-uuid");

const uuid = Uuid.v1();

console.log(uuid);

//13533db0-5c33-11e8-9dca-737fa04a4ae9





▶co모듈과 yield

 co 모듈의 가장 좆되는 점은, 가장 상위의 모듈에서만 co를 사용하면, 상위의 모듈에서 import하는 하위의 모듈에서 까지 yield를 자동 next처리 해준다는 점이다!!

 위의 예에서보면, generatorTest2.js는 co모듈을 따로 사용하고 있지 않지만, co모듈을 사용하는 generatorTest1.js에서 호출 되고 있기 때문에 next()처리를 자동으로 하게된다. 


//generatorTest1.js
const co = require('co');
const gT2 = require(__dirname + '/generatorTest2');

function p(str) {
return new Promise(function(resolve) {
setTimeout(function() {
console.log(str);
resolve(str+1);
}, 1000);
});
}

//동기화를 generator로 구현한 경우
co(function* genTest1() {
var res1 = yield p(1);
var res2 = yield p(res1);
var res3 = yield gT2.genTest2(res2);
console.log('generator1 then end');
});

//generatorTest2.js
function p(str) {
return new Promise(function(resolve) {
setTimeout(function() {
console.log(str);
resolve(str+1);
}, 1000);
});
}


exports.genTest2 = function* (res0) {
var res1 = yield p(res0);
var res2 = yield p(res1);
console.log('generator2 then end');
}



▶nodejs로 리모트 디버깅하기


 노드제이에스는 리모트 디버깅을 제공한다. 구체적인 방법은 다음과 같다.

1. 리모트 디버깅을 사용할 에디터에 어느 서버에서 어느 포트를 이용해서 디버깅을 실행할지 컨피그파일 설정하기. 아래의 예는 visual studio code에 해당하는 것이고, 이 에디터는 프로젝트 안에 .vscode 폴더가 있으면 그 안에서 에디터 설정파일들을 찾아 읽는다.  디버깅 설정파일은 launch.json에 쓰여져 있다. 아래설정 파일에선 10.1.3.23서버의 3019포트를 디버깅 포트로 설정했다.


{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "リモートポートへのアタッチ",
"address": "10.1.3.23",
"port": 3019,
"remoteRoot": "/home/ec2-user/dev/AI_HUB/",
"localRoot":"${workspaceRoot}"
}
]
}



2. 서버에서 노드 제이에스를 실행할시 --inspect 명령어를 옵션으로 추가한다. 

NODE_ENV=unit-test node --inspect=3019 app.js




▶require는 새로운 인스턴스를 생성하는 함수가 아니다.

디버깅하다보면 require는 시스템이 구동되기전 우선적으로 먼저 불러지는 것을 알 수 있다. require은 새로운 인스턴스를 생성하는 것이 아니라, 단지 서로 다른 위치에 있는 파일들을 연결시켜주는 것을 뿐.따라서 새로운 인스턴스를 사용하고 싶다면 new해야한다.



▶http.createServer  VS  app.listen: 코드가 돌아가는 로컬을 서버의 역할을 하도록 하게 해준다.


먼저 http.createServer가 뭐하는 놈인지부터 알아보자.


var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type''text/plain'});
  res.write('Hello World!');
  res.end();
}).listen(8080);


여기까지보면, 이는 사실 express의 app 객체를 통해 app.listen(8080)하는 것과 차이가 없다. 도대체 뭐가 다른 걸까?


아래에 좋은 해답이 있어 긁어와봤다.(https://stackoverflow.com/questions/17696801/express-js-app-listen-vs-server-listen)



var express = require('express');
var app = express();

//app.configure, app.use etc

app.listen(1234);

and adding an http server:

var express = require('express');
var http = require('http');

var app = express();
var server = http.createServer(app);

//app.configure, app.use etc

server.listen(1234);

What's the difference?



The second form (creating an HTTP server yourself, instead of having Express create one for you) is useful if you want to reuse the HTTP server, for example to run socket.io within the same HTTP server instance:

var express = require('express');
var app     = express();
var server  = require('http').createServer(app);
var io      = require('socket.io').listen(server);
...
server.listen(1234);

However, app.listen() also returns the HTTP server instance, so with a bit of rewriting you can achieve something similar without creating an HTTP server yourself:

var express   = require('express');
var app       = express();

// app.use/routes/etc...

var server    = app.listen(3033);
var io        = require('socket.io').listen(server);

io.sockets.on('connection', function (socket) {
  ...
});





▶res.sendStatus와 res.status().send의 차이


res.sendStatus는 단순하게 상태 번호만 전송해주고, res.status().send는 상태번호와 레스폰스를 동시에 보낼 수 있다.

res.sendStatus(200); // equivalent to res.status(200).send('OK')
res.sendStatus(403); // equivalent to res.status(403).send('Forbidden')
res.sendStatus(404); // equivalent to res.status(404).send('Not Found')
res.sendStatus(500); // equivalent to res.status(500).send('Internal Server Error')




▶변수를 파라미터로써 전달하면, 파라미터를 받은 함수가 처음의 변수를 계속 참조한다.




▶상황별 let과 const의 사용법

let : 원시형자료를 담는다 원시형자료 : 1. 숫자2. 문자열3. 불리얼4. null5. undefined6. 심볼(symbol)

const : 참조형 자료를 담는다


let : 변수를 담는다. let num =22; 로 선언했다가 나중에 num = 44;로 바뀔 수 있는 가능성이 있는 것을 변수라함

const : 상수를 담는다,상수는 대문자와 _ 스네이크바를 따르는게 암묵적 규칙이다. const GOOGLE_ID='da91love';




▶블록스코프{}안에서 사용한 let, const로 선언한 변수는, 그 블록안에서만 접근할 수 있다.




▶전역스코프, 함수스코프, 블록스코프에 유의하여 코딩하도록한다.



▶/** @param {데이터형} 파라미터명**/ 으로 파라미터 데이터형 표시하기 


/**
* expressを利用して指定したURLへのPOSTリクエストを待ち受ける。
* @param {object} ws : object created when ws connected
* @param {object} req : req object send when ws connected
* @param {array} dataFromWs : pushed data array at _listenToTumblerStream
**/

exports.startRecognize = function* (ws,req,dataFromWs){...}





▶즉시실행함수: 한번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용


1
2
3
4
5
//일반 함수 표현식
(function(lang)console.log(lang))('javascript')
 
//arrow function 
((lang)=>console.log(lang))('javascript')
cs






▶Object.key, map, reduce를 사용하여, 객체안에 갱신된 값 캐치하기 (타이틀로만 보면 무슨말인지 모를거고 아래의 예를보기)


1
2
3
4
5
6
7
8
9
var entities = {"date":[1,1],"price":[],"day":[],"nights":[2,3]};
var values = Object.keys(entities).map(e => entities[e]);
var result = values.map(e => e.length);
var sum = result.reduce((a,b)=>{return a+b});
var final = Object.keys(entities).map(e => entities[e]).map(e => e.length).reduce((a,b)=>{return a+b});
console.log(values);
console.log(result);
console.log(sum);
console.log(final);
cs



▶express에서 static으로 public과 bower_components를 동시에 설정하여 사용하기

https://stackoverflow.com/questions/21821773/configure-node-express-to-serve-static-bower-components

I use this setup:

app.use(express.static(__dirname + '/public'));
app.use('/bower_components',  express.static(__dirname + '/bower_components'));

So any Bower components are loaded from HTML like this:

<script src="/bower_components/..."></script>

And any other client-side JS/CSS (in public/) are loaded like this:

<script src="/js/..."></script>



▶배열의 최대 최소값 : Math.min.apply(null, array), Math.max.apply(null, array), 

https://programmingsummaries.tistory.com/108



▶javascript에서 함수 실행시간 측정

http://vnthf.logdown.com/posts/2016/10/06/javascript


var selector = "f1"
console.time(selector);
f1();
console.timeEnd(selector); 
f1: 0.024ms



10진수 -> 2진수

https://unikys.tistory.com/334


var dec = 123;
var bin = dec.toString(2); // === "1111011"




▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default



▶default

default















+ Recent posts