목차
3항 연산자 식
3항 연산자 식은 세 부분으로 구성되어있다.
- 조건(condition)
- 조건이 참인 경우 실행될 명령(?)
- 조건이 거짓인 경우 실행될 명령(:)
조건 ? console.log('조건이 참입니다.') : console.log('조건이 거짓입니다.')
// 코드를 개행하여 여러 줄로 구성하는 방법 1
조건
? console.log('조건이 참입니다.')
: console.log('조건이 거짓입니다.')
// 코드를 개행하여 여러 줄로 구성하는 방법 2
조건 ?
console.log('조건이 참입니다.') :
console.log('조건이 거짓입니다.')
3항 연산자 식은 필요하다면 중첩하여 사용할 수 있다. 다만, 3중 중첩부터는 코드가 복잡해지기 때문에 조건문을 사용하는 것을 권장한다.
조건1
? console.log('조건1이 참입니다.')
: 조건2
? console.log('조건2가 참입니다.')
: console.log('조건1, 2 모두 거짓입니다.')
논리 연산자 식
JavaScript에서는 ||(OR 연산자)와 &&(AND 연산자)를 사용하여 논리 연산자 식을 만들 수 있다.
&& 연산자는 모든 조건이 참일 때만 참이다. 조건 중에 거짓인 값이 있다면, 첫 번째 거짓인 값을 반환하고, 모두 참이면 참인 값을 반환한다.
const result = expression1 && expression2 && expression3
|| 연산자는 조건 중 하나라도 참이면 참이다. 조건 중에 참인 값이 있다면, 첫 번째 참인 값을 반환하고, 모두 거짓이면 거짓인 값을 반환한다.
const result = expression1 || expression2 || expression3
논리 연산자를 잘 활용하면 조건문이나 조건식처럼 사용할 수 있다.
const user = {
name: '꼬리',
email: 'kkori@email.com',
isSignedIn: false,
}
// ---------------------------------------
// 조건문(if ... else 문)
if (!user.isSignedIn) signIn()
else signOut()
// ---------------------------------------
// 조건식(3항 연산자 표현식)
!user.isSignedIn ? signIn() : signOut()
// ---------------------------------------
// 논리 연산자 식(&&, ||)
// || 연산자는 첫 번째 Truthy 값을 찾는다. (&& 연산자의 반대)
user.isSignedIn || signIn()
// && 연산자는 첫 번째 Falsey 값을 찾는다. (|| 연산자의 반대)
user.isSignedIn && signOut()
function signIn() {
console.log('로그인합니다.')
}
function signOut() {
console.log('로그아웃합니다.')
}
함수의 빠른 반환
함수는 return 키워드를 사용해 값을 반환한다. 함수 블록에서 return 키워드 이후의 코드가 실행되지 않기 때문에 필요에 따라 값을 일찍 반환할 수 있다. 이것을 빠른 반환(early return)이라고 한다. 빠른 반환은 다음 두 가지 상황에서 사용해야 한다.
- 중첩된 코드를 줄이기: 이벤트 위임에서 일부 코드를 중첩해 실행해야 할 때 사용
- else if 조건문 제거: else를 제거하고, 표현식이 한 줄이면 중괄호를 생략할 수 있다.
// 중첩된 코드 줄이기: 이벤트 위임
container.addEventListener('click', (e) => {
const el = e.target.closest('.element')
if (!el) return
el.classList.toggle('.toggle')
})
// else if 문
function getGift(score) {
if (score === 100) return '노트북'
if (score > 75) return '태블릿'
if (score > 50) return '스마트폰'
return null
}
템플릿 리터럴
템플릿 리터럴(Template Literal)은 백틱(`, 역따옴표)으로 시작하고 끝나는 문자열이다.
const templateLiteral = `템플릿 리터럴 구문은 역따옴표(\`)를 사용합니다.`
템플릿 리터럴을 사용하면 문자를 접합하고, 여러 줄로 구성된 문자열을 만들기 쉬워진다.
function greetTemplate(data) {
return `
<div class="greet">
<strong>안녕! ${data.name}</strong>
<p>맛있는 ${data.mealTime} 먹자.</p>
</div>
`
}
const greet = greetTemplate({ name: '성호', mealTime: '점심' })
console.log(greet)
// <div class="greet">
// <strong>안녕! 성호</strong>
// <p>맛있는 점심 먹자.</p>
// </div>
템플릿 리터럴의 고급 형태로 태그드 템플릿(Tagged Template)이 있다.
태그(tag)는 템플릿 리터럴을 함수로 해석할 수 있게 해준다. 태그 함수의 첫 번째 인수는 문자열 값들의 배열이고, 나머지 인수들은 표현식과 관련이 있다. 태그 함수는 이 인수들로 원하는 연산을 수행한 후, 조작된 문자열을 반환한다. 태그 함수의 이름은 무엇이든 상관 없다.
const person = '최재훈'
const job = '프론트엔드 개발자'
// 함수 이름 뒤에 () 대신 역따옴표를 붙여도 함수를 실행한다.
const result = myTag`${person}은 ${job}입니다.`
console.log(result) // '최재훈은 프론트엔드 개발자입니다.'
function myTag(strings, person, job) {
console.log(strings) // ['', '은 ', '입니다.']
console.log(person) // '최재훈'
console.log(job) // '프론트엔드 개발자'
// 탬플릿 리터럴을 사용해 문자열 값 반환
return `${job}, ${person}${strings.at(-1)}`
}
오늘 하루를 돌아보며
오늘부터 실습 시간을 줄이고 진도를 나가기로 했다. 진도가 느리다는 이유다. 세상에나! 지금도 살짝 빠른가 싶었는데 여기서 더 빨라진다니 따라갈 수 있을까 걱정했다. 그런데 오늘 배운 내용은 다행히 개념을 이해해야 하는 정도로 어렵지 않고, JavaScript의 유용한 기능이어서 '아, 이런 기능이 있었구나!', '이렇게 하면 더 쉽겠구나!'하고 넘어가면 되는 거였다. 내용도 따라가기 어렵지 않아서 다행이다. 다만, 익숙해질 시간이 필요할 것 같다. 오늘은 실습을 하나도 못 해서 블로그만 업로드하고 남은 시간에 실습 문제들을 하나씩 풀어봐야겠다.
