forEach 메서드

forEach 메서드 1. forEach 메서드 forEach 메서드란? 배열의 각 요소에 대해 주어진 함수를 실행하는 메서드입니다. 반복문을 대신하여 코드를 간결하게 해주고, 배열의 각 요소에 대한 작업을 수행할 때, 편리하게 사용됩니다. 2. forEach 메서드 구조 array.forEach(function(currentValue, index, array) { // currentValue: 현재 반복 중인 요소의 값 // index: 현재 반복 중인 요소의 인덱스 // array: 원본 배열 // 수행 코드 }); 3. 예시 // 배열 생성 var numbers = [1, 2, 3, 4, 5]; // 배열의 각 요소와 인덱스를 출력 numbers.forEach(function (number, ind..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 1. 26.
• textsms

동기와 비동기

동기와 비동기 1. 동기와 비동기 - 동기와 비동기 실행 방식은 코드의 동작 및 효율성을 제어하는 데 중요한 역할을 합니다. 2. 동기 (Synchronous) - 동기 코드 실행은 순차적으로 진행되는 것을 의미합니다. 한 작업을 완료한 후, 다음 작업이 실행됩니다. - 동기 코드 실행 방식은 코드 블록이 위에서 아래로 순차적으로 실행되는 것이 특징입니다. - 동기 코드 실행은 주로 함수 호출, 루프, 파일 처리 등에서 사용됩니다. - 하나의 작업이 지연되면, 모든 작업이 지연되는 단점이 있습니다. console.log("첫 번째 실행"); console.log("두 번째 실행"); console.log("세 번째 실행"); 3. 비동기 (Asynchronous) - 비동기 코드 실행은 순차적으로 진행되..

• format_list_bulleted Front-End Study/JavaScript
• · 2023. 11. 10.
• textsms

fetch 함수

fetch 함수 1. fetch( ) 함수 - 네트워크 요청을 보내고, 응답을 처리하기 위한 기본적인 웹 API - 웹 페이지 or 웹 패을리케이션에서 서버로 HTTP 요청을 보내고, 서버로부터 데이터를 받아올 수 있음 - 비동기적으로 작동하며, Promise를 반환함 2. 구문 - 각 매개변수와 메소드는 다음과 같음 - url : 요청을 보낼 URL 주소 - options : 요청에 대한 추가 설정을 정의하는 객체. HTTP 메서드, 헤더, 요청 본문 등 다양한 옵션 지정 가능 (선택) - .then( ) : fecth( )가 성공적으로 요청을 보내고, 응답을 받으면 실행되는 Promise의 첫 번째 핸들러. 여기서 응답을 처리 - .catch( ) : 네트워크 오류 or 요청 처리 중 발생한 다른 오..

• format_list_bulleted Front-End Study/JavaScript
• · 2023. 10. 26.
• textsms

Callback 함수

Callback 함수 1. Callback 함수 - 다른 함수 내에서 실행되는 함수를 뜻함 - 주로 비동기 코드에서 사용되며, 비동기 작업이 완료되면 실행되어야 하는 작업을 정의함 2. Callback 함수의 특징 - 함수 내에서 다른 함수의 인자로 전달될 수 있음 - 함수 내에서 다른 함수의 결과로 반환될 수 있음 - 함수를 비동기 작업의 완료 후, 실행되도록 스케줄링할 수 있음 3. 예시 - a 함수는 3초 후, 비동기 작업이 완료되고 그 작업이 완료된 후, b 콜백 함수가 실행됨 console.clear(); function a(callback) { setTimeout(function () { console.log("비동기 작업 완료"); callback(10); // callback 함수를 호출 ..

• format_list_bulleted Front-End Study/JavaScript
• · 2023. 10. 24.
• textsms

localStorage

localStorage 1. localStorage - JavaScript에서 localStorage는 웹 브라우저에서 데이터를 로컬로 저장하고, 유지할 수 있는 웹 스토리지 메커니즘 - 클라이언트 측에서 데이터를 영구적으로 저장하기 위한 간단하고 편리한 방법을 제공 - 사용자의 브라우저 세션 간에 데이터를 유지하며, 브라우저를 닫았다 열어도 데이터가 유지됨 2. 사용방법 - 데이터 저장 // localStorage.setItem('키', '값'); // 예시 localStorage.setItem('a', 10); localStorage.setItem('b', 20); console.log(localStorage); - 브라우저 안에 키와 값이 저장됨 - 데이터 가져오기 // const a = local..

• format_list_bulleted Front-End Study/JavaScript
• · 2023. 9. 4.
• textsms

findIndex 함수

findIndex 함수 1. findIndex( ) 함수 - 배열 내에서 주어진 조건을 만족하는 첫 번째 요소의 인덱스를 찾는 데 사용되는 배열 메서드 - 콜백 함수를 이용하여 요소를 검색하며, 조건을 만족하는 요소를 찾으면, 해당 요소의 인덱스를 반환 ※ 조건을 만족하는 요소가 없을 시, -1을 반환 2. 예시 const todos = [ { id:10, content:"운동", }, { id:5, content:"목욕", }, { id:2, content:"공부", }, ]; function removeTodo(deleteIndex) { // index가 deleteIndex와 다른 것 들만 반환 return todos.filter((_, index) => index != deleteIndex); }..

• format_list_bulleted Front-End Study/JavaScript
• · 2023. 8. 25.
• textsms