[JavaScript] 익명함수와 화살표 함수 이해하기
2023. 5. 9. 00:11
Basic/JavaScript
2015년, 자바스크립트 ES6 버전이 디벨롭되면서 화살표 함수(arrow function)라는 문법이 생겨났고, 이 화살표 함수를 사용함으로 함수 코드의 작성 시의 간결함과 가독성을 높여주었다. 하지만 화살표 함수가 기존의 함수 작성 문법인 익명 함수(anonymous function)을 완전히 대체하지 못하는데, ES6 이상의 모던 자바스크립트로 학습을 시작한 학습자, 또는 심지어 많은 주니어 개발자들이 이를 모르고 있는 경우가 많아, 이 둘의 특징과 차이점을 정리해보았다. 1. 구문 익명 함수는 'function' 키워드를 사용하여 함수를 작성한다. 함수 이름이 없으며, 변수에 할당하거나 다른 함수의 매개 변수로 전달할 수 있다. const anonymous = function() { // 함수 내..
[JavaScript] BigNumber.js를 활용하여 정확한 계산, 큰 수 및 작은 수 다루기
2023. 5. 8. 12:13
Basic/JavaScript
JavaScript에서 숫자는 내장 데이터 유형으로 Number를 사용한다. 그러나 Number는 64비트 부동 소수점 수로 구현되어 있으며, 이는 매우 큰 또는 매우 작은 숫자를 처리하는 데 제한이 있다. 매우 큰 또는 매우 작은 숫자를 '정확'하게 다룰 필요가 있는 경우, BigNumber와 같은 라이브러리를 사용하는 것이 좋다. 어떤 이유로 제한이 있을까? JavaScript에서 숫자는 64비트 부동 소수점 수로 구현되어 있다. 이는 64비트로 이루어진 이진수로 부호 비트, 지수 비트, 가수 비트로 구성되어 있다. 이진수로 숫자를 표현하므로, 숫자는 2진수로 저장되고, 이진수 연산으로 처리된다. 이진수는 0과 1로만 이루어져 있으므로, 숫자를 표현하는 데 있어서 제한이 있다. 가수 비트에 저장할 수..
[JavaScript] 객체 변환하기
2023. 5. 3. 14:57
Basic/JavaScript
obj라는 객체가 있다고 가정하자. const obj = { a: 1, b: 2, c: 3 }; 위의 객체의 key값을 소문자에서 대문자, value값을 2배로 변환하여 새로운 객체로 변환하는 방법을 알아보자. 1. 라이브러리없이 구현 function mapObject(obj, fn) { const newObj = {}; for (const [key, value] of Object.entries(obj)) { const [newKey, newValue] = fn(key, value); newObj[newKey] = newValue; } return newObj; } const obj = { a: 1, b: 2, c: 3 }; const newObj = mapObject(obj, (key, value) =..
[JavaScript] 나머지 매개변수 - 함수 인수 유동적으로 받기
2023. 4. 2. 16:36
Basic/JavaScript
매개변수의 모든 합을 구하는 함수를 구현한다고 치자. 아래와 같은 함수는 매개변수를 고정적으로 두개밖에 받지 못한다. const sum = (a + b) => { return a + b; }; console.log(sum(1,2)); // result: 3 고정적으로 받지 않고 유동적으로 매개변수의 모든 값을 더하는 방법은 '나머지 매개변수'를 사용하면 된다. const sum = (...numbers) => { return numbers.reduce((pre, cur) => pre + cur, 0); }; console.log(sum(1, 2, 3, 4)); // result: 10 인자를 spread를 사용하면 고정적인 인수를 받는 것이 아닌 유동적으로 받는 것이 가능해진다. 예시로 sum(덧셈) 함..
[JavaScript] 문자형(string) 실수(숫자) 데이터, 세자리마다 콤마 구현하기
2023. 3. 30. 00:16
Basic/JavaScript
let numberString = "1000000.000000"; let parts = numberString.split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); let result = parts.join("."); console.log(result); // "1,000,000.000000" split() 메소드를 사용하여 원래 문자열을 소수점 기준으로 두 부분으로 나눈다. 정규표현식를 사용하여 replace() 메소드를 호출하여 첫 번째 부분의 숫자 문자열을 변경한다. 이 정규표현식은 세 자리의 숫자 그룹 앞에 오는 자리를 찾는다. 찾은 후, replace()는 해당 경계 뒤에 있는 문자열을 ","로 대체한다. join() 메소..
임시 변수명을 작명할 때 뭘로 선언할까? - foo, bar
2023. 2. 12. 17:10
Basic/etc
개발을 하다 보면 로직 검사를 위한 테스트 코드 작성을 하거나 어떠한 값을 확인하는 등 여러가지 이유로 임시 변수를 선언해 본 경험이 있을 것이다. 임시 변수 자체도 나름의 의미가 있는 변수가 될 수도 있지만 의미가 없는 변수여서 마땅한 네이밍을 정하기 어렵게 만들기도 한다. 그래서 네이밍을 test, temp 등의 변수를 두는 경우가 많다. 이도 나쁘진 않다고 보지만, foo나 bar와 같은 만국 공통으로 의미가 통하는 네이밍을 쓰는 것이 좋다고 생각한다. (우리나라로 치자면 '이름 = 홍길동' 같은... 자세한 내용은 밑에 나무위키 참고) https://namu.wiki/w/foo foo - 나무위키 프로그래밍 상에서 임시로 변수이름을 지정해줘야 할 때 주로 쓰이는 변수 이름이다. foo 외에 bar..
nvm을 이용하여 node버전 변경하기
2022. 10. 31. 21:09
Basic/etc
brew가 깔려있다는 전제 하에 설명합니다. 1. nvm 설치 brew install nvm 2. 환경 변수 등록하여 터미널에 인식하기 1) zsh 터미널인 경우 vim ~/.zshenv 혹은 vim ~/.zprofile 2) bash 터미널인 경우 vim ~/.bash_profile 3. 아래 내용 추가하여 환경 변수 적용 export NVM_DIR="$HOME/.nvm" [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh" # This loads nvm [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_..
JSDoc 을 이용하여 JavaScript 파일 문서화하기
2022. 10. 23. 21:41
Basic/JavaScript
JSDoc이란? JSDOC은 Javascript 소스코드 파일에 주석 용도의 마크업 언어입니다. 주석이기 때문에 코드에 영향을 주지 않습니다. 빨간 박스 안에 있는 부분이 JSDoc입니다. // 스크린샷 기준으로 맨 윗 줄인 해당 문구를 통해 props의 자료형이 object임을 알려주고 있습니다. @param {object} props // 해당 구문을 통해서는 props.align에 어떤 속성들이 있는지 알려주고 있습니다. @param {'right' | 'center' | 'left' } props.align 아래 첨부사진과 같이 JSDoc에 param들에 커서를 두면 프로퍼티 목록을 제공합니다. 저는 타입과 프로퍼티를 가이드하옂 가독성을 높여 유지보수를 수월하게 하는 도구로 사용하고 있습니다. 공..
[JavaScript] 생성자(constructor)로 객체 생성하기
2022. 8. 1. 03:46
Basic/JavaScript
const obj = { author: "cotist", age: 10 } 위와 같이 author, age 두 개의 키를 가진 객체가 있고 같은 양식의 객체들이 필요하다면 어떻게 해야할까? 위의 객체를 ctrl+c, ctrl+v를하여 객체명과 키의 값만 바꿔도 되긴 하겠지만 키가 개수가 많아질수록 반복되는 코드가 늘어나고 결국은 레거시처럼 보일 것이다. (레거시처럼 보이는게 아니고 레거시가 맞다.) // bad example const obj1 = { author: "cotist1", age: 10 } const obj2 = { author: "cotist2", age: 11 } const obj3 = { author: "cotis3", age: 12 } const obj5 = { author: "cot..