What I Learned Today
삼항 연산자 : if-else 문을 사용하는 조건문을 더 간단하게 작성할 수 있다.
삼항 연산자 식은 간단한 조건 처리에는 매우 유용하다.
하지만 중첩이 깊어질수록 가독성이 떨어지기 때문에 복잡한 조건은 if-else 문을 사용하는 것이 좋다.
// 삼항 연산자의 기본 구조
조건 ? 조건이 참인 경우 실행 : 조건이 거짓인 경우 실행
// ex
const bool = true;
// 한 줄 작성
bool ? console.log('조건이 참입니다.') : console.log('조건이 거짓입니다.') // 조건이 참입니다.
// 여러 줄 작성
bool
? console.log('조건이 참입니다.')
: console.log('조건이 거짓입니다.')
// 더 복잡한 조건
const first = false;
const second = true;
first
? console.log('조건1이 참입니다.') // first가 false 이기 때문에 다음 조건 비교
: second
? console.log('조건2가 참입니다.') // second가 true 이기 때문에 조건2가 참입니다.
: console.log('조건1, 2 모두 거짓입니다.')
논리 연산자 : 조건식을 여러번 쓰지 않고 간단하게 쓰기 위해 사용한다.
- AND ( && ) : 모두 참일 때만 전체가 참
- 모두 참일 경우 마지막 값 반환
- 하나라도 거짓일 경우 : 첫 번째 거짓 값 반환
- OR ( || ) : 하나라도 참이면 전체가 참
- 모두 참일 경우 : 첫 번째 참인 값 반환
- 하나라도 거짓일 경우 : 마지막 값 반환
평가 방식은 모두 왼쪽부터 평가한다.
빠른 반환 : JS에서 함수는 return 키워드를 만나면 다음 코드는 실행되지 않는다. 이러한 흐름을 사용하여 빠른 반환을 할 수 있다.
- 빠른 반환을 언제 사용하는가
- 중첩된 코드 줄이기
- else if 조건문 제거
중첩된 코드 줄이기
// 줄이기 전
container.addEventListener('click, (e) => {
const el = e.target.closest('.element')
if (el) {
el.classList.toggle('.toggle')
}
})
// 줄인 후
container.addEventListener('click, (e) => {
const el = e.target.closest('.element')
if (!el) return
el.classList.toggle('.toggle')
})else if 조건문 제거
// else if를 제거하기 전
if (score === 100) {
gift = '노트북'
} else if (score > 75) {
gift = '테블릿'
} else if (score > 50) {
gift = '스마트폰'
} else {
gift = null
}
// else if를 제거한 후
if (score === 100) {
return '노트북'
}
if (score > 75) {
return '태블릿'
}
if (score > 50) {
return '스마트폰'
}
return null
}
- 템플릿 리터얼 : 백틱(`, 역 따옴표)으로 시작하고 끝나는 문자열
- 문자 접합이 쉬워진다.
- 여러 줄로 구성된 문자열을 만들기 쉬워진다.
// 사용 방법
const templateLiteral = `템플릿 리터럴 구문은 역따옴표(\`)를 사용합니다.`
// 템플릿 리터럴을 사용한 문자 접합
function greetTemplate(data) {
return `<p>안녕! ${data.name}, 맛있는 ${data.mealTime} 먹자.</p>`
}
const greet = greetTemplate({ name: '성호', mealTime: '점심' })
console.log(greet) // <p>안녕! 성호, 맛있는 점심 먹자.</p>
// 템플릿 리터럴을 사용한 여러 줄 작성
function greetTemplate(data) {
return `
<div class="greet">
<strong>안녕! ${data.name}</strong>
<p>맛있는 ${data.mealTime} 먹자.</p>
</div>
`
}
The Problem I Faced
What I Tried to Do
How I Solved It
So
Aha Moments
.focus() 또는 .select()를 사용하면 입력했던곳으로 다시 돌아가도록 할 수 있다. -> 접근성 챙기기
반응형
