728x90
반응형
JavaScript [4] - 조건문과 반복문
조건문
- if statement
- 조건 표현식의 결과값을 boolean 타입으로 변환 후 참/거짓을 판단
- if, else if, else
- 조건은 소괄호(condition) 안에 작성
- 실행할 코드는 중괄호 {} 안에 작성
- 블록 스코프 생성
const name = 'manager'
if (name === 'admin') {
console.log('관리자님 환영합니다.')
} else if (name === 'manager') {
console.log('매니저님 환영합니다.')
} else {
console.log(`${name}님 환영합니다.`) // Backtick에 주의해줍시다.
}
반복문
- while
- for
- for ...in
- for ...of
- Array.forEach
- while
- 조건문이 참이면 문장을 계속해서 수행
let i = 0
while (i < 0) {
console.log(i)
i++
}
//0, 1, 2, 3, 4, 5
- for
- 특정한 조건이 거짓으로 판별될 때까지 반복
for(let i = 0; i < 6; i++) {
console.log(i)
}
//0, 1, 2, 3, 4, 5
- for ...in
- 객체(object)의 속성을 순회할 때 사용
- 배열도 순회 가능하지만 인덱스 순으로 순회한다는 보장이 없으므로 권장하지 않음
const fruits = { a:'apple', b:'banana'}
for (const key in fruits) {
console.log(key) // a, b
console.log(fruits[key]) // apple, banana
}
- for... of
- 반복 가능한 객체를 순회할 때 사용
- 반복 가능한(iterable) 객체의 종류 : Array, Set, String 등
const numbers = [0, 1, 2, 3]
for (const number of numbers) {
console.log(number) // 0, 1, 2, 3
}
- for ...in과 for... of의 차이
- for ...in 은 "속성 이름"을 통해 반복
- for... of는 "속성 값"을 통해 반복
- for ...in 은 인덱스 값을, for ...of 는 요소를 통해서 반복됩니다.
const arr = [3, 5, 7];
for (const i in arr) {
console.log(i) // 0 1 2
}
for (const i of arr) {
console.log(i) // 3 5 7
}
// Object
const capitals = {
korea:'서울'
france:'파리'
japan:'도쿄'
}
for (const capital in capitals) {
console.log(capital) // korea france japan
}
for (const capital of capitals) {
console.log(capital) // TypeError: capitals is not iterable
}
- for ...in, for... of, const
- for(let i = 0; i < arr.length; i++)의 경우 최초 정의한 i를 재할당 하면서 사용하기에 const를 사용하면 에러
- for ...in, for ...of는 재할당이 아니라, 매 반복 시 해당 변수를 새로 정의하여 사용하므로 에러가 발생하지 않음
- Array.forEach()
- 배열의 메서드들 중 하나
const numbers = [1, 2, 3]
numbers.forEach(function (element) {
console.log(element)
})
// 1
// 2
// 3
정리
728x90
반응형
'Front-end > JavaScript' 카테고리의 다른 글
JavaScript[6] - this와 배열 메서드 기초 (0) | 2023.04.20 |
---|---|
JavaScript[5] - 함수와 Arrow Function (0) | 2023.04.20 |
JavaScript[3] - 데이터 타입과 연산자 (0) | 2023.04.20 |
JavaScript[2] - JavaScript 기본 문법과 호이스팅(hoisting) (0) | 2023.04.19 |
JavaScript[1] - JavaScript와 EMCAScript (0) | 2023.04.19 |