[2024 JS 심화 백엔드 스터디] 이지원 #2주차

반복문

 

{} 중괄호 내부의 코드를 조건적으로 반복하는 구문

 

for문

- 반복문의 일종

- 괄호 내부에는 (초기값; 조건식; 증감식) 형태로 ㅈ

for (let i = 0; i < 10; i++) {
	console.log("Hello World!");
}

 

continue

- 수행 도중 나머지 코드를 완료하지 않고 바로 반복문의 조건 비교 단계로 다시 이동한다.

 

break

- 수행 도중 나머지 코드를 완료하지 않고 바로 반복문을 종료한다.

 

 

for-of

- Python의 for-in 구문과 동일

- JS의 배열형 객체에 사용 가능

const data = [1, 2, 3, 4, 5];
for (const item of data) {
	console.log(item);
}

 

 

for-in

- Python의 for-in 구문과 동일

- JS의 object형 객체에 사용 가능

const account = {
	id: "123",
    displayName: "user",
    email: "email@email.com"
};
for (const key in account) {
	console.log(account[key]);
}

 

 

 

 

while문

- 반복문의 일종

- 괄호 내부에는 조건식만 들어간다.

- 초기화 구문과 증감 구문은 별도로 존재한다.

let x = 0;
while (x < 10) {
	console.log("Hello World!");
	x++;
}

 

 

 

함수

 

기본 형태

function test(a, b) {
	return a + b;
}

 

화살표 함수

const test = (a, b) => {
	return a + b;
};

 

 

 

 

HTML Element 선택

getElementsByTagName
getElementsByClassName
getElementById
querySelector
querySelectorAll

 

HTML Element 자식 요소 선택
children
firstElementChild
lastElementChild

 

 

 

 

 

 

이벤트 수신

 

addEventListener를 통해 특정 element의 이벤트를 감지하고 그에 맞는 코드를 실행할 수 있다.

const button = document.createElement("button");
button.addEventListener("click", () => {
	console.log("버튼 클릭");
});