JavaScript에서 많이 사용하는 함수들

 

 

1. setTimeout
setTimeout 함수는 일정 시간이 지난 후에 한 번만 특정 함수를 실행하는 데 사용하고 함수 실행 이후에는 타이머가 해제된다.

setTimeout(() => {
  console.log('After 1 second');
}, 1000);

 

- 비동기 작업 후 일정 시간 동안 대기할 때.
- 애니메이션 제어 및 타이밍 조절에 활용.

 

 

2. setInterval
setInterval 함수는 일정한 간격으로 특정 함수를 반복해서 실행하는 데 사용되고 타이머를 해제하려면 clearInterval 함수를 사용한다.

// 1초 간격으로 실행되는 함수
const intervalId = setInterval(function() {
  console.log('Function executed every second!');
}, 1000);

// 5초 후에 interval 해제
setTimeout(function() {
  clearInterval(intervalId);
  console.log('Interval cleared after 5 seconds.');
}, 5000);

 

- 주기적으로 데이터를 업데이트할 때.
- 실시간 업데이트가 필요한 화면 또는 애플리케이션에서 사용.

 

 

3. fetch
네트워크를 통해 리소스를 가져오기 위한 비동기적인 함수로, 주로 웹 API에 HTTP 요청을 보낸다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

 

- 외부 데이터 또는 API에서 데이터를 가져올 때.
- JSON 형식의 데이터를 서버와 주고받을 때.

 

 

4. addEventListener 

DOM 요소에 이벤트 리스너를 등록하는 함수로, 특정 이벤트가 발생할 때 실행할 코드를 설정할 수 있다.

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  console.log('Button clicked!');
});

 

- 버튼 클릭, 마우스 이동 등의 사용자 액션에 대한 응답 처리.
- 웹 페이지의 상호작용을 담당하는데 사용.

 

 

 

이 함수들은 JavaScript에서 비동기적인 작업, 네트워크 통신, 이벤트 처리 등 다양한 상황에서 사용되어 프로그램의 동작을 제어하고 조절하는데 중요한 역할을 한다.