[개발자의품격][부트캠프][1기][10차시] JavaScript 주요 포인트 #10 | 고급 문법 - Object Literal Syntax Extension, Spread Operator, Object Destructuring, Array Destructuring

JavaScript 주요 포인트 #10

Object Literal Syntax Extension

[] 안에 변수를 넣어주면 변수의 문자열 값을 object의 키로 사용할 수 있다.

<script>
  let person = {
    firstName: "John",
    lastName: "Doe",
  };

  // Object의 키로 변수에 할당된 문자열 값을 사용할 수 있다.
  let type = "student";
  let score = {
    [type]: "John",
    score: 95,
  };

  console.log(score["student"]); // John
  console.log(score[type]); // John

  // Object의 키를 동적으로 생성할 수 있어 코딩시 자유도가 높아진다.
  person.email = "";
  person[type] = "";

  console.log(person); // {firstName: 'John', lastName: 'Doe', email: '', student: ''}
</script>

 

---

 

Spread Operator

<script>
  let num1 = [4, 5, 6];
  let num2 = [1, 2, 3];
  let num3 = num2.concat(num1);
  console.log(num3); // [1, 2, 3, 4, 5, 6]

  // 배열 요소를 분해해서 결합한다. 실무에서 자주 쓰는 문법이다.
  let num4 = [...num2, ...num1];
  console.log(num4); // [1, 2, 3, 4, 5, 6]

  let num5 = [1, 2, 3, 4, 5, 6];
  
  // 문자열에도 사용할 수 있다. 문자열을 문자로 분해하여 배열 요소로 할당한다.
</script>

 

---

 

Object Destructuring

<script>
  function getPerson() {
    return {
      firstName: "John",
      lastName: "Doe",
      age: 37,
      email: "john@gmail.com",
      city: "",
      country: "",
      company: "",
    };
  }
  let person = getPerson();

  // let firstName=getPerson()["firstName"]; // John
  // let lastName=getPerson()["lastName"]; // Doe

  // 실무에서 많이 사용하는 문법으로서 코드 한줄로 위와 같은 변수가 생성된다.
  // 예를 들어 서버단에서 넘어오는 데이터 중에서 필요한 데이터만 추출하여 사용할 수 있다.
  let { firstName, lastName } = getPerson();

  console.log(firstName); // John
  console.log(lastName); // Doe
</script>

 

---

 

Array Destructuring

<script>
  // 예를 들어 제주도의 맛집 위도경도 함수를 만든다.
  function getGeoLocation() {
    return [112, 1234, 65.2334]; // 위도경도 외부 라이브러리는 주로 배열 형태로 보내준다.
  }
  
  // 이 코드는 가독성이 떨어진다.
  let coordinate = getGeoLocation();
  console.log(coordinate[0]); // 112
  console.log(coordinate[1]); // 1234
  
  // Array Destructuring은 가독성이 좋아 실무에서 많이 사용한다. 반드시 알고 의도적으로 많이 쓰는 연습을 해야한다.
  let [latitude, longitude] = getGeoLocation(); // 위도, 경도
  console.log(latitude); // 112
  console.log(longitude); // 1234
</script>

 

실습 소스코드 : https://github.com/postforty/bootcamp/tree/main/javascript