[JavaScript] : 단축속성명, 전개구문, 나머지 매개변수, 템플릿 리터럴.

spread operator

단축속성명
property shorthand

// 예시

const name = 'song'; // name 이라는 변수에 'song'을 할당하고;
const age = 28; // age 라는 변수에는 28을 할당했을 때,

const obj = {
    name:name // 위에 할당한 변수를 value 자리에 넣어줌.
    age:age // 위에 할당한 변수를 value 자리에 넣어줌.
};
 // 라고 obj에 값을 할당하면,
 
 console.log(obj); // 콘솔로 찍었을 때,
 
 //출력값
{ name: 'song', age: 28 } // 이와 같이 출력이 된다.

위는 객체의 성질에서, key-value의 pair로 이루어진 객체의 value 자리에는 함수도 들어갈 수 있고, 변수도 들어갈 수 있으며, 들어갈 수 있는 조건에 제한이 없다.

위 객체의 성질을 이용해서

name의 value 자리에는 'song' 이라는 데이터를 담고있는 name이라는 "변수"를 넣어준 것이고,
age의 value 자리에는 28이라는 데이터를 담고있는 age라는 "변수"를 넣어준 것이다.

위와 같이 key 와 value의 이름이 같으면, 여기서 "단축속성명"을 사용할 수가 있다.

// 단축속성명 사용한 코드

const name = 'song';
const age = 28;

const obj = { name, age }; // key와 value의 이름이 같으므로 과감히 생략해서 사용한다.

console.log(name, age); // 'song', 28
console.log(obj); // {name :'song',age : 28}

---

전개구문
spread operator

(1). 배열에서의 전개구문

사용방법 : 배열로 이루어진 데이터의 이름 앞에 ... 을 써준다.

// 배열의 전개구문
// ... = spread operator

let arr = [1, 2, 3]; // 배열을 하나 선언해서 값을 할당하고,
console.log(arr); // 그 값을 콘솔로 찍는다.
console.log(...arr); // 그 값을 ...으로 전개를 시켜서, 콘솔로 찍는다.

// 출력값
[ 1, 2, 3 ]
1 2 3

전개구문을 사용하면 배열에 어떠한 값을 push 하지 않고, 아래와 같이 값을 추가 해 줄 수 있다.

let newArr = [...arr, 4]; // spread operator를 사용해 arr의 요소값을 배열을 벗겨주고, 4라는 요소를 배열안에 추가해 새로운 배열 newArr에 할당했다.
console.log(newArr); // 콘솔로 확인해보면

// 출력값
[ 1, 2, 3, 4 ] // 배열하나에 잘 들어가있는것을 확인할 수 있다.

 

(2). 객체에서의 전개구문

// 객체에서의 전개구문

let user = {
    name: 'song',
    age: 28,
}; // user라는 객체를 하나 만들고,

let user2 = { ...user }; // user2라는 변수를 선언해서 그 값을 {}안에 user를 전개시켜주고 콘솔로 확인해보면

console.log(user);
console.log(user2);

// 출력값
{ name: 'song', age: 28 } // = user
{ name: 'song', age: 28 } // = user2

위와같이 새롭게 값을 할당하고, 새로운 요소를 추가하고, 무궁무구진한 방면으로 전개구문은 활용이 가능하다.

---

나머지 매개변수
rest parameter

// rest parameter

function example(a, b, c, ...args) {
    console.log(a, b, c);
    console.log(...args);
    console.log(args);
}
example(1, 2, 3);
example(1, 2, 3, 4, 5, 6, 7);

// 출력값
// example(1, 2, 3)의 출력값
1 2 3     // console.log(a, b, c)
          // console.log(...args)
[]        // console.log(args)
// example(1, 2, 3, 4, 5, 6, 7)의 출력값
1 2 3     // console.log(a, b, c)
4 5 6 7   // console.log(...args)
[ 4, 5, 6, 7 ] // console.log(args)

위에서 example이라는 함수에 값을 넣어 실행시킨 출력값으로부터 알 수 있는 내용들이 있다.

• a,b,c 에 매칭되는 매개변수의 수가 그 이상으로 넘어가면, ...args가 그 매개변수들을 대신하여 받아주고, 결과값을 정상적으로 출력해준다.
• args를 spread operator를 사용하지 않은채 콘솔로 값을 출력하면, "배열"의 형태를 지니고, args에 들어온 매개변수의 값들은 "배열"의 "요소"로 저장된다.
• console.log(...args)를 출력했을 때, 들어오는 매개변수가 없으면, undefined가 아닌, 공란이 출력된다. args가 빈 배열을 나타내는 걸로 보았을 때, 배열의 요소값이 undefined는 아닌모양이다.

---

템플릿 리터럴
Template Literal
``

console.log(`hello world ${3 + 3}`); // ${} 괄호 안에는 javascript의 거의 모든 문법이 들어올 수 있는것 같다.
const all = 'vincenjo';     // all 이라는 변수에 빈센조라는 값을 할당하고,
console.log(`hello ${all}`); // ${}괄호안에 변수의 값을 넣어준다.
console.log(`                // ``빽틱은 굉장히 유용한 멀티라인을 지원해준다.
    이 세상 위엔 내가있고,
          나를 사랑해주는
            나의 사람들과 ~
        나의 길을가고싶어 ~~.
    나는 문제 없어 -황규영-
`);

// 출력값

hello world 6
hello vincenjo

    이 세상 위엔 내가있고,
          나를 사랑해주는
            나의 사람들과 ~
        나의 길을가고싶어 ~~.
    나는 문제 없어 -황규영-

---

ES6문법 중 4개를 정리해보았다.

위 4개의 문법들은 javascript에 갓 입문한 나조차도 굉장히 많이 사용하는 문법들이다.

특히 빽틱은 댓글기능 관련해서 프론트에 작성된 댓글들을 보여주는 용도로 굉장히 유용하게 상용했다.

  const comment = document.querySelector("#comment");
  comment.innerHTML = data
    .map((review, index) => {
      // review는 리뷰객체, index는 data에서의 인덱스
      let { writer, contents } = review; // 구조분해할당 : 리뷰의 writer, contents 속성의 값을 변수에 할당
      if (!writer) writer = "이름이 없습니다.";
      if (!contents) contents = "내용이 없습니다."; // validation check
      return `<li class="review" data-number="${index}">
                  <p class="comment-contents">${contents}</p>
                  <p class="comment-writer">작성자: ${writer}</p>
                  <div>
                    <button class="update">수정</button>       
                    <button class="delete">삭제</button>      
                  <div>
                </li>`

위의 코드와 같이 ``빽틱안에 특정 html을 가져와 담아주고 ${} 괄호안에는 변수의 값을 넣어주어서, 구현시키는 것이 가능하다.

그래서 오늘은 ES6의 이 4가지문법을 한 번 정리해 두고 싶었다.

args의 값이 spread operator를 사용하지 않은채 출력하면, 배열의 값으로 받는다는 것도 처음 알게 되었다.

관련해서 몇 가지 삽질을 해보아야 겠다.

#자바스크립트 #ES6문법 #property_shorthand #spread_operator #rest_parameter #args #array #template_literal #빽틱

#단축속성명은_key와_value의_명이같으면_그때_사용이_가능하다