Tech is created to fix problem

문제상황)배열을 map으로 돌리면서, 각 배열의 값에 itemnum이라는 특정 속성 값을 넣어주어야 했다.그리고 그 값은 api 호출을 통해 가져와야 하는 값이다.그래서 우선 getValue라는 api를 호출하는 함수를 작성해 주었고그 함수를 bin 속성의 값에 실행시켜 주었다.Array.map((item) => { const getValue = async () => { const num = await 비동기함수(); return num; } const result = { ...item, itemnum: getValue() }; return result;}); 그랬더니 binValue의 리턴값은 아래와 같이 Promise 객체가 반환되었다. 문제원인 1) binValue 함..

코드 리팩토링을 하면서 어떻게 하면 더 가독성이 있고 다른 사람이 봐도 수정이 쉬운 코드를 짤 수 있을까? 라는 고민을 하게 되었다. 그러던 중 '함수와 부수효과' 라는 주제의 강의를 듣게 되었고 들으면서 함수를 작성할 때 무엇을 중점으로 생각해야 하는지 조금은 알게되었다. '순수 함수인가?' = '의존성이 많지는 않은가?' = '외부의 값을 바꾸는가?' 순수 함수란 매개변수(입력)를 받으면 항상 같은 값을 반환하는 함수이다 이러한 특성 때문에 순수 함수는 사이드 이펙트를 발생시키지 않는다. 그래서 예측이 가능하고 테스트하기 쉬우며 가독성이 높다는 장점을 가지고 있다. 1. 함수의 내용은 어떻게 가 아닌 무엇을 이 되어야 한다. 예를 들어 전역변수 totalPrice를 선언 후, 각 함수에서 totalP..

일단 먼저 정리해두고 싶은 부분은 용어를 제대로 알지 못하고 섞어서 이것 저것 참고하다보니까 용어들이 많이 헷갈렸었다 Promise 함수를 사용할 때, then 혹은 async/await 둘 중 하나를 사용하면 된다. then의 형식은 체이닝 형식이고 a() .then(b()) .catch(c()) .finally(console.log('Done!')) async/await 형식은 블록 형식이다 const wrap = async () => { try { const res = await a() console.log(res) } catch (err) { console.error(err) } finally { console.log('Done!') } } async/await 는 블록 안에 함수들을 넣기 때문에..

Javascript 는 프로토타입 언어이다! 프로토타입 정말 많이 들어본 단어인데 얼추 객체와 객체간의 상속 개념으로 알고 있었다. 프로토타입이 자바스크립트의 그 자체이기 때문에 더욱 깊은 이해를 하고 넘어가야 사용하는데 있어서도 재미있어질 것 같아서 정리해본다. Java, Python 등의 언어는 객체지향언어이다. 객체지향언어에서 빠질 수 없는 개념은 Class 개념이다. 그런데 Javascript 는 클래스 개념이 없다. ❓❓ 대신 프로토타입 개념이 존재한다. 그래서 Javascript 를 프로토타입 기반 언어라고 부르는 것이다. Class 가 없으니까 기본적으로 상속기능도 없다. 그래서 보통 프로토타입을 기반으로 상속을 흉내내어 구현해 사용한다. 최근 ES6 에서 Class 문법이 추가되었지만 문법..

선언과 표현 그리고 호이스팅 함수 선언문 (호이스팅 ⭕️) function hello(){} 함수 표현식 (호이스팅 ❌) const hello = function(){} 호이스팅 : 함수의 선언부가 유효한 범위 안에서 제일 꼭대기에 끌어올려서 사용되어지는 방식 hello() function hello() { console.log('Hello~'); } // 호출 먼저 하는 것은 말이 안 되지만, 출력에 문제 없음 즉시실행함수 (IIFE) const a = 7; (() => { console.log(a * 2) })() // 14 (() => {})() // (F)() (function(){})() // (F)() (function(){}()) // (F()) !function(){}() // !F() +..

setTimeout(() => { console.log(1) }, 0) console.log(2) // 2 // 1 setTimeout 의 지연시간을 0초로 설정했음에도 console 로 2가 먼저 찍힌다. 왜? setTimeout은 자바스크립트 엔진이 직접 처리할 수 없고, Web APIs 의 도움을 받아 처리해야하기 때문이다 더 자세하게 알기 위해서는 '자바스크립트 이벤트 루프 동작 원리' 에 대해 알아보아야 한다. 먼저 아래 그림은 브라우저 내부 구성도이다. 맨 위 예제가 동작하는 순서는 아래 1~6 그림 순서대로이다. setTimeout() 함수가 Web APIs 를 거치고 내부 콜백함수가 Task Queue 에 쌓인다 console.log(2) 가 콜 스택에 쌓이고 처리된 후 setTimeout..

가비지 컬렉션 (GC, Garbage Collection, 쓰레기 수집) 자바스크립트의 메모리 관리 방법으로 자바스크립트 엔진이 자동으로 데이터가 할당된 메모리에서 더 이상 사용되지 않는 데이터를 해제하는 것을 말한다. 가비지 컬렉션은 개발자가 직접 강제 실행하거나 컨트롤할 수 없다. 예시를 통해 알아보자 let a = { x:1 } let b = a b.x = 2 console.log(b); //{ x:2 } console.log(a); //{ x:2 } 가비지 컬렉션이 메모리를 순회하다가 M2 를 발견했을 때 더 이상 사용되지 않는 데이터로 판단이 되면 제거한다. 클로저 함수가 선언할 때의 유효범위(렉시컬 범위)를 기억하고 있다가 함수가 외부에서 호출될 때 그 유효범위의 특정 변수를 참조할 수 있는 ..

Symbol 변경이 불가한 데이터로, 유일한 식별자를 만들어 데이터를 보호하는 용도로 사용할 수 있다. 기본구조 : Symbol('설명') 설명 부분은 단순 디버깅을 위한 용도일 뿐, 심볼 값과는 관계가 없다. const sKey = Symbol('Hello!') const user = { key: '일반 정보!', [sKey] : '민감한 정보!' } console.log(user.key); //일반 정보! console.log(user['key']); //일반 정보! console.log(user[sKey]); //민감한 정보! console.log(user[Symbol('Hello!')]); //undefined console.log(sKey); //Symbol(Hello!) const myInfo..

정규표현식을 쓰는 이유? - 문자 검색(Search) - 문자 대체(Replace) - 문자 추출(Extract) 정규표현식 기본 방식 // 생성자 방식 new RegExp('표현', '옵션') new RegExp('[a-z]', 'gi') // 리터럴 방식 /표현/옵션 /[a-z]/gi 정규표현식 메소드 정규식.test(문자열) - 일치 여부 반환 문자열.match(정규식) - 일치하는 문자의 배열 반환 문자열.replace(정규식, 대체문자) - 일치하는 문자를 대체 정규표현식 플래그 g : 모든 문자와 일치 (Global) i : 영어 대소문자를 구분하지 않고 일치 (Ignore case) m : 여러 줄 일치 (Multi line), 각각의 줄을 시작과 끝으로 인식 정규표현식 패턴 // 정규표현식..