DEV/React

자바스크립트 es6 주요 문법 정리 (리액트에 필요함)

김슈가 2024. 11. 16. 18:36
728x90
반응형

1. 템플릿 문자열 [template stirng]

  • 작은 따옴표(') 대신 백틱(`)으로 문자열을 표현
  • 병합연산자(+)를 사용해서 문자열+문자열, 문자열+변수 하던것을 그냥 백틱 안에 `문자열 문자열 ${변수}` 형태로 사용가능 

2. 전개 연산자 [spread operator]

  • 독특하면서도 매우 유용한 문법
  • 나열형 자료를 추출하거나 연결할 때 사용한다. 
  • 사용 방법은 배열이나 객체 변수명 앞에 마침표 세 개(...)를 입력한다. 다만, 배열[], 객체{}, 함수 인자() 표현식 안에서만 사용해야 한다. 

3. 가변변수와 불변변수 

  • 가변변수 : 값을 수정할 수 있는 변수, let 키워드로 선언한다.
  • 불변변수 : 값을 수정할 수 없는 변수, const 키워드로 선언한다.
  • 무결성 제약 조건에 위배되었다. > 불변 변수는 값을 다시 할당 할 수 없지만, 값을 변경 할 수는 있음. 선언한 변수에 내장함수(push, splice, ...) 사용해서 값 변경 가능.... 
  • 불변 변수로 정의된 배열이나 객체를 내장 함수로 수정하는 것을 암묵적으로 금지하여 무결성을 유지할 수 있다. (개발자 스스로가 아니면 팀이 어떻게 관리할 지 정하는 것) 
  • 무결성을 유지하면서 불변 변수의 값을 수정해야 하는 경우에는, 수정할 불변 변수를 새로 만들어서 새 값을 할당하는 방법으로 수정해야 한다. 수정한다기보다 새로 정의한다는 개념에 가까움. 
  • 기존 자바스크립트의 가변 내장 함수 & 무결성 내장함수 (무결성 함수는 객체나 배열을 직접 수정하는 것이 아니라 새 결과를 반환하는 함수를 말한다. -> 무결성 제약 조건을 지키는 함수) 
가변 내장 함수 무결성 내장 함수
push(...items) concat(...items)
splice(s,c,...items) slice(0,s).concat(...items,slice(s+c))
pop() slice(0,len - 1)
shift() slice(1)

불변변수를 사용하는 이유는 무결성 제약 규칙에 의해 변수가 변하는 시점을 쉽게 파악할 수 있고, 수정 전과 후의 변수값을 비교할 수 있어 가변 변수보다 더 유용하다. 실제로 실무에서도 불변변수(const)를 더 많이 사용하긴 한다. 

4. 클래스

  • 기존 자바스크립트에서는 클래스 표현식이 없어서 prototype으로 클래스를 표현했다.
  • prototype 객체는 new 연산자로 생성되는 객체 안에서 this 연산자의 함수 및 변수 선언 위치를 참조할 수 있는 요소이다.
  • ES6에서는 class 키워드가 생기므로 코드가 훨씬 간결해진다. (Java와 같은 기존 언어 패턴과유사하지만 다중 상속이나 인터페이스는 지원하지 않음)
  • class 키워드로 class 정의를 할 수 있으며 생성자 constructor함수도 사용 가능, 객체가 생성될 때 함께 만들어질 변수가 클래스 변수 (static)를 클래스 선언 블록 안에 정의 가능.
  • 생성자, 클래스 변수, 클래스 함수 정의에는 변수 선언을 위한 키워드(var, let, const,...)를 사용하지 않는다.
  • extends 키워드를 사용해서 클래스 상속 하며 부모 함수 참조할 경우 super()를 사용한다. 

5. 화살표함수 (arrow function)

  • 화살표 기호(=>)로 함수를 선언한다.
  • 화살표 기둥 =을 사용해서 fat arrow function이라고 부르기도 함.
  • 이름이 없는 익명 함수 (anonymous function)를 선언해서 변수에 대입하는 방법과 유사하며, function 키워드를 생략하고 인자블록 ()과 본문블록 {} 사이에 =>를 표기한다. 
  • 본문 블록이 비어 있고 결과값을 바로 반환하는 경우에는 {}중괄호 생략이 가능하다. 
  • 반환값이 객체라면 ()중괄호로 결과값을 감싸 간결하게 표현이 가능하다.
  • 함수 표현식을 간결하게 할 수 있고 '계단형 함수 선언'과 같은 구조가 만들어지지 않게 해준다. 
  • 화살표 함수를 사용해서 간결한 코드로 함수를 반환할 수 있다. 
  • this범위로 생기는 오류를 피하기 위한 bind(this)함수를 생략해도 된다. 

6. 객체 확장 표현식과 구조 분해 할당 

  • 기존 자바스크립트에서는 객체와 객체의 값을 선언하기 위해 키읆과 값을 각각 할당해야 했지만 아래와 같이 개선됨. 
var x = 0; 
var y = 0; 
/* 1. 키이름이 키 값과 동일하다. */
// var obj = {x:x, y:y};
/* 1-ES6.객체 변수 선언할 때 키 값을 생략하면 자동으로 키의 이름으로 키 값을 지정한다. */
var obj = {x,y}; 
console.log(obj);
var randomKeyString = 'other';
/* 2. 연산 결과로 키값을 대입할 때는 키값을 지정할 코드를 추가로 작성 해야 한다. */
// var combined = {};
// combined['one'+randomKeyString] = 'some value';  
/* 2-ES6. 객체생성 블록 안에 대괄호를 사용하여 표현식을 작성하면 추가하여 계산된 키 값을 생성할 수 있다. */ 
var combined = {
    ['one ' + randomKeyString]: 'some value',
};
console.log(combined);

var obj2 = {
    /* 3. 객체에 함수 추가할 때 변수에 할당 해야 한다.*/
    // x: x,
    // methodA: function(){ console.log('methodA'); }, 
    // methodB: function(){ return 0; }
    /* 3-ES6. function 키워드 생략하여 함수를 선언할 수 있습니다. */
    x, 
    methodA() { console.log('method A');}, 
    methodB() { return 0; },
}
console.log(obj2);
  • 자바스크립트 구조(객체나 배열) 분해 사용 방법
//기존 자바스크립트에서는 객체나 배열의 특정자료를 아래와 같이 분해함
var list = [0,1]; 
//1. 배열의 인덱스를 사용해서 변수에 할당한다.
var item1 = list[0]; 
var item2 = list[1]; 
//2. || 연산자를 이용해서 배열의 해당 인덱스에 값이 없으면 기본값으로 할당한다.
var item3 = list[2] || -1; 
//1-ES6. 대괄호 블록[] 사이에 추출하고자하는 값의 인덱스 위치에 변수를 배치한다. 
var [
    item1,
    item2,
    item3 = -1, //2-ES6. 선언부호를 변수와 함께 사용하여 기본값을 할당한다.
] = list;

//3. 배열의 두 값을 치환한다. 
var temp = item2; 
item2 = item1; 
item1 = temp;
//3-ES6. 인덱스 위치에 각각 변경할 변수를 교차 배치하여 배열의 두 값을 치환한다. 
[item2, item1] = [item1, item2]; 

var obj = {
    key1: 'one',
    key2: 'two',
}; 
// 4. 객체의 키 값을 변수에 할당한다.
//var key1 = obj.key1; 
//var key2 = obj.key2; 
// 5. ||연산자를 이용하여 객체의 해당 키값이 없으면 기본 값으로 할당한다. 
//var key3 = obj.key3 || 'default key3 value'; 
// 6. 객체의 키값을 다른 변수에 할당한다. 
//var newKey1 = obj.key1; 

var{
    key1: newKey1, //6-ES6. 콜론 : 부호와 함께 새 변수명을 선언하여 추출된 키값을 다른 변수명으로 할당한다.
    key2, //4-ES6. 객체의 키 값을 변수에 할당
    key3 = 'default key3 value', //5-ES6. 선언 부호 = 를 변수와 함께 사용하여 기본값을 할당한다. 
} = obj;
  • 구조 할당 시에 앞에서 배운 전개연산자(spread operator)를 함께 사용한다. 
  • 구조분해와 구조할당은 함수 인잣값을 다루거나 JSON데이터를 변환할 떄 유용하게 사용하므로 꼭 기억하는 것이 좋다. 
//구조분해와 분해할당 전개 연산자 사용
var [item1, ...othersItems] = [0,1,2]; 
var {key1, ...others} = {key1: 'one', key2: 'two'}; 
//othersItems = [1,2]
//others = { key2: 'two' }

7. 라이브러리 의존성 관리

  • 의존성 : 어떤 파일이나 코드가 다른 파일이나 코드를 필요로 하는 것. 
  • 기존 자바스크립트는 라이브러리나 모듈을 관리하는 방법이 매우 불편했는데, script 엘리먼트의 선언 순서가 매우 중요했다. (선언순서가 꼬일경우 정의되지 않은 함수를 참조하는 의존성 문제가 발생...) 
  • 하지만, ES6에서는 참조 순서에 따른 의존성 문제를 해결했는데 import 구문을 사용해서 script 엘리먼트 없이 연결된 파일 및 의존 파일을 먼저 모두 내려 받고 코드를 구동하도록 변경했다.
//1. import구문을 사용해 지정된 파일(MyModule.js)의 기본으로 공유하는 모듈을 부른다.
import MyModule from './MyModule.js'; 
//2. 이름을 맞춰서 모듈안의 특정 함수 혹은 변수를 참조 할 수도 있다.
import { ModuleName } from './MyModule.js'; 
//3. 객체 구조 할당과 유사하게 특정 모듈을 가져올 때 이름이 충돌할 경우 다른 이름으로 변경하여 불러들일 수 있다. 
import { ModuleName as RenameModuleName } from './MyModule.js'; 

function Func() {
	MyModule();
}
//4. 변수, 클래스 이름을 다른 파일에서 참조할 수 있도록 export로 정의한다. 
export const CONST_VALUE_ = 0; 
export class MyClass {}
//5. 현재 파일이 다른 파일에서 기본으로 참조하게 되는 항목을 정의한다. 
exprot default new Func();

8. 배열 함수 

  • 자주 사용하는 함수 forEach(), map(), reduce()만 보겠음. 
  • forEach()는 기존 for()문에서 반복문의 순번과 배열의 크기를 따로 변수에 저장하는 과정을 생략하고 쓸수 있음 
function parse(qs){
    const queryString = qs.substr(1); 
    const chunks = queryString.split('&'); 
    let result = {}; 
    chunks.forEach((chunk) => {
        const [key,value] = chunk.split('='); 
        result[key] = value; 
    });
    return result;
}
console.log(parse('banana=10&apple=20&orange=30'));
  • 위의 예제에서 가변변수 let을 사용했으나 불변변수 const사용하고 싶으면 map()함수를 사용하면 된다. 
  • map()함수는 각 배열 요소를 정의된 함수를 통해 변환한 결과값들로 새 배열을 반환한다. (배열을 가공해서 새 배열을 만드는 함수
function parse2(qs){
    const queryString = qs.substr(1); 
    const chunks = queryString.split('&'); 
    const result = chunks.map((chunk) => {
        const [key,value] = chunk.split('='); 
        return {key, value} 
    });
    return result;
}
console.log(parse2('banana=10&apple=20&orange=30'));
  • 위에서 작성한 코드로 얻은 결과값은 객체가 아닌 배열이다. 배열을 객체로 변환하고 싶으면 reduce()함수를 사용하면 된다. 
  • reduce((첫번째 인자 변수,객체)=> { 변수[객체 키 값] = 객체 밸류 값; return 첫번째 인자 변수; },첫번째 인자 변수 초기값); 
function parse3(qs){
    const queryString = qs.substr(1); 
    const chunks = queryString.split('&'); 
    return chunks
        .map((chunk) => {
            const [ key, value ] = chunk.split('='); 
            return { key, value } ;
        })
        .reduce((result, item)=>{
            result[item.key] = item.value;
            return result;
        }, {}); 
}
console.log(parse3('banana=10&apple=20&orange=30'));

9. 비동기 함수 

  • 비동기 처리란 작업시간이 많이 걸리는 A라는 작업을 실행할 때 다른 작업들(B,C...)이 대기하고 있는 상황이라면 다른 작업들(B,C)부터 먼저 진행하도록 하고 작업 A를(작업A와 관련된 작업들) 이후에 처리하는 방식을 말한다. 
  • 여러 작업을 효율적으로 처리하기 위해 필요한 비동기 처리. 
  • 기존 자바스크립트의 비동기 함수 처리 방법
//기존 자바스크립트의 비동기 함수 처리 방식
function work1(onDone) {
    setTimeout(()=> onDone('작업1 완료!'), 100); 
}
function work2(onDone) {
    setTimeout(()=> onDone('작업2 완료!'), 200);
}
function work3(onDone) {
    setTimeout(()=> onDone('작업3 완료!'), 300);
}
function urgentWork(){
    console.log('긴급 작업!');
}

work1(function (msg1) {
    console.log('100ms :' + msg1);
    work2(function (msg2) {
        console.log('200ms :' + msg2);
        work3(function (msg3) {
            console.log('300ms :' + msg3);
        });
    });
});

urgentWork();
  • 위에 함수는 총 3개의 지연함수(work1,work2,work3)들이 콜백함수로 총 3개의 계단 모양으로 되어있다. (계단형 콜백 함수를 콜백지옥 이라고 부름....) 지연 작업을 해야하는 함수가 100개 이상이고 모두 연결되어있다면? ES6에서 해결 방법이 나와있다. 
  • ES6에서는 Promise 클래스의 객체를 생성해서 처리할 수 있음 
  • Promise 객체를 생성할 때는 클래스의 resolve() 함수 또는 reject()함수에 해당하는 콜백 함수를 직접 전달해야 한다.
const work1 = () => 
    new Promise(resolve => {
        setTimeout(()=> resolve('작업1 완료!'), 100); 
    }); 

const work2 = () => 
    new Promise(resolve => {
        setTimeout(()=> resolve('작업2 완료!'), 200); 
    }); 

const work3 = () => 
    new Promise(resolve => {
        setTimeout(()=> resolve('작업3 완료!'), 300); 
    }); 

function urgentWork(){
    console.log('긴급작업!!');
}

const nextWorkOnDone = (msg1) => {
    console.log(`done after 100ms: ${msg1}`); 
    return work2();
};

work1()
    .then(nextWorkOnDone)
    .then((msg2) => {
        console.log('done after 200ms: ' + msg2);
        return work3();
    })
    .then((msg3) => {
        console.log('done after 600ms: '+ msg3); 
    });
urgentWork();
  • 위와 같이 Promise 객체를 반환하는 형식으로 코드를 작성하면, 지연 작업들을 콜백 지옥 없이 구현할 수 있음.

 

728x90
반응형
저작자표시 비영리 변경금지