2021 03 08 - ES6 둘러보기

차세대 UI 프로젝트에서 vue.js를 쓰게 되었다.

이제는 모른척 할 수 없게 되었다. Modern js를...

 

+ 하지만 아직 몇몇 브라우저에서는 es6를 지원하지 않는다.

 

ES6문법을 지원하지않는 브라우저에서도 ES6를 사용하고 싶다면 바벨을 사용하자. 

babeljs.io/

 

+ Try-out메뉴를 클릭후 FORCE ALL TRANSFORMS 설정을 체크하면 ES6문법을 ES5문법으로 변환하여 볼수있다..

공부하기에 좋음...!

 

1) 객체 초기자

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer

 

객체 초기화시에,

key와 변수의 이름이 같다면 생략이 가능하다.

const object1 = { a: 'foo', b: 42, c: {} };

console.log(object1.a);
// expected output: "foo"

const a = 'foo';
const b = 42;
const c = {};
const object2 = { a: a, b: b, c: c };

console.log(object2.b);
// expected output: 42

const object3 = { a, b, c }; //{ a: a, b: b, c: c }; 와 같다!

console.log(object3.a);
// expected output: "foo"

 

2) 구조 분해 할당

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

 

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다

//1) 변수를 한꺼번에 값 할당하기
var a, b, rest;
[a, b] = [10, 20];	// var a = 10; var b = 20과 같다.
console.log(a); //10
console.log(b); //20

//2) 남은것 전부 배열에 담기
/*
a = 10;
b = 20;
rest = [30, 40, 50]; 와 같다.
*/
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

//3) 객체에서 값 꺼내오기..?:/
/*
var _a$b = { a: 10, b: 20 };
a = _a$b.a;
b = _a$b.b;
*/

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

const users = ['sohee', 'sohyun'];
//예전에는 index로 꺼내야 했지만! first = users[0]....
//이제는 한꺼번에 선언이 가능합니다 :)
const [first, second] = users; //요녀석은

//아래와 완전히 같아요!
var first = users[0],
  second = users[1];

3) 전개구문

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

 

!! spread 연산자로 배열을 복사할경우 얕은복사를 한다!!

--> 배열의 원본이 변경되면 복사한 배열도 변경된다!

!! 하지만 객체는 깊은복사를 한다.. 의아한 부분이다 :/

 

이렇게되면 결국 배열을 복사 하는게 아니지않나? 결국 배열을 복사하는법은 새로운 배열을 만들어서 하나하나 넣는수밖에 없는것인가?

const obj1 = {key : 'key1'};
const obj2 = {key : 'key2'};
const array = [obj1, obj2];

// 주의! spread연산자로 배열을 복사하면 얕은복사를 한다!
// array안의 object들을 변경하면, 복사된 배열에서도 동일하게 변경된다.
const arrayCopy = [...array];

// object는 깊은 복사를 한다. obj1이 바뀌어도 obj3에는 영향이 가지 않는다.
const obj3 = {...obj1};

// 배열도 합체가능
const arrayCopy2 = ['1','2','3'];
const arrayCopy3 = ['4','5','6'];

const arrayCopy4 = [...arrayCopy2, ...arrayCopy3]

//object도 합체 가능하지만
//키값이 같을경우엔 덮어써지게 됩니당..

// 번외!

// babel에서 나온 멋있는코드

function _toConsumableArray(arr) {
  return (
    _arrayWithoutHoles(arr) ||
    _iterableToArray(arr) ||
    _unsupportedIterableToArray(arr) ||
    _nonIterableSpread()
  );
}

function _nonIterableSpread() {
  throw new TypeError(
    "Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
  );
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
    return _arrayLikeToArray(o, minLen);
}

function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter))
    return Array.from(iter);
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;
  for (var i = 0, arr2 = new Array(len); i < len; i++) {
    arr2[i] = arr[i];
  }
  return arr2;
}

var arrayCopy = _toConsumableArray(array);

4) Default Parameters

기본값 함수 매개변수 (default function parameter)를 사용하면 값이 없거나 undefined가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다.

 

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2));
// expected output: 10

console.log(multiply(5));
// expected output: 5