태현 블로그

[JavaScript] 굉장히 편한 reduce() 알아보기

xogus-blog — Tue, 22 Apr 2025 20:01:28 +0900

자바스크립트에서 .reduce()함수는 배열에서 하나의 결과값을 만들어내는 강력한 함수이다.
조금 어렵게 느껴질 수도 있지만, 핵심 개념이 딱 이해되면 정말 잘 써먹을 수 있다.

앞서 말했지만 reduce는 여러 개의 배열 값에 간단한 조작을 통해 하나의 결과 값을 만들어 낼 수 있도록 해준다.

먼저 배열을 하나 생성해보자.

let value = [1, 2, 3, 4, 5];

이 배열의 모든 값을 더한 하나의 결괏값을 출력하기 위해서는 for, forEach 등 다양한 함수를 사용할 수 있다.

하지만, reduce를 사용하면 훨씬 간편하게 결과값을 도출해 낼 수 있다.

코드로 예시를 살펴보면,

let value = [1, 2, 3, 4, 5];

const result = value.reduce((acc, cur) => {
  return acc + cur;
}, 0);

console.log(result);

이렇게 작성할 수 있다.

acc는 지금까지의 누적값을 나타낸다.

누적값 즉, acc의 초기 값은 함수의 괄호 전 '0' 작성해 지정해 준다.

cur은 배열을 순차적으로 도는 현재 값을 나타낸다.

for 문에서 i가 증가하며 배열의 값을 순차적으로 도는 것과 같다.

따라서, cur의 값은 처음엔 1, 2, 3 이렇게 증가하게 된다.

return 값으로 acc와 cur값을 더해주게 되면 결과로는 value라는 배열의 최종 합이 된다.

[출력 결과]

또, reduce를 사용하면 배열의 가장 작은 값을 편하게 찾아낼 수 있다.

먼저 다양한 수가 들어있는 배열을 하나 생성해 보자.

let small = [10, 2, 3, 5, 6, 7, 8];

이 배열에서 가장 작은 수를 찾아내는 것도 마찬가지로 반복문을 사용해 찾을 수 있다.

하지만 reduce를 사용하면 훨씬 간편하게 찾을 수 있다.

const smallest = small.reduce((acc, cur) => {
  if (acc > cur) {
    return cur;
  } else {
    return acc;
  }
});

console.log(smallest);

위쪽 코드에서는 total값을 구하기 위해 acc를 0으로 초기화했었다.

하지만 이번 코드에서는 아무것도 작성하지 않았는데, 그 이유는 reduce의 사용 목적에 있다.

reduce함수에서 마지막에 acc값을 지정하지 않으면

acc는 0번째 배열의 인수를 값으로 가지게 되며,

cur의 값은 1번째 배열의 인수를 값으로 가지게 된다.

이렇게 하면 두 값을 비교하여 더 작은 값을 반환할 수 있다.

[결과]

마지막으로, 배열에 객체가 할당되어 있어도 reduce를 통해 간단하게 합을 구할 수 있다.

예를 들어 배열에는 과일의 이름과 가격이 저장되어 있고,

과일 가격의 총합을 구하는 코드가 필요하다고 가정해 보자.

let object = [
  {
    name: "사과",
    price: 5000,
  },
  {
    name: "망고",
    price: 4000,
  },
  {
    name: "수박",
    price: 9000,
  },
];

이러한 경우에도 reduce를 통해 간편하게 과일 가격의 총합을 구할 수 있다.

const totalPrice = object.reduce((acc, cur) => {
  return acc + cur.price;
}, 0);

console.log(totalPrice);

[결과]

이렇게 reduce를 사용하면 코드를 훨씬 간단하게 적으며 원하는 기능을 수행할 수 있다

[JavaScript] async/await 알아보기

xogus-blog — Tue, 15 Apr 2025 20:54:59 +0900

앞선 글에서 Promise의 개념과 사용법에 대해 알아보았다.

하지만 실제로 코드를 작성하다 보면 Promise에는 단점이 존재한다.

바로 .then() 혹은 .catch()를 계속 사용해줘야 한다는 점이다.

이 방식은 비동기 작업이 많아질수록 코드가 길어지고, 가독성도 떨어지는 문제를 야기한다.

예를 들어 다음과 같은 코드가 있다고 생각해보자.

// Promise 사용
const fetchData2 = () => {
  return new Promise((resolve) => {
    resolve("  성공!");
  });
};

fetchData2().then((result) => {
  console.log(result); //   성공!
});

코드가 짧아보일 수도 있지만, 실제 프로젝트에서 에러 처리를 포함한 여러 작업을 처리하려면
.then().then().catch()처럼 체이닝이 반복되며 복잡도가 높아진다.

이러한 불편함을 해결하기 위해 등장한 것이 바로 async/await이다.

사실 async는 내부적으로 Promise를 반환한다.
즉, async는 Promise를 감싸고 있는 선물상자와도 같다.

아래는 같은 기능을 async/await으로 작성한 코드이다.

// async 사용
const fetchData = async () => {
  return "  성공!";
};

const result = async () => {
  const final = await fetchData();
  console.log(final); //   성공!
};

result();

이렇게 await을 통해 비동기 작업의 결과를 마치 동기식 코드처럼 작성할 수 있다.
또한 try/catch와 함께 쓰면 에러 처리도 훨씬 간결하게 할 수 있어 가독성과 유지보수 면에서 큰 장점이 된다.

연속된 비동기 작업도 async/await으로 깔끔하게 가능!

예를 들어, 사용자의 요청 상태를 단계별로 출력해야 한다고 가정해보자.

Promise만 사용할 경우 .then() 체이닝이 계속 이어져서 코드가 지저분해질 수 있지만,
async/await을 사용하면 순차적인 흐름처럼 코드를 짤 수 있어 훨씬 읽기 쉽고 관리하기 편해진다.

아래 코드처럼 async와 await을 사용하면

const sendDelayedMessage = (ms, message) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(message);
    }, ms);
  });
};

const userReq = async () => {
  const res = await sendDelayedMessage(1000, "고객님의 요청 완료 되었습니다.\n");
  const res1 = await sendDelayedMessage(2000, "요청을 처리 중입니다.\n잠시만 기다려주세요.\n");
  const res2 = await sendDelayedMessage(3000, "고객님의 요청이 정상적으로 완료되었습니다.");

  console.log(res);
  console.log(res1);
  console.log(res2);
};

userReq();

1. 작업의 순서가 자연스럽고
2. 에러 처리도 try/catch로 직관적이며
3. 가독성도 매우 뛰어나다

❗️await의 진짜 역할은?

많은 사람들이 await을 단순히 "기다린다"라고만 생각하곤 한다.
하지만 await은 그 이상으로 Promise에 감싸진 값을 꺼내서 사용할 수 있게 해주는 언랩(unwrapping) 역할도 한다.

예를 들면,

const getMessage = () => {
  return new Promise((resolve) => {
    resolve("감싸진 메시지");
  });
};

const show = async () => {
  const result = getMessage(); // await을 사용하지 않음
  const result_use_await = await getMessage(); // 여기서 await이 Promise의 값을 '꺼내줌'
  
  console.log(result); // 감싸진 메시지
  console.log(result_use_await); // 꺼내진 메시지
};

show();

[실행 결과]

이렇게 await은 Promise에 감싸진 메시지를 꺼내주는 역할도 한다.

[JavaScript] Promise란 무엇인가?

xogus-blog — Tue, 15 Apr 2025 17:20:48 +0900

자바스크립트의 꽃은 비동기 처리이다.

여기서 비동기 처리가 무엇일까?

먼저, 동기처리란 무엇인지 살펴보자.
--

우리가 커피숍에 갔다고 가정하고, 내 앞에 2명의 사람이 주문하고 있다고 생각해 보자.

나의 주문은 단순히 쿠키 하나를 포장하는 주문이고.
내 앞사람들의 주문은 빵과 커피 2잔을 포장하는 주문이라고 생각해 보자.

여기서 동기처리는 내 앞사람들 주문이 모두 처리될 때까지 나는 무한정 대기해야 한다.

그렇다면 나는 생각할 것이다.
"아니 쿠키 하나만 주면 되는걸 내가 앞사람들 주문까지 다 기다려야 되나?"
-> 이것이 동기 처리의 단점이다. 사실 이론상으로는 앞 주문을 먼저 처리하는 것이 맞지만, 굉장히 비효율 적이다.

그럼 비동기 처리란 무엇인가?
앞 상황에서 굉장히 센스 있는 직원이 나는 쿠키만 빨리 주면 되기 때문에 앞사람 주문이 완료되기 전 나에게 쿠키를 먼저 하나 준 것이다.

이렇게 되면 직원 입장에서는 빨리 끝낼 수 있는 일은 빨리 쳐냈기 때문에 편하고, 나도 빨리 다른 업무를 보러 갈 수 있어 좋다.

이것이 비동기 처리이다.

그렇다면 왜 자바스크립트의 꽃이 비동기 처리일까?

자바스크립트는 싱글스레드 언어로, 하나의 스레드에서 하나의 작업만 수행할 수 있다.

아무래도 웹 서비스의 경우 이벤트도 많고, 사용자 인터렉션, 서버 요청 또한 많다.

때문에 비동기 처리가 없으면, 사이트가 멈춰버리는 현상까지도 발생할 것이다.

그렇기 때문에 callback, promise, async/await 등 비동기 기술이 엄청 중요해졌고 발전했으면

JS가 인기를 끌게 된 이유이다.

자 그럼 Promise가 무엇인지 살펴보자.

Promise

Promise는 자바스크립트의 내장 객체로서, 비동기 처리의 완료 & 실패를 나타낸다.

Promise를 생성하는 코드를 먼저 살펴보자.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (성공) {
    resolve(결과값);
  } else {
    reject(에러메시지);
  }
});

여기서 new Promise는 새로운 Promise를 생성하는 함수 호출 코드이다.

Promise는 resolve, reject 이렇게 두 개의 매개변수를 가지며 말 그대로
reslove = 결과(성공)
reject = 거부(실패)
를 의미한다.

이렇게 resolve와 reject에 담긴 값은, Promise 생성자 함수로 만든 객체의 내장 메서드(.then & .catch)를 이용하여 더 편하게 나타낼 수 있다.

코드로 살펴보면

promise
  //resolve(성공)
  .then((result) => {
    console.log("result:", result);
  })
  
  //reject(실패)
  .catch((error) => {
    console.log("error: ", error);
  })

이렇게 작성 가능하며 위 코드를 합치고

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (성공) {
    resolve("성공");
  } else {
    reject("서버 오류");
  }
});

promise
  .then((result) => {
    console.log("result:", result);
  })
  .catch((error) => {
    console.log("error: ", error);
  })

실행할 경우

result: 성공 //성공 시

or

error: 서버오류  //실패 시

이렇게 출력될 것이다.

번외로, 성공 및 실패 여부와 상관없이 Promise결과 값에 출력을 추가할 수 있는 메서드가 있다.

바로 .then / .catch와 같은 구조인 .finally이다.

코드로 살펴보면

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (성공) {
    resolve("성공");
  } else {
    reject("서버 오류");
  }
});

promise
  .then((result) => {
    console.log("result:", result);
  })
  .catch((error) => {
    console.log("error: ", error);
  })
  .finally(() => {
    console.log("promise 종료");
  });

이렇게 추가가 가능하며 위 결과 값과 비교해 보면

result: 성공 //성공 시
promise 과정 종료  //fianlly로 인해 생성된 출력

or

error: 서버오류  //실패 시
promise 과정 종료  //fianlly로 인해 생성된 출력

이렇게 출력된다.

[JavaScript] 헷갈리는 callback함수 정리

xogus-blog — Mon, 14 Apr 2025 21:44:01 +0900

C나 Java처럼 함수 이름을 명확히 정의하는 언어들과 달리, JavaScript에서는 화살표 함수와 익명 함수를 사용해 callback 함수를자주 작성한다.

초반에 공부할 때 굉장히 혼동이 오기도 해서 정리를 해본다.

첫 번째로 함수를 변수에 할당을 살펴보자

//변수에 함수 할당
const work = () => {
  console.log("hello world");
};

이 코드의 함수 이름은 work인 것 같지만 그렇지 않다.

화살표 함수는 이름이 없는 익명 함수이다. work는 단지 익명 함수를 담고 있는 변수명이다.

함수에 이름이 없더라도, 변수를 통해 저장하거나 다른 함수에 인자로 넘겨 사용할 수 있다.
특히, 코드 실행 순서를 제어하기 위해 익명 함수를 callback으로 넘겨 호출하는 구조로 자주 활용된다.

먼저 이해가 쉽게 코드를 추가해 보자.

//변수에 함수 할당
const work = (callback) => {
  callback();
};

work(() => {
  console.log("종료");
});

이렇게 코드를 봤을 때 첫 번째 3줄은 work라는 변수에 익명함수를 저장했다.

이 익명함수의 매개변수는 callback으로 함수의 호출을 기다리고 있다.

그럼 callback으로 받는 다른 익명함수는 어디있을까?
그 코드가 바로 아래 3줄이다.

work(() => {
  console.log("종료");
});

이 코드는 익명 함수를 생성해 work 함수의 callback에 전달하는 코드이다.

정확히는 익명함수를 생성해서 work 함수에 인자로 넘긴 것이다.

때문에 해당 코드를 실행하면, callback을 매개변수로 받는 익명함수가 실행되고,

정의된 익명함수 속 console.log("종료");가 실행되는 것이다.

전체 코드 관점에서는 결국 두개의 익명함수가 생성된 것이다.

// 첫 번째 익명 함수 (work 함수)
const work = (callback) => {
  callback();
};

// 두 번째 익명 함수 (callback으로 넘기는 함수)
work(() => {
  console.log("종료");
});

그러면 왜 함수를 한 번에 정의하지 않고, 외부에서 따로 넘겨줄까?

현재 코드처럼 간단한 경우에는 바로 작성하는 것이 편해 보인다.

하지만 실제 개발에서는 작업의 흐름을 분리하거나, 원하는 동작만 골라서 실행하기 위해 callback 구조를 자주 사용한다.

그 예시는 추후에 작성해 보도록 하겠다.

[JavaScript] 자바스크립트 객체 -> 배열 변환(keys, values, entries)

xogus-blog — Mon, 14 Apr 2025 17:45:40 +0900

자바스크립트에서 생성된 객체를 배열로 변환해 접근하는 편한 방법이 존재한다.

먼저 객체(object)를 하나 간단하게 생성해 보자.

const person = {
  name: "홍길동",
  age: "23",
  gender: "boy",
};

이렇게 생성된 객체는 key값에만 혹은 value값에만 접근하기 귀찮을 때가 있다.

때문에, key값 혹은 value값을 배열에 따로 저장한다면 index번호만으로 쉽게 접근할 수 있다.

마지막 entries()를 사용하면 객체 값을 배열에 담고 새로운 배열을 생성하여 모두 저장할 수 있다.

어렵지 않은 과정이니 한번 살펴보자.

배열로 바꾸는 방법은 크게 3가지가 존재하는데,

첫 번째로 Object.keys()이다.

이 방법은 객체의 키값들만 배열에 담아 저장하는 방법이다.

코드로 한번 살펴보면

let newArray = Object.keys(person);

console.log(newArray);

이렇게 newArray라는 배열에 Object.keys(person)를 활용해 person객체에 담긴 key값을 배열에 저장할 수 있다.

코드를 실행해 보면

key값만 배열에 잘 담긴 것을 확인할 수 있다.

그렇다면 객체의 value값은 배열에 어떻게 저장할까?

바로 Object.values()를 사용하면 된다.

이 방법은 객체의 벨류값만 배열에 담아 저장하는 방법이다.

코드로 살펴보면

let newArray2 = Object.values(person);

console.log(newArray2);

이렇게 newArray2라는 배열에 Object.values(person)을 활용해 person 객체에 담긴 value값을 배열에 저장할 수 있다.

코드를 실행해 보면

value값만 배열에 잘 담긴 것을 확인할 수 있다.

마지막으로, key와 value값을 모두 배열에 담을 순 없을까? 가능하다.

바로 Object.entries()를 사용하면 된다.

이 방법은 새로 생성한 배열 안에 다른 배열을 추가로 생성하여 저장한다.

때문에, key값과 value값 모두가 배열에 새로 저장된다.

코드로 살펴보면

let newArray3 = Object.entries(person);

console.log(newArray3);

이렇게 객체를 newArray3라는 배열에 Object.entries(person)을 활용해 person 객체에 담긴 key, value값을 배열에 저장할 수 있다.

먼저 위 코드를 실행해 보면

이렇게 key 그리고 value값이 새로 생성된 배열 속 새로운 배열에 들어가 있는 것을 확인할 수 있다.

새로 생긴 배열을 응용하면 for문을 통해 index번호 만으로도 쉽게 객체를 출력해 낼 수 있다.

예시

for (let i = 0; i < newArray3.length; i++) {
  console.log(`key : ${newArray3[i][0]} / value : ${newArray3[i][1]}`);
}

코드를 실행해 보면

이와 같이 객체 속 내용을 간편하게 출력할 수 있다.

근데 사실, 이렇게 배열로 바꾸지 않고 for문을 통해 훨씬 더 쉽게 접근할 수 있다.

(굳이 배열로 바꾸지 않아도 되는 상황이면 for문을 통해 객체에 바로 접근하자.)

[예시]

let person = {
  name: "홍길동",
  age: "23",
  gender: "boy",
};

//for문을 사용한 객체 값 접근
for (let i in person) {
  console.log(`key : ${i} / value : ${person[i]}`);
}

이렇게 실행하면

위와 동일한 결과를 얻을 수 있다.

[JavaScript] 자바스크립트 배열 수정 타입 에러 (const, let)

xogus-blog — Sat, 12 Apr 2025 20:24:23 +0900

자바스크립트에서는 배열을 어떤 타입으로 생성하는 냐에 따라서 수정 여부가 달라진다.

먼저 배열을 생성해 보자.

//배열 생성
const fruits = ["apple", "orange", "peach"];

배열의 요소를 수정하는 코드는 크게 두 가지가 있다.

fruits = ["apple", "kiwi", "peach"]
fruits[2] = "mango";

하지만 이 코드를 실행해 보면,

TypeError: Assignment to constant variable.

이러한 에러가 발생한다.

그 이유는 배열 생성을 const로 생성했기 때문

const의 경우 변수 자체를 변경할 수 없는 바인딩된 참조이다.
때문에 배열의 요소(객체)를 각각 수정할 수는 있지만, 배열 자체를 통째로 변경하는 것은 불가능하다.

따라서 const로 생성된 배열은

fruits[2] = "mango";

이렇게 직접 객체에 접근해 수정하고,

통으로 배열 자체를 바꿀 일이 많다면 const 대신 let을 사용해서 배열을 선언하자.

[예시]

//배열 생성
let fruits = ["apple", "orange", "peach"]; //let으로 선언

//배열 요소 수정
fruits = ["apple", "kiwi", "peach"];   //배열 통째로 수정
fruits[2] = "mango";  //접근 수정

//배열 출력
console.log(fruits);

[결과]

[JavaScript] 자바스크립트 객체 Value값 변경 & 삭제, 함수 호출

xogus-blog — Sat, 12 Apr 2025 19:47:08 +0900

생성된 객체 내의 값을 점표기법 및 괄호 표기법을 통해 변경하거나 삭제할 수 있음.

[생성된 객체]

const car = {
  name: "붕붕",
  model: "sonata",
  color: "balck",
  print: function () {
    console.log(car.name, car.model);
  },
};

[변경 및 삭제 코드]

//객체의 경우 const로 선언하더라도 값 변경 가능함
car.model = "K5"   //점표기법
car["model"] = "K5";   //괄호표기법

//객체 삭제
delete car.name;   //점표기법
delete car["name"];   //괄호표기법

이렇게 점 표기법과 괄호 표기법을 사용하면 객체 내에 저장된 값을 변경할 수 있음.

추가로, 객체 내에 생성된 함수를 호출하는 경우에도 동일하게 호출할 수 있음.

[객체 내 생성된 함수 호출 코드]

car.print();   //점표기법
car["print"]();   //괄호표기법

[번외]
객체 내 함수에서 자신이 속한 객체 내의 value값을 활용하고 싶을 땐 ${this.you want key}를 사용하면 된다.

//본인이 속해있는 객체를 재활용할 때
const car = {
  name: "붕붕",
  model: "sonata",
  color: "balck",
  print: function () {
    console.log(`제 자동차 이름은 ${this.name} 입니다.`); //해당 부분
  },
};

[출력 결과]

[JavaScript] 콜백함수 개념

xogus-blog — Thu, 10 Apr 2025 21:59:13 +0900

자바스크립트에는 콜백함수가 많이 쓰인다.

이는 함수를 재활용하고 유연하고 다양한 동작의 개발이 가능하다.

//콜백 함수

const calculator = (a, b, callback) => {
  const result = a + b;
  callback(result);
};

const printResult = (result) => {
  console.log("더하기 값은 : " + result);
};

const doubleResult = (result) => {
  console.log("2를 곱한 값은 : " + result * 2);
};

calculator(2, 3, printResult);
calculator(4, 5, doubleResult);

callback(result)는 "callback 자리에 있는 함수를 호출해라"는 뜻이고
그 callback 자리에 printResult가 들어갔으니까
결국 printResult(result)를 실행됨

doubleResult도 마찬가지이기에 따로 부연설명은 하지 않음

정리하면, callback 자리에는 결국 함수가 들어간다고 생각하면 됨!

[코드 쉽게 정리]

//원래 함수
const calculator = (a, b, callback) => {
  const result = a + b;
  callback(result);
};

//실제로 실행되는 함수 변형
const calculator = (a, b, printResult) => {
  const result = a + b;
  printResult(result); //callback자리에 printResult 함수가 들어감
};

[JavaScript] 자바스크립트 괄호표기법 사용한 객체 Value 값 가져오기

xogus-blog — Thu, 10 Apr 2025 21:46:02 +0900

객체 프로퍼티 Key 값을 이용해 Value값 가져오기.

const car = {
  name: "자동차",
  model: "sonata",
  color: "balck",
};

const getValue = (key) => {
  console.log(car[key]);
};

getValue("color");

- car[key]
- getValue("color");

이렇게 객체 프로퍼티에 저장된 값을 "문자열'로 호출하면 그에 맞는 Value값을 가져올 수 있음.

점 표기법을 이용해 출력하는 방법도 있지만, 함수처럼 key값을 대입해야 하는 경우에는 괄호표기법을 사용해 가져오는 것이 더 효과적임.