TIL 221005 구조분해할당

오늘 공부한 것

• padStart()
• 특정 날짜까지 카운트다운 기능
• 객체
• 비구조화 할당(구조분해할당)

공부한 것 정리

padStart()

• 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됨
• 구문

str.padStart(targetLength [, padString])

• 반대인 padEnd() 도 있다. 채워넣기는 대상 문자열의 끝(우측)부터 적용됨
• 전부터 카운트다운 관련 연습을 할 때마다 한 자릿수를 '01'과 같이 표현하는 방법이 무엇이 있을지 궁금해했는데, 노마드코더 강의를 보다가 알게 됐다. 굿~

D-Day까지 남은 시간 계산

• 노마드코더 챌린지 과제로 나온 것

const ddayTxt = document.querySelector(".dDay");

function calcDate() {
  const today = new Date();
  const christmas = new Date(2022, 11, 25).getTime();
  const todayMs = today.getTime();
  const leftMs = christmas - todayMs;
  let leftDay = Math.floor(leftMs / (1000 * 60 * 60 * 24));
  let leftHour = String(
    Math.floor((leftMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
  ).padStart(2, 0);
  let leftMinute = String(
    Math.floor((leftMs % (1000 * 60 * 60)) / (1000 * 60))
  ).padStart(2, 0);
  let leftSecond = String(Math.floor((leftMs % (1000 * 60)) / 1000)).padStart(
    2,
    0
  );
  ddayTxt.innerText = `${leftDay}d ${leftHour}h ${leftMinute}m ${leftSecond}s`;
}

calcDate();
setInterval(calcDate, 1000);

너저분.... 내가 봐도 지저분하니 조만간 정리 해볼 예정ㅎㅎ...

객체 관련

프로퍼티 축약 표현

• 프로퍼티 : 객체가 가지고 있는 데이터라고 생각하면 된다.
• ES5 이전에선 객체 리터럴의 프로퍼티는 프로퍼티 이름과 프로퍼티 값으로 구성된다. 프로퍼티의 값은 변수에 할당된 값일 수도 있다.

// 이전 방식
var x = 1, y = 2;

var obj = {
  x: x,
  y: y
};

console.log(obj); // { x: 1, y: 2 }

• ES6에서는 프로퍼티 값으로 변수를 사용 하는 경우, 프로퍼티 이름을 생략할 수 있다. 이때 프로퍼티 이름은 변수의 이름으로 자동생성 된다.

// ES6
let x = 1, y = 2;

const obj = { x, y };

console.log(obj); // { x: 1, y: 2 }

구조 분해 할당(destructuring assignment)

디스트럭처링이란!?

• 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다.

배열 디스트럭처링

• ES6 배열 디스트럭처링은 배열의 각 요소를 배열로부터 추출해서 변수 리스트에 할당한다. 이때 추출/할당 기준은 배열의 인덱스이다!

// ES6 Destructuring
const arr = [1, 2, 3];

// 배열의 인덱스를 기준으로 배열로부터 요소를 추출하여 변수에 할당
// 변수 one, two, three가 선언되고 arr(initializer(초기화자))가
// Destructuring(비구조화, 파괴)되어 할당된다.
const [one, two, three] = arr;
// 디스트럭처링을 사용할 때는 반드시 initializer(초기화자)를 할당해야 한다.
// const [one, two, three];
// SyntaxError: Missing initializer in destructuring declaration

console.log(one, two, three); // 1 2 3

배열 디스트럭처링을 위해서는 할당 연산자 왼쪽에 배열 형태의 변수 리스트가 필요하다

let x, y, z;

[x, y] = [1, 2];
console.log(x, y); // 1 2

[x, y] = [1];
console.log(x, y); // 1 undefined

[x, y] = [1, 2, 3];
console.log(x, y); // 1 2

[x, , z] = [1, 2, 3];
console.log(x, z); // 1 3

// 기본값
[x, y, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3

[x, y = 10, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3

// spread 문법
[x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [ 2, 3 ]

요러케 변수끼리 값을 스왑하기가 개쉬워진다. (출처 : 한입 크기로 잘라 먹는 어쩌고 강의)

• 쉼표를 사용하여 요소 무시하기

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

정리하다가 신기해서 가져옴 자바스크립트는 참 유연하구나...
좀 알게 됐다 싶으면 고양이 마냥 액체처럼 흘러내리는 느낌 (╯°□°）╯︵ ┻━┻

객체 디스트럭처링

• ES6의 객체 디스트럭처링은 객체의 각 프로퍼티를 객체로부터 추출하여 변수 리스트에 할당한다. 이때 할당 기준은 프로퍼티 이름(키)이다.

// ES6 Destructuring
const obj = { firstName: 'Ungmo', lastName: 'Lee' };

// 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다. 순서는 의미가 없다.
// 변수 lastName, firstName가 선언되고 obj(initializer(초기화자))가 Destructuring(비구조화, 파괴)되어 할당된다.
const { lastName, firstName } = obj;

console.log(firstName, lastName); // Ungmo Lee

• 객체 디스트럭처링은 객체에서 프로퍼티 이름(키)으로 필요한 프로퍼티 값만을 추출할 수 있다.

const todos = [
  { id: 1, content: 'HTML', completed: true },
  { id: 2, content: 'CSS', completed: false },
  { id: 3, content: 'JS', completed: false }
];

// todos 배열의 요소인 객체로부터 completed 프로퍼티만을 추출한다.
const completedTodos = todos.filter(({ completed }) => completed);
console.log(completedTodos); // [ { id: 1, content: 'HTML', completed: true } ]

이전에 인강으로 봤던 개념임에도 불구하고 볼 때마다 새로운 디스트럭처링과 객체 리터럴... 응용 잘하면 겁나 멋질 것 같은데 생각이 잘 안 난다...