코드 가독성을 높이는 작고 사소한 방법들

❗아래 방법들을 이용해 코드 양을 줄여 코드 가독성을 조금이나마 높일 수 있다.

 

1. 구조 분해 할당 (destructuring assignment)

 

구조 분해 할당
배열이나 객체의 속성을 해체하여 변수에 할당하는 자바스크립트 표현식

const { hi, hello } = greetings;

console.log(hi, hello);

// console.log(greetings.hi, greetings.hello);

const getValue = ({ target: { value } }) => value;
/* const getValue = (event) => event.target.value; */

const getTarget = ({ target }) => target;
/* const getTarget = (event) => event.target; */

const [first] = arrayList;
// const first = arrayList[0]

 

2. IDL attributes 사용 

 

IDL
Interface Description Language
특정 프로그래밍 언어와는 독립적으로 객체 인터페이스를 정의하는 데 사용되는 범용 언어
다른 프로그래밍 언어나 환경에서 사용되는 객체 인터페이스를 기술하는 데 사용된다. ⇒ 개발자 간의 협업이나 서로 다른 플랫폼 간의 통신을 위해 사용된다.

참고 : https://www.w3.org/TR/2011/WD-html5-20110525/the-input-element.html#input-type-attr-summary

4.10.7 The input element — HTML5

 

두 날짜 간의 일 수 차이를 구해야 할 때를 예로 들어보자.

 

value를 사용하면 `new Date()`를 사용하여 값을 Date 객체로 변환해야 한다. 그런 다음 `getTime()` 메서드를 사용하여 해당 날짜의 타임스탬프 값을 얻고 이를 활용해 시간 차이를 계산해야 한다.

하지만 valueAsNumber를 사용하면 바로 해당 날짜의 타임스탬프 값을 얻을 수 있기 때문에 위 과정을 건너뛸 수 있다.

<input type="date" id="date1" min="1970-01-01" />
<input type="date" id="date2" min="1970-01-01" />

const date1Input = document.getElementById('date1');
const date2Input = document.getElementById('date2');

const date1Timestamp = date1Input.valueAsNumber;
const date2Timestamp = date2Input.valueAsNumber;

const timeDiff = Math.abs(date2Timestamp - date1Timestamp);
const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));

console.log(daysDiff); // 날짜 간의 일 수 차이

/*
const date1Input = document.getElementById('date1');
const date2Input = document.getElementById('date2');

const date1Timestamp = new Date(date1Input.value).getTime();
const date2Timestamp = new Date(date2Input.value).getTime();

const timeDiff = Math.abs(date2Timestamp - date1Timestamp);
const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));

console.log(daysDiff);
*/

• Date (date)
• Month (month)
• Week (week)
• Time (time)
• Local Date and Time (datetime-local)
• Number (number)
• Range (range)

예시로 든 valueAsNumber는 위 타입의 input에서만 사용할 수 있다. 다양한 속성들이 존재하고, input 타입별로 사용할 수 있는 속성도 다르니 사용 전 참고 링크를 통해 확인해 보는 것을 추천한다.

3. `window.` 생략

window는 전역 객체이기 때문에, 전역 범위에서 접근할 수 있다. 따라서 `window.`을 생략하고 사용 가능하다.

localStorage.getItem('key');
/* window.localStorage.getItem('key'); */

matchMedia('(max-width: 768px)');
/* window.matchMedia('(max-width: 768px)'); */

 

 

---

또 다른 방법들을 알게 될 때마다 추가할 예정이다.