gyeol1212

개발자를 꿈꾸는 문돌이입니다.

JS ES6 문법 정리

4 minute read

React, Vue 등으로 넘어가기 전에 자주 쓰일 ES6 주요 문법을 정리해 보자…

Promise

“A promise is an object that may produce a single value some time in the future”

Promise는 자바스크립트 비동기 처리에 사용되는 객체. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미. (비동기 처리가 뭔지 잘 모른다면 ‘https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/’)

Promise 의 상태

  • Pending : 비동기 처리 로직이 완료되지 않은 상태, 아직 promise 수행중
  • Fulfilled : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태, promise가 지켜진 상태
  • Rejected : 비동기 처리가 실패하거나 오류가 발생한 상태, promise가 지켜지지 못한 상태
  • Settled : Fulfilled+Rejected, 지켜졌든 안지켜졌든 결론이 난 상태

Promise 사용하기

// parseValue, auth는 promise를 반환해주는 함수
getData(userInfo)
  .then(parseValue)
  .then(auth);

.then() 함수를 이용해 여러개의 Promise 연결 가능

.then() 함수 : 첫번째 parameter로 성공시 호출할 함수, 두번쨰 parameter로 실패시 호출할 함수

여러개를 chaning해서 사용할 때의 오류 처리는?

getData(userInfo)
  .then(parseValue)
  .then(auth)
  .catch(()=>{
    console.log("err 발생")
  }

.catch() 함수 사용! 에러가 발생할 경우 다음 then으로 넘어가지 못하고 catch로 이동. 따라서 chaining 중간 발생한 오류 처리 가능

Const & Let

var : 변수, 전역 스코프, 재선언 가능 let : 변수, 블록 스코프, 재선언 불가 const : 상수, 블록 스코프, 재선언 불가

변수 & 상수

변수 : 변할수 있는 값 => let 상수 : 변하지 않는 값 => const

  • const로 선언한다고 해서 전부 변할 수 없을까?
const array = [1, 2, 3, 4];
array.push(5);
console.log(array); // [1,2,3,4,5]
array = []; // 에러 발생

const object = { name: 'gyeol' };
object.age = '24';
console.log(object); // {name: 'gyeol', age: '24'}

const로 선언한 array와 object도 안의 값들은 추가, 변경이 가능하다. 하지만 새로운 array와 object로의 선언은 당연히 불가!

전역 스코프 & 블록 스코프

let a = 'AAA';
if (true) {
  let a = 'BBB';
  console.log(a); // BBB
}
console.log(a); // AAA

if, for. while, do, try, catch… 등은 Block scope 생성! let 이 아니라 var을 사용했다면? var은 전역스코프 선언이기 때문에 if문 밖에서 a를 출력해도 “BBB”를 출력함!

Arrow Function

기본 형태 : () => {}

const add = (a, b) => {
  return a + b;
};

함수가 return 문 한줄일 경우, {}와 return 생략 가능

const add = (a, b) => a + b;

This 사용에 유의

const object = {
  name : 'gyeol'
  babo : function(){
            setTimeout(()=>{
              console.log(`${this.name} 바보`)
            },1000)
          }
  }

  console.log(object.babo()) // gyeol 바보

위의 예에서는 babo라는 함수와 setTimeout 함수 두개가 있음. babo 함수는 function()을 이용했기 때문에 this가 생성, setTimeout은 arrow function을 이용헀기 때문에 this 미생성 따라서 setTimeout내에서 사용한 this는 setTimeout밖의 babo함수의 this가 되어 object내의 name을 찾을 수 있게 됨.

만약 두 함수 모두에서 arrow function을 사용했다면? 둘 모두 this를 생성하지 않기 때문에 name을 불러올 수 없음.

Array Method

map / filter / reduce / splice / slice

  • map() : Array.map(callbackfn[, thisArg])
    • 기존의 배열에 특정 규칙을 적용해 새로운 배열을 만듭니다.
  • filter() : Array.filter(callbackfn[, thisArg])
    • 특정 조건을 만족하는 요소를 추출해 새로운 배열을 만듭니다.
  • reduce() : Array.reduce(callbackfn[, initialValue])
    • 배열의 요소가 하나가 될 때 까지 요소를 왼쪽부터 두개 씩 묶는 함수를 실행합니다.
  • splice() : Array.splice(start, deleteCount[, item1[,item2[, item3 …]]])
    • 요소의 지정한 부분을 삭제하고 삭제한 요소를 리턴합니다.

  • slice() : Array.slice(start[, end])

    • 요소의 지정한 부분을 리턴합니다.

Spread Operater

전개 연산자(…)

배열을 복사해보자

const a = [1, 2, 3, 4];
const b = a;
b.push(5);
console.log(a); // [1,2,3,4,5]

단순하게 b=a 와 같은 방식으로 복사를 하면 될 것만 같지만… b를 바꾸면 a도 바뀌어 버린다…! 이는 기본 자료형의 복사는 값 복사 이지만, 객체와 배열의 복사는 참조 복사이기 때문이다.(뭔소린가 싶으면… 따로 물어보세요)

const a = [1, 2, 3, 4];
const b = [...a];
b.push(5);
console.log(a); // [1,2,3,4]

그래서 ES6에서 Spread Operater(…)이 만들어짐 …a 의 값이 1,2,3,4라고 생각하면 편함 이를 응용해서

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [...a, ...b];
console.log(c); // [1,2,3,4,5,6]

이런 식으로 배열을 병합하는 것도 가능하다

함수에서의 활용

함수에서 Spread Operater 활용

const f = (a, b, ...args) => {
  console.log(a, b);
  console.log(`기타 등등 ${args}도 있음`);
};
f(1, 2, 5, 6, 7, 8, 'A');
// 1, 2
// 기타 등등 5,6,7,8,A도 있음

이처럼 매개변수의 갯수가 달라질 수 있는 함수를 가변 매개변수 함수라 함. 정해진 a,b 매개변수 뒤에 오는 매개변수들은 args에 담기게 된다.

주의할 점은, 매개변수를 선언할 때 전개 연산자가 맨 뒤가 아닌, 앞이나 중간에 오게 되면 어디까지가 가변 매개변수인지 알 수 없기 때문에 전개연산자를 이용한 가변 매개변수는 매개변수의 맨 뒤에 한개만 사용해야한다.

이번에는 함수를 호출할 때 전개연산자를 사용해보자

const f = (a, b, c, d) => {
  console.log(a + b + c + d);
};
const array = ['a', 'b', 'c', 'd'];
f(...array); // abcd

이런 식으로 배열을 순서대로 함수의 매개변수로 넣을 수도 있다.

Object Spread

배열에서와 마찬가지로 객체를 복사할 때도 전개 연산자를 활용하면 좋다

const a = {
  name: 'gyeol',
  age: '24',
};
const b = { ...a };

console.log(b); // {name:'gyeol', age:'24'}

Export & Import

모듈에 대해서는 codecademy에서 어렵지만 공부했기 때문에 자세한 설명은 생략. 간단한 예시를 통해, 다양한 exprot & import 방법에 대해 알아보자

# Ex.js
const a = 1;
const b = 2;
export { a };
export default b;
export const c = 3;

# Ex2.js
import d, {a, c as e} from './Ex';
console.log(a, d, e) // 1,2,3

먼저 Ex.js 파일을 보면 세가지 방식으로 export 했고, Ex2.js 파일에서도 한문장으로 import했지만 세가지 방식으로 import한 것이다.

먼저 변수 a는 객체에 담아서 export 했고, b는 default로, c는 선언과 동시에 export하였다. 독특한 default 방식의 export를 먼저 살펴보면, default 방식으로 export한 b는 괄호를 사용하지 않아도 import할 수 있다. 또한 변수명 역시 마음대로 정할 수 있따. 그래서 Ex2.js에서는 d라는 이름으로 변수 b를 export한 것이다. 그렇기 때문에 default방식의 export는 한 파일에서 한번만 가능하다.

나머지 a와 c는 { }를 이용하여 import했다. 이때는 export할 때의 이름 그대로 import해야 한다. 이때 다른 이름으로 import하고 싶다면 ‘as’키워드를 이용한다. 위의 예시에서 ‘c as e’ 라는 의미는 변수 c의 값을 변수 e라는 것에 담아서 import한다는 의미이다

따라서 변수 a는 그대로 변수 a에, 변수 b는 변수 d라는 이름으로, 변수 c는 변수 e라는 이름으로 각각 import 된 것이다.

React를 사용할 때는, 다양한 Component들을 모듈화 시켜서 사용하기 때문에, Component를 통째로 export, import 할 일이 많아서 주로 default export와 import를 많이 사용했는데, Vue는 또 어떨지 모르겠다…

Updated:

You may also enjoy