코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 20일차

정보교육/프런트엔드

@thiskorea 2024. 7. 10. 09:47

12장 부록: 알아두면 좋은 ES6
12.1 ES6란

ECMAScript 6 : 2015년에 도입된 자바스크립트 최신버전
12.2 학습 준비

console에서 실행하기

html에서 실행하기

<html>
<head></head>
<body>
<script>
  const a = 3;
  const b = 5;
  console.log(a+b);
</script>
</body>
</html>

12.3 ES6의 주요 문법

1. let 과 const

let. const 중복 선언은 안됨.

let 재할당은 가능하나 const는 재할당 불가

let r = 'red';

r = 'blue';

const b = 'blue';

b='red';

2. 템플릿 문자열

let str1 = 'hello';

let str2 = "Hello";

큰따옴표, 작은따옴표 가능

3. 화살표 함수

function 함수명(매개변수1, 매개변수2, ..., 매개변수n) {
  return ;
}

const 함수명 = (매개변수1, 매개변수2, ..., 매개변수n) => {
  return ;
}

const sum = (num1, num2) => num1 + num2;

const pow = x => x * x;

4. 비구조화 할당

const [first, second, third, fourth] = [1, 2, [3,4], 5];

const [first, second, [third, fourth], fifth] = [1,2,[3,4],5];

5. 스프레드 연산자

배열, 문자열 또는 객체와 같은 이터러블의 요소들을 다른 이터러블이나 함수 호출로 전개할 수 있다.

배열 병합

문자열 전개

객체 병합 및 복사

함수 인수 전개

6. rest 문법

나머지 값을 처리할 때 주로 사용 ...

7. Promise

비동기 처리

8. Proxy

객체에 대한 작업을 가로채거나 수정할 수 있는 매커니즘을 제공해 객체의 동작을 원하는 대로 바꿀 수 있게 해줌.

vue3에서는 Proxy 객체를 사용해 뷰의 반응성을 구현