Front-end
[Javascript] 연산자, 조건문, 반복문
바닷가쟤
2023. 7. 18. 11:47
- 연산자, nullish 병합
- 선택적 체이닝 ( ?. )
- 전개 연산자 ( ... )
- 구조 분해 할당
- if, switch 조건문
- for, for of, for in 반복문
- while문, do while 반복문
연산자, nullish 병합
&& : and 연산자, 거짓일 때 반환
|| : or 연산자, 참일 때 반환
?? : nullish 병합 연산자로, null/undefined를 제외한 모든 데이터를 반환한다.
특히, || 연산자는 if문, 삼항 연산자를 쓰지 않고도 '조건'이 아닐 경우에 출력할 것을 지정할 수 있다.
return user.address?.city || '주소 없음' // user.address?.city가 없으면 '주소 없음'을 반환
여기서 ?. <- 선택적 체이닝도 등장한다.
선택적 체이닝(Optional Chaning)
점표기법을 사용할 수 없는 데이터(null, undefined)에도 체이닝을 사용할 수 있게 해준다.
전개 연산자(Spread Operator)
배열/객체 데이터를 풀어서 출력할 수 있다.
const a = [1, 2, 3]
console.log(...a) // 1, 2, 3
여기서 ... <- 이게 전개 연산자이다.
구조 분해 할당 (Destructing assignment)
배열, 객체 데이터에서 사용하는 것으로 동일한 구조에 맞게 데이터 값을 할당할 수 있다.
const obj = {
a: 1,
b: 2,
c: 3
} //객체 데이터
const arr = [1,2,3,4,5,6,7,8,9] // 배열 데이터
const [,,,,,,,,n] = arr // 배열 데이터는 순서에 맞춰서 !
const {a, c} = obj // 객체 데이터는 속성 이름으로 찾을 수 있음
구조 분해 할당은 배열과 객체 데이터를 찾는 방식이 다르다. (주석 참조)
if문은 너무 쉬우니...
switch 조건문 !
function price(game) {
let p
switch(game) {
case 'overwatch':
p = 20000 // let = p , p = 20000 대신에 return 20000 을 사용해도 된다.
break
case 'lol':
p = 1000
break
default:
p = 0
}
return
}
각 케이스마다 명확한 값에 따른 출력을 지정할 때 사용하면 좋다.
for문
for (let i= 8; i > -1; i -= 1) { // 총 9번 반복
if (i % 2 === 0) {
continue
}
console.log(i)
}
break는 아예 반복을 종료하고, continue는 조건에 만족 되는 건 넘기고 다음 반복을 실행한다.
for of 반복문 : 배열 데이터
for (let i = 0; i < games.length; i += 1) {
console.log(games[i])
}
// 이 평범한 for문 코드를
for (const a of games) {
console.log(a)
}
// 이렇게 작성 가능 ! 이게 for of 반복문 !
for in 반복문 : 객체 데이터
const user = {
name: 'yuna',
age: 22,
isValid: true,
email: 'seacrab808@naver.com'
}
for (const key in user) {
console.log(key)
console.log(user[key])
}
객체 데이터는 순서를 가지지 않는다. 객체 데이터의 개수만큼 반복한다.
while문 : 조건이 참이면 계속 반복하는 반복문
// while문
let n = 0
while (n < 8) {
console.log(n)
n += 1
}
// do while문
let n = 0
do {
console.log(n) // 먼저 실행 -> 최소 최초 한 번은 실행한다.
} while (n)
728x90