📌배열
- 여러 가지 데이터를 한 줄로 정리해 놓은 것 (여러 값을 하나의 변수에 저장하는 행위)
- 인덱스는 0부터 카운트 된다.
배열의 특징
순서: 배열 안의 물건들은 순서가 있다. (첫 번째, 두 번째, 세 번째 이런 식)
정리: 배열은 여러 가지 물건을 정리해서 쉽게 찾을 수 있게 해준다.
그래서 배열은 여러 가지 물건들을 깔끔하게 정리해서 한눈에 볼 수 있게 도와주는 역할을 한다.
숫자 배열
[1, 2, 3, 4, 5]색깔 배열
["빨강", "파랑", "초록"]대괄호 표기법 (brocket Notation)
배열의 특정 요소에 접근 또는 값을 설정할 때 사용하는 방법
대괄호 안에 인덱스를 넣어서 특정 위치의 값을 가져올 수 있다.
장난감 = ["자동차", "인형", "공"]
두번째_장난감 = 장난감[1] // 인덱스 1: "인형"
print(두번째_장난감) // 출력: 인형대괄호 표기법을 사용해서 값을 변경하는 방법
대괄호 표기법을 사용하면 배열의 특정 요소 값 을 변경 할 수 있다.
장난감 = ["자동차", "인형", "공"]
장난감[1] = "로봇" // 인덱스 1의 값을 "로봇"으로 변경
print(장난감) # 출력: ["자동차", "로봇", "공"]
📌반복문 (for statement)
반복문의 기본 구조
- 초기화: 반복문이 시작되기 전에 변수를 설정
- 조건: 반복문이 계속 실행될지 결정하는 조건
- 반복할 코드: 반복문이 실행될 때마다 실행되는 코드
- 반복식(또는 반복 실행): 각 반복이 끝날 때마다 변수를 업데이트
for
- 정해진 횟수동안 반복된다.
- (시작조건 / 종료조건 / 변화조건) {};
// let 변수 할당
for (let i = 0; i < 3; i += 1) {
console.log(i)
}🔥 예시
HTML
<body>
<h1>Hello world!</h1>
<ul></ul>
</body>JS
const ulEl = document.querySelector('ul') // ul tag 찾기
for (let i = 0; i < 10; i += 1) { // 반복문
const li = document.createElement('li') // 변수 생성 (li), 브라우저상에는 안보이지만 메모리상에 존재
li.textcontent = 'list-${i + 1}' // 문자 데이터 할당 후 보관처리 ${1부터 시작}, text로 list 번호 이렇게뜸
if ((i + 1) % 2 === 0) { // i 나누기 2 의 값이 0 (i가 짝수인 경우)이 나오면 이벤트 실행
li.addEventListener('click', function () { // 이벤트 생성
console.log(li.textContent)
})
}
ulEl.appendChild(li) // 메모리상의 li 태그를 ul 태그에 삽입
}while
어떠한 조건이 맞다면 계속 반복되고, 그렇지 않으면 반복되지 않음
count = 0 // 동그라미를 그린 횟수
피곤해 = False // 처음 그릴때는 피곤하지 않아서 false
while not 피곤해: // 안 피곤하면 계속 반복해
print("동그라미를 그려요!")
count += 1 // += : 처음에 0회로 시작했다가 반복될때마다 횟수 + 1 이 됨
if count == 5: // 5번 그리면 피곤해 (조건)
피곤해 = True // 피곤하면 true
🔥 for 와 while 의 차이점
for 는 5번 어떤 행동을 할거야 처럼 횟수가 정해져있고
while 은 최대 5번까지 어떤 행동을 반복할거야
같은 차이점이 존재한다.
do while
최소 1번 무조건 실행시키고, 그 이후에는 조건이 맞으면 반복적으로 실행된다.
import random
사탕이 나온다 = False
do {
print("자판기를 돌린다.")
사탕이 나온다 = random.choice([True, False]) // 사탕이 나올 확률 50%
if 사탕이나온다:
print("사탕이 나온다") // 사탕이 나온다면
else:
print("사탕이 안 나왔어, 다시 돌려") // 사탕이 나오지 않았다면
} while (!사탕이 나온다) // 사탕이 나올때까지 반복적으로 나온다.foreach
목록에 있는 모든 항목을 하나씩 꺼내서 작업을 한다.
목록의 크기와 상관없이 모든 항목을 꺼낼때까지 반복한다.
과일바구니 = ["사과", "바나나", "포도", "오렌지"]
for 과일 in 과일바구니:
print(f"{과일}을 꺼낸다.")반복의 핵심 요소
- 반드시 종료 조건이 있어야한다.
- 종료조건은 반복코드에서 상태 변경이 있어야 한다.
function main() {
const numbers = [1, 2, 3, 4, 5]; // 배열
}
function makeLI(list) {
const output = [];
let i = 0;
while(i <= list.length) {
list[i]
i = i + 1
}
return output;
}
makeLI(numvers);
console.log('ready!');
}loop === 무한루프
function makeLI(list) {
while(true) {
}debugger
- script 내 에러를 검출해서 제거하는 과정이다.
- 실행 단계마다 어떤 일이 일어나는지 코드 단위로 추적이 가능하다.
- 코드 작성 → 오류 발생 → 디버거 사용(코드가 어디서 잘못됐는지 확인 가능) → 오류 수정
⚡브라우저에서 디버거 사용하기
- 브라우저에서
f12→ sources → js file → 원하는 부분에 add breakpoint → 하단에서 변수 내용 확인
디버거를 사용하면 내가 지정한 지점에서 pause(중단) 된다. 이 중단된 시점에서
변수가 어떤 값을 담고 있는지 파악이 가능하다. 그리고 중단된 시점을 기준으로 명령어를 별도로 사용할 수도 있다.
⚡vscode 에서 디버거 사용하기
function hello(name) {
let phrase = 'Hello, ${name}!';
debugger; // 실행 중단
say(phrase);
}
function say(phrase) {
alert('** ${phrase} **');
}
나이들어서 공부함