본문 바로가기
JavaScript

TIL 0918 클래스 Math.max arguments RestParameter / SpreadSyntax

by 짱닭 2020. 9. 18.
반응형

클래스 정의

ES5 에서 클래스는 함수로 정의할 수 있다.

아래는 클래스의 속성과 메서드를 정의한 모습

function Car(brand, name, color){
  this.brand = brand;
  this.name = name;
  this.color = color;
}
function Car(brand, name, color){
  //인스턴스가 만들어질 때 실행되는 코드

  Car.prototype.refuel = function (){
    //연료 공급을 위한 코드
  }
}

ES6 에서 클래스는 클래스로 정의한다.

속성과 메서드 정의

class Car(){
  constructor(brand, name, color){
      this.brand = brand;
    this.name = name;
    this.color = color;
  }
}
class Car() {
  constructor(brand, name, color){
    //생성자
  }

  refuel(){
    //연료공급 코드
  }
}

Math.max()

max()사용시 인자가 숫자인지 배열인지 살피고 때에따라 사용하도록 한다.

parameter

let num=80;
function someThing(value) {
  value=999;
}
someThing(num);

위와같은 코드를 실행했을 때
num의 값을 출력해보면 그대로 80이다.
파라미터는 값(value)을 가져오는 것이므로 착각하지 않는다.

단, 인자가 참조형 데이터 타입(배열, 객체, 함수(function))이라면
주소를 가져오게 되므로 변수의 값이 바뀌게 된다.

arguments

유사배열을 만드는 arguments 키워드를 잊지말자

Rest Parameter / Spread Syntax

다수의 파라미터를 하나의 배열로 표현 나머지 매개변수 구문에서는 무한정 많은 인수를 배열로 나타낼 수 있다.

0개 이상의 인수(함수 호출의 경우) 또는 요소(배열 리터럴의 경우)가 예상되는 장소에서는 배열 식 또는 문자열과 같은 반복이 가능하거나, 0개 이상의 키 값 쌍(개체 리터럴의 경우)이 예상되는 장소에서는 개체 식을 확장할 수 있다.

Rest구문은 Spread구문과 똑같이 보인다. 어떻게 보면 Rest구문은 Spread 구문과 정반대다. Spread 구문은 "확장"하여 배열을 요소들로 확장하고, Rest문은 여러 요소를 수집하여 하나의 요소로 "컨덴싱"한다.

결론

Rest Parameter는 여러개의 인자(요소)들을 하나의 배열로 리턴 해주는 것이라 여기면 되고,
ex) func(...arr){..}으로 선언돼있을 때
func(1,2,3);하면
arr[0]===1; arr[1]===2; arr[2]===3; //모두 true.
이처럼 함수내에서 배열처럼 사용가능.

Spread Syntax는 배열이나 문자열처럼 반복할 수 있는(iterable) 데이터를 풀어서
각 요소 하나하나로 리턴 해주는 것이라고 여기면 된다.
ex) arr=[1,2,3]; 일때
...arr === 1, 2, 3; //true
[...arr] === [1,2,3]; //true

반응형

댓글