반복문 특정 명령을 반복해서 수행할 수 있도록 도와주는 문법
반복문은 왜!? 필요할까
-> 반복문은 지정한 횟수만큼 또는 무한으로 코드를 반복하게 만들어준다.
반복문을 사용하면 사람이 계산하기에는 많은 시간이 소요되는 일도 빠르게 처리가 가능하기때문!
하지만... 미친듯이 반복만하는게 아니고 특정한 조건을 만족할 때까지만 반복해서 수행한다.
for (시작조건; 종료조건; (counter)변화조건) {
수행할 동작
}
그럼 '나는 커피를 좋아해' 라는 문장을 100번 출력해보자.
단순하게.....콘솔로그로 작성 할 수 있다.
벌써부터 귀찮고 손이 아프다.
console.log('나는 커피를 좋아해')
console.log('나는 커피를 좋아해')
console.log('나는 커피를 좋아해')
console.log('나는 커피를 좋아해')
console.log('나는 커피를 좋아해')
........
for (시작조건(초기식에는 반복에 주최); 종료조건(반복이 조건에 만족할때만 돌아가라); 변화조건(반복이 한번 실행할때마다 수행될 연산) { //반복 수행할 명령
}
식을 가져와서 작성해보자.
여기서 너무나 당연하게 변수를 선언할때 let을 사용해야한다. => 반복이 한번 실행할때마다 재할당을 해야하기때문에!
for (let i = 0; i < 100; i ++) {
console.log(i + 1)
console.log('나는 커피를 좋아해')
}
//위 아래는 같은거
for (let i = 1; i < 101; i ++) {
console.log(i)
console.log('나는 커피를 좋아해')
}
객체를 순회하는 방법
Object.keys 함수에 객체 자체를 넣어주게 되면
객체의 키들을 배열로 반환해서 돌려준다.
let person = {
name : "coco",
age: 25,
tall: 180
};
const personKeys = Object.keys(person);
for(let i=0; i < personKeys.length; i++) {
const curKey = personKeys[i] //객체의 key값
const curValue = person[curKey]; //괄호 표기법으로 객체의 value값에 접근함. 변수이기때문에 따옴표x
console.log(`${curKey} : ${curValue}`);
};value만 단순히 순회하고 싶을때는
Object.values 함수를 넣어주면된다.
조금 심화과정으로 html를 제어하는 예제를 만들어보자.
<body>
<h1>hello world!!!</h1>
<ul></ul>
</body>
</html>const ulEl = document.querySelector('ul')
for (let i = 0; i < 3; i += 1) {
const li = document.createElement('li')
li.textContent = `list-${i + 1}`
ulEl.appendChild(li)
}개발자도구를 통해서 확인하면
list-1
list-2
list-3
파일이 들어가있는것을 볼 수 있다.
const ulEl = document.querySelector('ul')
for (let i = 0; i < 3; i += 1) {
const li = document.createElement('li')
li.textContent = `list-${i + 1}`
if ((i + 1) % 2) { //(i % 2) 이렇게 작성하면 제로베이스에 따라서 홀수번호가 선택됨!
li.addEventListener('click', function () {
console.log(li.textContent)
})
}
ulEl.appendChild(li)
}조건문을 추가해서 이벤트리스너를 추가하여 짝수번호를 클릭했을때 콘솔에 출력이됨.
'개발이야기 > JS' 카테고리의 다른 글
| [JS] 함수 (간략하게 정리) (0) | 2022.02.15 |
|---|---|
| [JS] Truthy & Falsy 형 변환 (Type conversion) (0) | 2022.02.11 |
| [JS] 조건문(2) switch (0) | 2022.02.11 |
| [JS] 연산자 (0) | 2022.02.11 |
| [JS] DOM API (0) | 2022.01.31 |