자바스크립트 리프레셔

JavaScript ES6는 2015년에 나왔고 그로부터 꽤 오랜 시간이 흘렀습니다. 이해해야 할 중요한 ES6의 핵심 기능 중 일부를 살펴보겠습니다.

let과 const

var는 ES6까지 JavaScript에서 사용되는 사실상의 변수 선언 키워드였습니다. 이제 let과 const를 사용하는 것이 좋습니다. 먼저 var가 수행하는 작업을 살펴보겠습니다.

var 함수 외부에서 선언된 경우 전역 범위입니다. 맨 위로 게양되고 정의되지 않음으로 초기화됩니다. 변수를 다시 선언할 수도 있습니다. 이에 대한 몇 가지 문제는 초기화 전에 변수를 사용하고 오류가 발생할 수 있지만 정의되지 않는다는 것입니다. 또한 var를 사용한 변수는 다시 선언하여 다른 용도로 사용할 수 있습니다. 이것은 큰 프로젝트에서 특히 그렇습니다.

아래에서 오류가 예상되거나 변수 초기화를 잊을 수 있습니다. 그러나 우리는 정의되지 않은 인쇄를 얻습니다.

console.log(test);//undefined
var test = "Hi";

아래에서 우리는 다른 목적으로 동일한 변수를 무의식적으로 사용했을 수 있습니다.

var test = "Hi"
var no = 5
if (no == 5) {
    var test = 0;
}
console.log(test);//0

또한 변수를 변경 불가능(상수)하지 않기를 원하는 시나리오가 있을 수 있습니다. 이 모든 것은 let과 const로 해결됩니다. 아래 표는 어떻게 하는지에 대한 아이디어를 제공합니다.



바르
허락하다
const


범위
글로벌 또는 기능
차단하다
차단하다

재선언
예
아니
아니

게양
예
예
예

다음으로 초기화됨
한정되지 않은
초기화되지 않음
초기화되지 않음

초기화하지 않고 선언
예
예
아니

화살표 함수

화살표 함수는 요즘 JavaScript에서 표준입니다. 일반적인 JS 함수는 아래 스니펫과 같습니다.

function myDobuleFun(no){
    return no * 2;
}

화살표 함수로 몇 가지 방법으로 작성할 수 있습니다. 그것들을 살펴봅시다.

const myDoubleFun = (no) => {
    return no * 2;
}

아래 구문은 단일 return 문과 단일 인수가 있는 경우에만 적용할 수 있습니다. 그러나 이러한 경우에 이 구문은 코드를 훨씬 더 깔끔하게 만듭니다.

const myDobuleFun = no => no * 2;

내보내기 및 가져오기(모듈)

ES6로 모듈식 코드를 작성할 수 있습니다. 그 방법은 수출과 수입을 통하는 것입니다. 몇 가지 예로 내보내기 및 가져오기를 살펴보겠습니다.

아래는 기본 내보내기입니다. 우리는 이것이 어떻게 수입될 수 있는지 살펴볼 것입니다.

//test.js
const test = 10;
export default-test;

이것은 기본 가져오기이며 기본값으로 표시된 내보내기가 하나만 있으므로 원하는 이름을 지정할 수 있습니다.

//app.js
import test from './test.js'
import t from './test.js'

아래에서는 명명된 내보내기 및 가져오기를 사용하고 있습니다. 여러 개가 있으므로 명명된 가져오기를 사용하고 있습니다.

//util.js
export const pi = 3.14;
export const e = 2.718;

아래에서는 명명된 가져오기를 사용하고 있으며 이름을 사용하거나 번들로 하나씩 가져올 수 있습니다. 번들 이름을 번들로 지정했으며 가져온 속성은 bundled.pi 또는 bundled.e를 통해 액세스할 수 있습니다.

//app.js
import {pi} from './util.js'
import {e} from './util.js'
import {pi as math_pi} from './util.js'
import * as bundled from './util.js'

확산 및 휴식 연산자

둘 다 ...로 표시됩니다.

스프레드는 배열 요소 또는 개체 속성을 분할하는 데 사용됩니다.

let no = [1, 2, 3];
let newNo = [...no, 4];//[1, 2, 3, 4]
let newNo = [no, 4];//[[1, 2, 3], 4]

Rest는 함수 인수 목록을 배열로 병합하는 데 사용됩니다.

const filter = (...args) => {
    return args.filter(e1 => e1 === 1);
}

파괴

배열 요소 또는 객체 속성을 추출하여 변수에 저장하는 데 사용됩니다.

[a, b] = ['Hi', 'World'];
console.log(a); //Hi
console.log(b); //World
{name} = {name: 'John', age: 20};
console.log(name)//John
console.log(age)//undefined

따라서 이러한 기능이 일상적인 작업 흐름에 가치를 더할 수 있기를 바랍니다. 우리는 향후 게시물에서 ReactJS에 대해 자세히 살펴보고 이러한 작업 중 일부를 다룰 것입니다.