태현 블로그

자바스크립트에서 .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)..

앞선 글에서 Promise의 개념과 사용법에 대해 알아보았다.하지만 실제로 코드를 작성하다 보면 Promise에는 단점이 존재한다.바로 .then() 혹은 .catch()를 계속 사용해줘야 한다는 점이다. 이 방식은 비동기 작업이 많아질수록 코드가 길어지고, 가독성도 떨어지는 문제를 야기한다.예를 들어 다음과 같은 코드가 있다고 생각해보자.// Promise 사용const fetchData2 = () => { return new Promise((resolve) => { resolve("🔥 성공!"); });};fetchData2().then((result) => { console.log(result); // 🔥 성공!});코드가 짧아보일 수도 있지만, 실제 프로젝트에서 에러 처리를 포함한 ..

자바스크립트의 꽃은 비동기 처리이다. 여기서 비동기 처리가 무엇일까?먼저, 동기처리란 무엇인지 살펴보자.--우리가 커피숍에 갔다고 가정하고, 내 앞에 2명의 사람이 주문하고 있다고 생각해 보자. 나의 주문은 단순히 쿠키 하나를 포장하는 주문이고.내 앞사람들의 주문은 빵과 커피 2잔을 포장하는 주문이라고 생각해 보자. 여기서 동기처리는 내 앞사람들 주문이 모두 처리될 때까지 나는 무한정 대기해야 한다.그렇다면 나는 생각할 것이다."아니 쿠키 하나만 주면 되는걸 내가 앞사람들 주문까지 다 기다려야 되나?"-> 이것이 동기 처리의 단점이다. 사실 이론상으로는 앞 주문을 먼저 처리하는 것이 맞지만, 굉장히 비효율 적이다.그럼 비동기 처리란 무엇인가?앞 상황에서 굉장히 센스 있는 직원이 나는 쿠키만 빨리 주면 되..

C나 Java처럼 함수 이름을 명확히 정의하는 언어들과 달리, JavaScript에서는 화살표 함수와 익명 함수를 사용해 callback 함수를자주 작성한다. 초반에 공부할 때 굉장히 혼동이 오기도 해서 정리를 해본다. 첫 번째로 함수를 변수에 할당을 살펴보자//변수에 함수 할당const work = () => { console.log("hello world");};이 코드의 함수 이름은 work인 것 같지만 그렇지 않다.화살표 함수는 이름이 없는 익명 함수이다. work는 단지 익명 함수를 담고 있는 변수명이다. 함수에 이름이 없더라도, 변수를 통해 저장하거나 다른 함수에 인자로 넘겨 사용할 수 있다.특히, 코드 실행 순서를 제어하기 위해 익명 함수를 callback으로 넘겨 호출하는 구조로 자주 활..

자바스크립트에서 생성된 객체를 배열로 변환해 접근하는 편한 방법이 존재한다. 먼저 객체(object)를 하나 간단하게 생성해 보자.const person = { name: "홍길동", age: "23", gender: "boy",}; 이렇게 생성된 객체는 key값에만 혹은 value값에만 접근하기 귀찮을 때가 있다.때문에, key값 혹은 value값을 배열에 따로 저장한다면 index번호만으로 쉽게 접근할 수 있다. 마지막 entries()를 사용하면 객체 값을 배열에 담고 새로운 배열을 생성하여 모두 저장할 수 있다. 어렵지 않은 과정이니 한번 살펴보자.배열로 바꾸는 방법은 크게 3가지가 존재하는데, 첫 번째로 Object.keys()이다.이 방법은 객체의 키값들만 배열에 담아 저장하는 방법이다...

자바스크립트에서는 배열을 어떤 타입으로 생성하는 냐에 따라서 수정 여부가 달라진다. 먼저 배열을 생성해 보자.//배열 생성const fruits = ["apple", "orange", "peach"]; 배열의 요소를 수정하는 코드는 크게 두 가지가 있다.fruits = ["apple", "kiwi", "peach"]fruits[2] = "mango"; 하지만 이 코드를 실행해 보면,TypeError: Assignment to constant variable. 이러한 에러가 발생한다. 그 이유는 배열 생성을 const로 생성했기 때문 const의 경우 변수 자체를 변경할 수 없는 바인딩된 참조이다.때문에 배열의 요소(객체)를 각각 수정할 수는 있지만, 배열 자체를 통째로 변경하는 것은 불가능하다.따라서 c..

생성된 객체 내의 값을 점표기법 및 괄호 표기법을 통해 변경하거나 삭제할 수 있음. [생성된 객체]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"]; //괄호표기법 이렇게 점 표기법과 괄호 표기법을 사용하면 객체 내에 저장된 값을 변경할 수 있음.추가로, 객체 내에..

자바스크립트에는 콜백함수가 많이 쓰인다.이는 함수를 재활용하고 유연하고 다양한 동작의 개발이 가능하다. //콜백 함수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 자리에 있는 함수..

객체 프로퍼티 Key 값을 이용해 Value값 가져오기. const car = { name: "자동차", model: "sonata", color: "balck",};const getValue = (key) => { console.log(car[key]);};getValue("color"); - car[key]- getValue("color"); 이렇게 객체 프로퍼티에 저장된 값을 "문자열'로 호출하면 그에 맞는 Value값을 가져올 수 있음. 점 표기법을 이용해 출력하는 방법도 있지만, 함수처럼 key값을 대입해야 하는 경우에는 괄호표기법을 사용해 가져오는 것이 더 효과적임.