[Javascript] 자바스크립트는 싱글 스레드 (+비동기 심화 학습)
2023. 5. 15. 23:37
Basic/JavaScript
자바스크립트는 단일 쓰레드(single-threaded) 언어이다. 이는 자바스크립트 엔진이 한 번에 하나의 작업만 처리할 수 있다는 것을 의미한다. 다른 많은 프로그래밍 언어들은 멀티 쓰레드(multi-threaded)를 지원하여 동시에 여러 작업을 처리할 수 있다. 멀티 쓰레드 언어에서는 한 쓰레드가 작업을 처리하는 동안에도 다른 쓰레드가 다른 작업을 처리할 수 있다. 그러나 자바스크립트는 단일 쓰레드 언어이므로 한 번에 하나의 작업만 처리할 수 있다. 이는 자바스크립트 코드가 순차적으로 실행되는 것을 의미한다. 자바스크립트는 이벤트 루프(event loop)와 비동기 콜백(callback)을 통해 비동기적인 작업을 처리할 수 있게 한다. 이벤트 루프는 콜백 함수를 대기열에 추가하고, 대기열의 작업이..
[JavaScript] 세미콜론 자동 삽입(Automatic Semicolon Insertion, ASI) 주의하기 - 코드 컨벤션
2023. 5. 9. 20:00
Basic/JavaScript
세미콜론 자동 삽입(ASI, Automatic Semicolon Insertion)은 줄바꿈이 자동으로 세미콜론으로 대체되는 것을 의미한다. 때로 의도하지 않은 동작을 초래할 수 있기 때문에 코드를 작성할 때 주의해야 한다. 특히, 함수 이름과 중괄호를 다른 줄에 작성할 경우, JavaScript에서는 이를 한 줄로 인식하여 세미콜론이 삽입되어 함수가 올바르게 작동하지 않을 수 있다. 다음 예시 코드를 보자 function someFunction() { // 코드 블록 } 위 코드에서는 함수 이름과 중괄호가 다른 줄에 작성되어 있다. 이 경우, 세미콜론을 자동으로 삽입하여 다음과 같이 해석한다. function someFunction(); { // 코드 블록 } 이 경우, someFunction은 함수 ..
[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) =..
DAMP 원칙을 고수하여 코드 직관성 높이기
2023. 4. 27. 19:07
Experience/Developer
DAMP 원칙은 DRY 원칙과는 반대로, 코드를 구체적으로 만들어 유지보수하기 쉽게 만드는 것이다. (DRY 원칙 참고 - https://cotist.tistory.com/33) DAMP 원칙은 코드를 더 직접적이고 구체적으로 작성하여, 코드의 의도를 더 잘 나타내도록 하는 것을 권장한다. 예를 들어, 코드의 함수나 변수 이름을 더 구체적으로 작성하고, 불필요한 추상화를 피하는 등의 방식으로 DAMP 원칙을 따르는 것이다. DAMP 원칙은 DRY 원칙과는 다르게, 중복 코드를 가능한 한 피하지 않고, 코드를 보다 직접적이고 구체적으로 작성하는 것을 강조한다. 이를 통해 코드를 더 쉽게 이해하여 유지보수를 할 수 있다. 그러나 DAMP 원칙도 과도하게 적용할 경우, 코드의 가독성을 저해하고 코드의 복잡도를..
DRY 원칙을 고수하여 코드 작성 효율성 높이기
2023. 4. 27. 12:02
Experience/Developer
DRY란 Don't Repeat Yourself의 약자로, 코드에서 중복되는 부분을 최소화하여 코드의 유지보수성을 향상시키고, 코드 작성의 효율성을 높이는 소프트웨어 개발의 원칙이다. 예를 들어, 같은 로직이 여러 번 반복되는 경우, 이를 하나의 함수로 추상화하여 함수를 호출함으로써 중복을 제거할 수 있다. 이렇게 하면 코드의 양을 줄이고, 유지보수성과 가독성을 향상시킬 수 있다. DRY 원칙을 따르면 코드 중복을 최소화할 수 있으며, 이를 통해 코드를 효율적으로 작성할 수 있다. 예를 들어, 다음과 같은 두 개의 함수가 있다고 가정해보자. function calculateSquareArea(side) { return side * side; } function calculateRectangleArea(w..
[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() 메소..