TIL 102 | Rest Syntax, Spread Syntax, Object Literal

hyounglee·2021년 1월 6일
0

JavaScript

목록 보기
43/46
post-thumbnail

1. Rest Syntax

_"I don't know how many vars you are sending, so I'll put whatever else you sent in an array." _

arguments 활용

function findHeighest(upperLimit) {
  let max = 0;
  fot(let i = 1; i< arguments.length; i++) {
    if(arguments[i] < upperLimit && arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}

const heighest = findHighest(80, 99, 88, 77, 88, 87, 67, 56, 34, 5, 1)

Rest operator 활용

function findHeighest(upperLimit, ...numList) {
  let max = 0;
  numList.filter(funtion(n) {
                 if((n < upperLimit) && (n > max)){
    			max = n;
  			}
                 })
                 return max;
}

const heighest = findHighest(80, 99, 88, 77, 88, 87, 67, 56, 34, 5, 1)

2. Spread Syntax

"My stuff is already an array. You've got separate params, unpack it."

Ugly Way

function sum(a, b, c, d, e){
  return a + b + c + d + e;
}

const numbers = [1, 2, 3, 4, 5];
const uglyWay = sum(numbers[0], numbers[1], numbers[2], numbers[3], numbers[4]);
console.log(uglyWay);

Old Way

function sum(a, b, c, d, e){
  return a + b + c + d + e;
}

const numbers = [1, 2, 3, 4, 5];
const oldWay = sum.apply(null, numbers);
console.log(oldWay);

Spread Way

function sum(a, b, c, d, e){
  return a + b + c + d + e;
}

const numbers = [1, 2, 3, 4, 5];
const spreadWay = sum(...numbers);
console.log(spreadWay);

리덕스 예시

ugly example

function aReducer(state, action) {
  let newState = Object.assign({}, state);
  newState.newProperty = action.payload;
  console.log(newState);
}

spread example

function aReducer(state, action) {
  let newState = {...state};
  newState.newProperty = action.payload;
  console.log(newState);
}

깊은 복사 예시

let myArr = [1, 2, 3, 4];
let myArr2 = myArr;
myArr2.push(5);
// 주솟값은 바뀌지 않기 때문에 원본인 myArr 도 [1, 2, 3, 4, 5]가 됨

이전 방식

let myArr = [1, 2, 3, 4];
let myArr2 = myArr.slice();
myArr2.push(5);

스프레드 연산자 방식

let myArr = [1, 2, 3, 4];
let myArr2 = [...myArr];
myArr2.push(5);

3. Object Literal

객체를 생성하는 기존의 세가지 방법

let x = new Object(); // {}

let y = Object.create(null); // {}

let z = {
  a: 1	// {a: 1}
}

cool way
구조분해할당

const { name, aMethod } = someJSON;
const { name: teacherName, aMethod: teacherMethod } = someJSON;
console.log(teacherName);
console.log(teacherMethod);

응용하기

// nested objects
const { name: {[0]: firstName, [1]: secondName} } = someJSON;
console.log(firstName);
console.log(secondName);
// nested objects
const [first, second, third] = someJSON.name;
console.log(first);
console.log(second);

// 요건 몰랐네!
const [,,,fourth, fifth] = someJSON.name;
const [, two, ...others] = someJSON.name;

활용 예시

getArea({width: 70, height: 100});

function getArea({width, height}){
  console.log(width * height);
}
profile
(~˘▾˘)~♫❝ 쉽게만 살아가면 재미없어 빙고 .ᐟ ❞•*¨*•.¸¸♪

0개의 댓글