39+DAY_멋사 프론트엔드 부트캠프 14기_TIL

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() 메서드보다 성능상 다소 빠르지만 크게 체감되지는 않는다.
  • 라이브 콜렉션을 반환한다.
    • 라이브 콜렉션 : 새로운 요소가 추가되거나 제거될 때마다 자동으로 업데이트 된다.
    • 사례가 매우 제한적이다.
    • 이벤트 리스너는 자동 연결이 되지 않아 유용하지 않다.

 

AI 요약

The Problem I Faced

 

What I Tried to Do

 

How I Solved It

 

So

 

Aha Moments

배열 또한 for ... in 문을 사용할 수 있지만 for 문에 비해 성능이 느리고 인덱스 순서가 중요한 배열에서는 사용하지 않는다.

내가 알던 반복문은 while, do while, for 밖에 없었는데 훨씬 많은 사용법이 있고 훨씬 쉬운 방법이라서 놀라웠다