본문 바로가기

JavaScript

(7)

콜백 함수 콜백 함수란?콜백 함수는 다른 함수에 인수로 전달되어 실행되는 함수를 말합니다.즉, 특정 작업이 완료된 후 실행되거나 이벤트가 발생했을 때 호출되는 함수입니다.function greet(callback) { callback();}function sayHello() { console.log("안녕하세요!");}greet(sayHello); 위의 코드에서 sayHello가 바로 greet 함수에 전달된 콜백 함수입니다.greet 함수 내부에서 callback()이 호출되면서 전달된 콜백 함수가 실행됩니다. 콜백 함수 내부에서의 this콜백 함수 내에서 this 키워드를 사용할 때 기대한대로 작동하지 않을 수 있습니다. const user = { name: 'y9s2n6', greet: fu..

Promise 비동기 코드에서는 실행 순서를 예측하기 어렵기 때문에 비동기 작업이 끝난 후 실행할 코드를 명확하게 제어하기 위해서 Promise가 필요합니다.Promise 란?비동기 작업을 효율적으로 처리할 수 있도록 도와주는 자바스크립트의 내장 객체Promise의 3가지 상태- Pending(대기) : 아직 작업이 완료되지 않은 상태- Fulfilled(성공) : 비동기 작업이 성공적으로 마무리된 상태- Rejected(실패) : 비동기 작업이 실패한 상태 대기 -> 성공 : 해결(resolve) - 원하는 작업이 완료되었을 때 실행대기 -> 실패 : 거부(reject) - 작업 중 오류가 발생했을 때 실행 const promise = new Promise(() => { setTimeout(() => { co..

화살표 함수 문제 상황 : React 프로젝트에서 아래의 코드와 같이 검색어 필터 기능을 구현하는데 filteredTodos가 원하는 값이 나오지 않았습니다.import { useState } from "react";import "./List.css";import TodoItem from "./TodoItem";const List = ({ todos }) => { const [search, setSearch] = useState(""); const onChangeSearch = (e) => { setSearch(e.target.value); }; const getFilteredData = () => { if (search === "") { return todos; } return..

스코프 (전역 스코프, 지역 스코프, 블록 스코프, 함수 스코프) 스코프 : 변수나 함수의 제약 범위전역, 지역 스코프 - 전역 스코프 변수가 전역 스코프를 갖는다는 것은 해당 변수를 코드 어디에서나 접근할 수 있다는 의미입니다.let a = 1; // ①function foo() { console.log(a);}function bar() { console.log(a);}foo(); // ②bar(); // ③console.log(a); // ④ 먼저, 함수 외부에 변수 a를 선언하고 1로 초기화 했습니다. 함수 foo를 호출하면 함수 foo가 실행되어 변수 a인 1을 콘솔에 출력합니다. 함수 bar를 호출하면 함수 bar가 실행되어 변수 a인 1을 콘솔에 출력합니다. 마지막으로 변수 a인 1을 콘솔에 출력합니다. 위의 코드에서 변수 a는 조건문이나 반복문 ..

나머지 매개변수(REST Parameters) 우선 인수 객체에 대해서 알아봅시다.인수 객체(Arguments Object) : 함수에 전달된 인수에 해당하는 유사 배열 객체인수 객체는 JavaScript의 오래된 기능입니다. 유사 배열 객체란 length 속성과 0부터 인덱스된 다른 속성을 가지고 있지만, 배열의 forEach, map 등과 같은 내장 메서드를 가지고 있지 않다는 뜻입니다. 인수 객체는 실제 배열이 아닙니다. function sum() { console.log(arguments); console.log(arguments.length); console.log(arguments[0]);}sum(); // [Arguments] {}// 0// undefinedsum(1, 2, 3); // [Arguments] { '0'..

매개변수(Parameter)와 인수(Argument) 매개변수와 인수의 명확한 차이를 알지 못해서 확실히 정리해보고자 합니다. 매개변수(Parameter)매개변수는 함수 정의 시, 함수에 전달될 수 있는 값을 가리키는 변수입니다. function add(a, b) { return a + b;} 위의 코드에서 a와 b는 매개변수입니다. add 함수는 2개의 매개변수를 받아서 그 값을 더합니다.인수(Argument)인수는 함수를 호출할 때 실제로 함수에 전달되는 값입니다. const result = add(2, 3); 위의 코드에서 2와 3은 인수입니다. add 함수가 호출될 때, 2와 3이라는 값이 각각 매개변수 a와 b에 대입됩니다.

기본 매개변수(default parameters) 예시로 greet함수는 name이라는 매개변수를 받습니다. function greet(name) { console.log(`Hello, ${name}!`);} 함수를 호출할 때 name에 대한 값을 전달하지 않으면 name 매개변수는 자동으로 undefined 가 됩니다. greet();//Hello, undefined 과거에 기본값을 설정하는 일반적인 방법 function greet(name) { if (name === undefined){ name = 'Anonymous'; } console.log(`Hello, ${name}`);}greet(); // Hello, Anonymousgreet('Tom'); // Hello, Tom 함수 내부에서 매개변수 값을 테스트하여..

이전 1 다음

티스토리툴바