What I Learned Today
JS에서 루프문을 알지 못한다면 손과 눈은 매우 바쁠것이다.
// 루프를 사용하지 않을 때 100번 움직이기
function move() {
...
}
move()
move()
...
move()하지만 루프문을 사용한다면 매우 간단하게 사용할 수 있다.
- 루프란?
- 명령어를 프로그램 내에서 일정하게 반복해서 실행하는 것을 말한다.
- 루프는 조건이 충족될 때까지 반복하므로 프로그래밍 작업의 효율성을 높인다.
- while, do while, for 과 같은 다양한 유형의 루프가 있고 각자 고유한 용도가 있다.
while 문
// 조건이 참일 동안 반복적으로 블록 내부의 코드가 실행된다.
// 하지만 조건이 계속 참이면 무한 루프가 되어버린다.
while (조건) {
...
}
// 특정 상황에서 코드를 건너띄어 이어가거나 중단할 수도 있다.
// continue
function move(n) {
console.log(n + '번 움직이기')
}
let i = 0
while (i < 20) {
i = i + 1
// [특정 상황] 흐름 제어
// i 값이 6 ~ 14인 동안, move(i) 건너띄어 이어가기
if (i > 5 && i < 15) {
continue
}
move(i)
}
// break
function move(n) {
console.log(n + '번 움직이기')
}
let i = 0
while (i < 20) {
i = i + 1
// [특정 상황] 흐름 제어
// i 값이 15일 때 반복문 종료하기
if (i === 15) {
break
}
move(i)
}
do ... while 문
// do ... while 문은 구문 실행을 먼저하고 조건 평가를 나중에 한다.
// 그 외에는 while 문과 동일하다.
do {
... // 최소 1회 실행
} while (조건)
for 문
// for 문 또한 코드를 반복 처리한다.
// 다만 for 문은 조건 식과 조건 변경 구문이 모두 괄호( () ) 안에 사용된다.
for(변수선언값할당; 변수가유효한지비교; 변수변경) {
...
}
// for문 또한 흐름 제어문을 사용할 수 있다.
// 배열을 반복할 때 for ... of 문을 사용하면 훨씬 편하다.
const numArray = ['하나', '둘', '셋']
const num = numArray[i]
for (const num of numArray) {
console.log('배열 안에는 "' + num + '" 이(가) 있습니다.')
}
// 배열 안에는 "하나" 이(가) 있습니다.
// 배열 안에는 "둘" 이(가) 있습니다.
// 배열 안에는 "셋" 이(가) 있습니다.
// 객체를 반복할 때 for ... in 문을 사용한다.
const me = {
name: '도현',
age: 26,
}
for (let key in me) {
const value = me[key]
console.log(key + ': ' + value)
}
// name: 도현
// age: 26
- forEach 루프 : 모든 배열 객체에서 사용할 수 있는 메서드
- 배열의 모든 항목을 읽기 쉬운 방식으로 반복할 수 있다.
const fruitBasket = ['체리망고', '토마토', '스트로베리']
const fruit = fruitBasket[i]
fruitBasket.forEach((fruit) => {
console.log('과일 바구니 안의 과일에는 "' + fruit + '"이 포함되어 있습니다.')
})
때로는 문서에서 여러 요소를 한 번에 선택해야 할 때도 있다.
이런 경우 querySelectorAll() 메서드를 사용한다.
이 메서드는 CSS 선택자를 문자열로 전달받는데 문서가 이렇게 작성되어 있다고 가정해보자.
<section class="life-tips">
<h2>생활 상식</h2>
<p>배터리를 오래 쓰고 싶다면 100% 충전보다는 80~90%에서 사용을 멈추는 것이 좋습니다.</p>
<p>전자레인지에 금속 용기를 넣으면 화재 위험이 있으니 절대 사용하지 마세요.<p>
<p>흰 셔츠의 얼룩은 세탁 전에 식초나 베이킹소다로 미리 처리하면 잘 지워집니다.</p>
</section>문서에서 해당 단락을 선택하려면 이런 코드를 작성해야 한다.
const paragraphs = document.querySelectorAll('.life-tips p')
// NodeList는 배열과 유사한 객체이다.
// length 속성을 사용할 수도 있고 숫자 타입의 키를 가진다.
console.log(paragraphs.length) // 3
// 각 요소에 color--primary 쿨래스 이름을 추가한다.
for (paragraph of paragraphs) {
paragraph.classList.add('color--primary')
}
// 또는
paragraphs.forEach((paragraph) => {
paragraph.classList.add('color-primary')
})
// NodeList를 배열로 변환해 배열 메서드를 사용해도 된다.
const paragraphArray = Array.from(paragraphs)
// ------------------------------------------
// 배열에서 각 항목을 가져올 수도 있다.
const firstParagraph = paragraphs[0]
console.log(firstParagraph) // <p>배터리를 오래 쓰고....</p>
const secondParagraph = paragraphs[1]
console.log(secondParagraph) // <p>전자레인지에 금속 용기를 넣으면...<p>
- getElementsByTagName(), getElementsByClassName() 과 같은 메서드 또한 사용할 수 있다.
- 대부분의 경우 필요하지 않다.
- querySelectorAll() 메서드보다 성능상 다소 빠르지만 크게 체감되지는 않는다.
- 라이브 콜렉션을 반환한다.
- 라이브 콜렉션 : 새로운 요소가 추가되거나 제거될 때마다 자동으로 업데이트 된다.
- 사례가 매우 제한적이다.
- 이벤트 리스너는 자동 연결이 되지 않아 유용하지 않다.
The Problem I Faced
What I Tried to Do
How I Solved It
So
Aha Moments
배열 또한 for ... in 문을 사용할 수 있지만 for 문에 비해 성능이 느리고 인덱스 순서가 중요한 배열에서는 사용하지 않는다.
내가 알던 반복문은 while, do while, for 밖에 없었는데 훨씬 많은 사용법이 있고 훨씬 쉬운 방법이라서 놀라웠다
반응형
