Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 고잉버스
- 명령어
- 프로그래머스
- 연습문제
- 리눅스마스터1급
- 월간코드챌린지
- JavaScript
- 문자열
- 코딩테스트
- map
- 리눅스마스터 3과목
- 카카오
- 반복문
- Java
- Linux
- 코테
- 자바
- 스프링 빈
- 백준 javascript
- 리눅스
- GoingBus
- 개발자 회고록
- 리눅스마스터 1급 정리
- toCharArray
- Kotlin
- java 백준 1차원 배열
- 백준 java
- Memoir
- 자바스크립트 코딩의 기술
- 스프링 컨테이너
Archives
- Today
- Total
hoon's bLog
Javascript 자바스크립트 코딩의 기술 4장 조건문을 깔끔하게 작성하라 본문
반응형
4장 조건문을 깔끔하게 작성하라
tip17. 거짓 값이 있는 조건문을 축약하라
- 불 자료형(boolean type)이라고 부르는 원시값 true, false 와 참(truthy) 또는 거짓(falsy) 값이라고 부르는 것들에 대한 차이를 살펴보자.
Falsy | keyword |
0 | 숫자 |
-0 | 음수 |
0n | BigInt |
"" | 빈 문자열 |
null | 아무 값도 없음 |
undefined | 원시값 |
NaN | 숫자가 아님 |
- 배열과 객체의 경우 비어있더라도 항상 값이 참이다.(ex. [], {})
- 객체 또는 배열이 비어있는지 확인하려면 [].length 또는 Object.keys({}).length 등으로 확인해야 한다.
- 정의되지 않은 키의 값을 가져오면 undefined 이다.
1 == '1'
// true 동등 : 자료형이 다른 값을 비교할때 == 이용해서 동등인지 확인 가능
1 === '1'
// false 일치 : 동일한 값 또는 엄격히 일치하는 값이란 값뿐만 아니라 자료형도 같은것
- 간단하게 == 는 값은 같지만 자료형이 같지 않는 상태고, === 는 값과 자료형이 모두 같은 상태!!!
tip18. 삼항 연산자로 빠르게 데이터를 확인하라
- 삼항 연산자를 사용해야 하는 이유는 단순하기만 한 것이 아니라 더 예측 가능하며, 변수의 재할당을 줄일 수 있다.
- 삼항 연산자는 코드를 단순화할 수 있어서 사용할 만한 가치가 있는 경우에만 쓴다.
- 사용할 만한 가치가 없다고 생각되면 if 문으로 돌아가는것이 좋다.
- 여러 줄로 작성해야 하는 경우에는 분리해서 독립적인 함수 로 이동시키는 것이 좋다.
if (active) {
var display = 'bold'
} else {
var display = 'normal'
}
// 삼항연산자로 개선한 코드
let display = active ? 'bold' : 'normal';
tip19. 단락 평가를 이용해 효율성을 극대화하라
- 단락 평가(short circuiting) : 가장 타당한 정보를 먼저 위치시켜서 정보 확인을 건너뛰는 것
- || 으로 작성하는 OR연산자는 선택 가능한 값 중 하나라도 true 이면 true 반환
const name = 'joe' || 'I have no name';
console.log(name);
// 'joe'
- && 으로 작성하는 AND 연산자는 거짓값이 발생하는 즉시 중단
const name = false && 'I have no name';
console.log(name);
// false
- 이번엔 예제 코드를 통해 알아보도록 하자!
function getIconPath(icon) {
const path = icon.path ? icon.path : 'uploads/defaults.png';
return `https://assets.foo.com/${path}`
}
const icon = {
path: 'acme/bar.png'
}
getIconPath(icon);
// "https://assets.foo.com/acme/bar.png"
// 단락평가로 개선 된 코드
function getIconPath(icon) {
const path = icon.path || 'uploads/defaults.png';
return `https://assets.foo.com/${path}`
}
- 단락 평가의 장점은 간결해질 뿐 아니라, 표현식 끝에 기본값을 추가할 수 있고, 오류를 예방 할 수 있다.
- 조건문을 나열 또는 삼항연산자로 사용할때 상황을 잘 구분하자.
- 코드를 줄이는 것도 좋지만 가장 중요한건 코드를 통한 소통과 가독성임을 잊지 말자.
Reference
자바스크립트 코딩의 기술 요약 / 정리
728x90
반응형
'IT > Javascript' 카테고리의 다른 글
Javascript 자바스크립트 코딩의 기술 5장 반복문을 단순하게 만들어라 (2) (0) | 2024.02.06 |
---|---|
Javascript 자바스크립트 코딩의 기술 5장 반복문을 단순하게 만들어라 (1) (0) | 2024.01.24 |
Javascript 자바스크립트 코딩의 기술 3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 (3) (0) | 2024.01.17 |
Javascript 자바스크립트 코딩의 기술 3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 (2) (0) | 2024.01.10 |
Javascript 자바스크립트 코딩의 기술 3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 (1) (0) | 2024.01.04 |