[코캠]베이스캠프 13일차 | 반복문, setInterval, localStorage

오늘은 어제보다 머리가 더 터질 것 같지만,, ㅎㅎ
TIL은 꼭 써야해,,!

Today I learned!
반복문, for-of문, for-in문, setInterval, localStorage

또 오늘 D-Day Counter를 짜면서 Object.keys메서드도 배웠는데 복잡한 로직에 적용하려다 보니 머리가 너무 아팠다.

그럼 차근차근 다시 되짚어보자!

1. 반복문

반복문에는 for문과 while문이 있다.

for문

for(let i = 0; i < 10; i++){
	// 반복을 수행할 코드
}

let i = 0은 최초식, i < 10은 조건식, i++는 증감문이다.

while문

let i = 0;
while( i < 10 ){
	// 반복을 수행할 코드
	i++;
}

마찬가지로 let i = 0은 최초식, i < 10은 조건식, i++는 증감문이다.
❗️while문에서는 종료조건을 제대로 설정하지 않으면 무한반복되니 주의해야한다!

1-1. for-of

---

for-of문은 배열에 주로 사용을 하게 된다.

const arr = [1, 2, 3]

for(let el of arr) {
    console.log(el)
}
// 1
// 2
// 3

1-2. for-in

---

for-in문은 객체에서 사용하게 된다.

const obj = {
    name : "otter",
    gender : "male"
}

for(let key in obj) {
    console.log(key)
}
// name
// gender

2. 호출 스케줄링

함수를 명시적으로 호출하면 함수가 즉시 실행된다. 만약 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링이라 한다.

자바스크립트는 타이머를 생성할 수 있는 타이머 함수 setTimeout과 setInteval, 타이머를 제거할 수 있는 타이머 함수 clearTimeout과 clearInterval을 제공한다.

setTimeout / clearTimeout

// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다.
// setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다.
const timerId = setTimeout(() => console.log('Hi'), 1000);

// setTimeout 함수가 반환한 타이머 id를 clearTimeout 함수의 인수로 전달하여 타이머를 취소한다.
// 타이머가 취소되면 setTimeout 함수의 콜백 함수가 실행되지 않는다.
clearTimeout(timerId);

setInterval / clearInterval

let count = 1;

// 1초(1000ms) 후 타이머가 만료될 떄마다 콜백 함수가 호출된다.
// setInterval 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다.
const timeoutId = setInterval(() => {
  console.log(count);  // 1 2 3 4 5
  // count가 5이면 setInterval 함수가 반환한 타이머 id를 clearInterval 함수의 인수로 전달하여
  // 타이머를 취소한다. 타이머가 취소되면 setInterval 함수의 콜백 함수가 실행되지 않는다.
  if (count++ ===5) clearInterval(timeoutId);
}, 1000);

3. local storage

웹 브라우저는 sessionStorage와 localStorage를 가진다.
Web Storage는 데이터를 저장하는 공간이다.

localStorage.setItem()

localStorage는 window.localStorage로 접근할 수 있다. 그리고 localStorage의 앞의 window는 생략이 가능하다.
localStorage에 데이터를 저장할 때는 localStorage에 내장되어 있는 setItem이라는 메서드를 사용하면 된다.

Web Storage의 데이터는 key-value 형태로 저장이 된다.

localStorage.setItem('data-key', 'data-value')

localStorage.getItem()

localStorage에 저장된 데이터를 JavaScript에서 활용하기 위해서는 getItem()을 이용한다.
소괄호 안에는 꺼내오고자 하는 데이터의 key를 적어주면 된다.

localStorage.getItem(’data-key’)

4. Object.keys()

Object.keys()메서드는 객체의 key값만 가져올 수 있는 메서드이다.
객체(typeof 연산자로 확인했을 때 object가 반환되는)의 프로퍼티들 중에서 key값, 다른 말로 프로퍼티 네임들만 묶어서 배열로 반환하는 메서드이다.

const myObject = {
    name: '김코딩',
    age: 22,
    gender: 'Female',
}

const myKeys = Object.keys(myObject);

console.log(myKeys);
// (6) ["name", "age", "gender"]