안녕하세요.
이 공간은 제가 프론트엔드를 처음 접하며 배운 것을 주저리주저리 쓰는 공간입니다.
이번 내용은 javascript 3편입니다.
실시간 강의를 정리하기 시작한 내용이라, 이전 내용과 겹치는 게 많을수도 있어요.
if (조건) {코드}
if(참)과 else(거짓)으로 나뉘어진 값입니다.
단독 사용과 혼합 사용이 가능해요.
const name = 'DH'
if (name === 'Neo') {
console.log(1)
} else if (name === 'Lewis') {
console.log(2)
} else if (name === 'DH') {
console.log(3)
}switch
if보다 다양하고 정확한 값을 가진 데이터들을 사용할 때 유용합니다.
단순하게 1~2개의 데이터를 사용할 땐 if가 훨씬 간단해요.
switch (name) {
case 'Neo':
console.log(1)
break
case 'Lewis':
console.log(2)
break
case 'Heropy':
console.log(3)
break
}for 반복문
반복해서 코드가 실행됩니다.
아래 예제는 for 반복문의 기본적인 틀입니다.
for (초기화; 조건; 증감) {
console.log(값)
}저 세미콜론은 사이사이에만 들어갑니다.
마지막 증감 값에 세미콜론을 붙여버리면 오류가 나요.
코드가 실행되는 원리는
1. 초기화와 조건의 값으로 코드가 실행되고 한 번 반복
2. 다시 증감으로 돌아와서 증감 조건을 확인
3. 이후 조건값을 다시 확인하고 출력
이런 구조에요.
for (let i = 1; i <= 100; i +=1) {
if (i > 5) {
break
}
console.log(i)
}
for (let i = 0; i < 10; i += 1) {
if (i % 2 === 0) {
continue
}
console.log(i)
}핵심!
for 반복문 안에서
break는 전체를,
continue는 현재를 멈추는 기능을 합니다.
그런데 처음보는 %가 나오네요?
%는 '나머지 연산자'라고 합니다.
숫자를 나눈 후 남은 나머지 숫자를 이야기해요.
예를 들면,
3 % 2 = 1
4 % 2 = 0
이 됩니다.
이를 토대로, 1이 남으면 홀수, 0이 남으면 짝수로 필터링하는 역할로 유용하게 쓸 수 있겠어요!
for of
배열, 문자를 데이터로 반복할 때 사용합니다.
const users = [
{
name: 'd',
age: 1
},
{
name: 'h',
age: 2
},
{
name: 's',
age: 3
}
]
for (const user of users) {
console.log(user)
}
for (const user of users) {
console.log(user.name)
}for in
객체 데이터를 반복할 때 사용합니다.
const user = {
name: 'd',
age: 3,
isValid: true,
email: '1@naver.com'
}
for (const key in user) {
console.log(key, user[key])
}코드에서 user의 속성을 바로 파악하기 어려울 때는 반복문을 사용하면 유용합니다.
그리고 참고로,
key(name, age 등)는 출력의 순서를 보장할 수 없습니다.
왜냐하면,
key는 작성된 순서가 1, 2, 3번의 순서 개념이 절대 아니기 때문이죠.
while
조건이 참일 동안 반복 실행됩니다.
즉, 조건이 거짓이면 무조건 실행되지 않습니다!
그리고 무한반복에 주의하세요!
사실 무한반복되는 코드를 강사님이 보여주시면서 실행시키지 말라고 하셨는데요.
궁금한 건 못참잖아요?
몰래 실행해본 저는 실제 브라우저가 뻗어버리는 걸 목격했습니다.
물론 아래 코드는 무한반복은 아니에요.
let n = 0
while (n < 4) {
console.log(n)
n += 1
}do while
조건이 참일 동안 반복 실행됩니다.
while과 별 다를 게 없어보이는데요.
결정적으로 다른 한 가지!
do while은 조건이 거짓이라도 한 번은 동작합니다!!!
let = 0
do {
console.log(n)
n += 1
} while (n < 4)코드 형태를 보면, while이 맨 뒤로 가면서 do가 붙습니다.
거짓이어도 한 번은 동작하는 이유!
예제에서 보듯이,
do 구문이 실행된 후 조건이 평가되기 때문에,
조건이 거짓이라도 한 번은 실행되는 겁니다.
연산자
+, -, *, =, ===, ! 같은 기호로 더하기, 빼기, 곱하기, 할당, 비교, 부정 등의 의미를 가집니다.
산술연산자 : +, -, *, / , %
할당연산자 : =, +=, -=, *=, /=, %=
let a = 3
a += 2
a -= 2
a *= 2
a /= 2
a %= 2
console.log(a)증감연산자 : ++a, a++, --a, a--
++이 앞에 붙으면 피연산자의 값을 1 증가시킨 후 연산이 진행됩니다.
++가 뒤에 붙으면 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 증가시킵니다.
--도 마찬가지인데요.
사실 거의 쓸 일은 없을 듯 싶네요.
부정연산자
참(Truthy)와 거짓(Falsy)의 반댓값을 불린데이터로 반환합니다.
console.log(!1)1은 Truthy인데, 콘솔에는 거짓의 불린 데이터인 false가 출력되요.
console.log(!!'123')역시 Truthy인 문자데이터 123인데요.
!가 하나니까 false로 갔다가
!가 하나 더 있으니 false의 반대인 true가 출력됩니다.
구우우욷~!!!