[JavaScript]ES5와 ES6의 차이(5) - Concise Method, Spread

ES5와 ES6의 차이(5) - Concise Method, Spread

Concise Method

함수 선언을 더 간편하게!

  <script>
    // ES5: 회원 객체 속성과 메서드
    const member1 = {
      userid: "user01",
      name: "홍길동",
      age: 26,
      setName: function(name) {this.name = name;},
      getName: function() {return this.name;},
      toString: function() {return userid + ", " + name + ", " + age;}
    }

    // ES6: concise method: 객체의 함수 선언 시에 함수명(){}
    const member2 = {
      userid: "user02",
      name: "강감찬",
      age: 88,
      setName(name) {this.name = name;},
      getName() {return this.name;},
      toString() {return userid + ", " + name + ", " + age;}
    }
  </script>

 

 

Spread

객체 또는 배열의 복사, 객체에 속성 추가, 배열에 요소 추가를 아주 편하게!!

<script>
	// ES6: spread: 객체 또는 배열 복사하기
    // 객체
    const member = {
      userid: "user01",
      name: "홍길동"
    }

    // 객체 복사: {...객체명}
    const memberCopy = {...member}
    console.log("member = ", member);
    console.log("memberCopy = ", memberCopy);

    member.name = "이순신";
    memberCopy.name = "유관순";
    console.log("member = ", member);
    console.log("memberCopy = ", memberCopy);

    // 배열
    const array = [1, 2, 3]
    
    // 배열 복사: [...배열명]
    const arrayCopy = [...array];
    console.log("array = ", array);
    console.log("arrayCopy = ", arrayCopy);

    // 객체 복사 + 속성 추가: {...객체명, age:26, address:"서울특별시"}
    const memberCopyAdd = {...member, age: 26, address: "서울특별시"};
    console.log("memberCopyAdd = ", memberCopyAdd);

    // 배열 복사 + 배열 요소 추가: [...배열명, value, value]
    const arrayCopyAdd = [...array, 100, 200, 300];
    console.log("arrayCopyAdd = ", arrayCopyAdd);

    // 배열 concat 배열 + [배열 요소 추가]
    const array2 = ["apple", "banana", "orange"];
    const arrayConcatAdd = [...array, ...array2, 333, 777, 999];
    console.log("arrayConcatAdd = ", arrayConcatAdd);
</script>

실행 결과