Study/JavaScript(Clean code)

[JavaScript][clean-code] Array.length

* Array.length - 배열의 길이는 실무 혹은 간단한코드에서 많이 사용된다. ex) if문, 리액트 등등 * Array.length (if문 예시) const arr = [1, 2, 3]; if (arr.length를 이용한 조건 검색) { // ... some code } * Array.length (리액트 예시) const arr = [1, 2, 3]; arr.length > 10 && arr.map((el) => {el} * JavaScript array의 구멍 const arr = [1, 2, 3]; console.log(arr.length); // 3 arr.length = 10; console.log(arr.length); 10 // arr을 찍어보면 아래와 같이 출력된다. arr [..

[JavaScript][clean-code] JavaScript의 배열은 객체이다.

* JavaScript의 배열은 객체이다. - 자바스크립트의 배열을 객체스러운면이 많고 객체처럼 취급될 때가 많다. 따라서 사용에 주의를 해주어야한다. * 배열 확인 방법 - Array.isArray(검사할 요소); const arr = [1, 2, 3]; console.log(Array.isArray(arr)); // true const arr = '[1, 2, 3]'; console.log(Array.isArray(arr)); // false

[JavaScript][clean-code] 드 모르간의 법칙

* 드 모르간의 법칙 const isValidUser = true; // 서버에서 넘어온 값 const isValidToken = true; // 서버에서 넘어온 값 if (isValidToken && isValidUser) { console.log('로그인 성공!'); } 만약 '로그인 실패'를 만들거면?? 그럼 기본 로직이나 플래그 값을 활용할 수 밖에 없다. 왜냐면 해당 값들은 서버에서 받아온 값들이기 때문에 해당 코드는 실제로 유저와 소통하고 있는 코드이기 때문이고 검증된 코드이기 때문에 해당 코드를 활용해야함 const isValidUser = false; const isValidToken = false; // if (!(A && B)) { // 성공 // } // 위 아래의 경우는 동일하다. ..

[JavaScript][clean-code] Nullish coalescing operator

* Nullish coalescing operator(Null 병합 연산자) (비교적 최근문법 예전에 나온 레거시형 브라우저에서는 돌아가지 않을 수 있다.) function createElement(type, height, width) { const element = document.createElement(type || 'div'); element.style.height = String(height || 10) + 'px'; element.style.width = String(width || 10) + 'px'; return element; } - 만약 width와 height값을 0이라는 값을 주게 된다면? const el = createElement('div', 0, 0); el.style.heig..

[JavaScript][clean-code] 명시적인 연산자 사용 지향하기

* 명시적인 연산자 사용 지향하기 항상 괄호를 이용하여서 우선순위를 지정해주기 연산자 우선 순위를 외우기 보다는 괄호를 활용하여 사용한다. 증감연산자는 지양하고 명시적인 코드를 작성하는것이 좋다. 코드를 명시적으로 작성하자 ex) 몸무게 / (신장 * 신장) if ((isLogin && token) || user) 위의 예시처럼 괄호를 이용하여서 우선순위를 지정해주기 예측 가능하고 디버깅 하기 쉬운코드로 만들어준다. function increment(number) { // number++; (BAD) 명시적이지 않은 코드 // 좀 더 명시적이게 사용하기 number = number + 1; // (GOOD) } console.log(increment(2)); // 3

[JavaScript][clean-code] Default Case고려하기

* Default Case고려하기 - JS는 사용자와 상호작용하는 언어이다. 따라서 사용자의 입력을받을수도있고 사용자가 만질수도 있다. 그럴때마다 값이 변경되고 런타임 프로그램이 동작되는 시기도 무언가 결정이 될 수 있다. - 사용자에게 값을 얻지 못하였을때 어떠한 기본값을 둘지 정책을 정할 수 있다. (기본값을 정해놓을것은 매우 중요하다.) - 이를 edge case라고도 한다. - team의 core한 유틸리티 함수나 core한 라이브러리를 개발하는 팀은 항상 이런부분을 염두해 두어야 한다. (그래야 더욱더 안전하고 확장성 높은 코드를 작성할 수 있다.) * 기본값 설정 예시 코드 function sum(x, y) { x = x || 1 y = y || 1 return x + y; } sum(); o..