JS & TS
-
TypeScript 유틸리티 타입 소개JS & TS 2024. 10. 11. 14:38
TypeScript는 JavaScript에 정적 타입을 더하여 코드의 안정성을 높이는 역할을 합니다.특히 TypeScript에는 유용한 유틸리티 타입들이 있어, 코드를 작성할 때 매우 편리하게 활용할 수 있습니다.TypeScript에서 자주 사용되는 유틸리티 타입과 기능을 소개해 보겠습니다.1. PickPick은 특정 타입에서 원하는 프로퍼티만 선택하여 새 타입을 만드는 데 유용합니다.이 기능을 사용하면 큰 인터페이스나 객체 타입 중에서 필요한 부분만 사용하고 싶을 때 매우 편리합니다.언제 사용하나요?특정 객체에서 필요한 일부 속성만 타입으로 사용하고자 할 때사용 예시interface User { id: number; name: string; age: number; email: string;}//..
-
구조분해 사용 팁 4가지JS & TS 2024. 9. 14. 13:36
자바스크립트의 구조분해 할당(Destructuring)을 더 효율적으로 사용하는 4가지 실전 팁을 소개합니다.1. 기본값 할당하기구조분해를 사용할 때, 배열이나 객체에서 값이 없을 경우 undefined가 할당됩니다.이를 방지하기 위해 기본값을 설정할 수 있습니다.예를 들어, 배열이나 객체에서 값이 없는 경우 기본값을 할당할 수 있습니다.이 방법은 백엔드에서 불완전한 데이터를 받을 때 특히 유용합니다.const [a, b, c = 3] = [1, 2];console.log(c); // 3 (기본값)const {d, e, f = 6} = {d: 4, e: 5};console.log(f); // 6 (기본값)2. 나머지 연산자 사용배열이나 객체에서 필요한 부분만 추출하고, 나머지 값을 하나의 변수에 담을 ..
-
Javascript ES15(ECMAScript 2024) 문법정리JS & TS 2024. 8. 14. 18:01
ES13에 대한 글을 작성한 지 얼마 안 된 것 같은데 벌써 ES15가 정식 출시하였습니다.JavaScript의 최신 표준인 ECMAScript 2024 (ES15)에서는 개발자들이 더욱 강력한 기능들을 활용할 수 있도록 다양한 새로운 기능들이 도입되었습니다.아래에서는 ES15의 주요 기능들을 정리하고, 각 기능에 대해 ES15 이전과 이후의 코드를 비교해 보겠습니다.1. Object 및 Array 그룹화Object.groupBy() 및 Array.prototype.groupBy() 메서드를 사용하면 객체나 배열의 요소를 특정 조건에 따라 그룹화할 수 있습니다.예를 들어, 다음과 같이 과일 목록을 양에 따라 그룹화할 수 있습니다.(참고로 이번에 추가된 메서드는 원래 Array 프로토타입 메서드로 있었으나..
-
자바스크립트 비동기 프로그래밍 패턴JS & TS 2024. 5. 28. 17:27
자바스크립트는 비동기 작업을 처리하기 위해 다양한 프로그래밍 패턴을 제공합니다.비동기 프로그래밍은 특히 네트워크 요청, 파일 입출력, 타이머 등 시간이 오래 걸리는 작업을 효율적으로 처리하는 데 유용합니다.이번 글에서는 자바스크립트의 주요 비동기 프로그래밍 패턴인 콜백, 프로미스, async/await, 그리고 RxJS에 대해서도 간단하게 소개하겠습니다.1. 콜백 (Callback)콜백은 가장 기본적인 비동기 프로그래밍 패턴입니다.함수가 실행된 후 호출될 함수를 매개변수로 전달하여 비동기 작업이 완료된 후 실행됩니다.function fetchData(callback) { setTimeout(() => { callback('데이터를 가져왔습니다'); }, 1000);}fetchData((messa..
-
Javascript ES14 문법정리JS & TS 2023. 12. 15. 14:00
계속 작성하다 보니 어느덧 가장 최신인 ECMAScript 2023까지 왔습니다. 이렇게 정리를 해보니 점점 발전하고 있는 JS에 대해 새삼 느끼는 시간이었습니다. 1. findLast와 findLastIndex 배열 작업 시 특정 요소를 찾는 것은 자주 발생하는 작업입니다. find 메서드는 이러한 프로세스를 단순화하기 위해 도입되었지만, 첫 번째 일치하는 요소만 반환합니다. 그러나 때로는 배열의 끝에서부터 마지막 일치하는 요소를 찾아야 하는 상황이 있습니다. 이럴 때 findLast와 findLastIndex가 유용하게 사용됩니다. // 이전 방법 const users = [ {id: 1, name: 'user1', age: 19}, {id: 2, name: 'user2', age: 14}, {id:..
-
Javascript ES13 문법정리JS & TS 2023. 12. 4. 18:10
1. Top-level await(최상위 await) 지금까지 JavaScript에서는 await 키워드를 async 함수 내에서만 사용할 수 있었습니다. 그러나 ECMAScript 2022에서는 최상위 모듈에서도 Promise를 기다리기 위해 await 키워드를 사용할 수 있게 되었습니다. 이를 통해 부모 모듈의 실행이 자식 모듈의 실행이 완료될 때까지 기다리게 됩니다. // before await Promise.resolve(console.log("Inkoop")) // SyntaxError: await is only valid in async function const print = async () => { await Promise.resolve(console.log("Inkoop")) } prin..
-
Javascript ES12 문법정리JS & TS 2023. 12. 1. 16:49
1. Numeric Separators ES12에서는 숫자 구분자를 도입하여 숫자 리터럴 간에 밑줄(_)을 삽입하여 가독성을 향상할 수 있습니다. 이 기능은 코드 내에서 큰 숫자 값을 더 읽기 쉽게 만들어줍니다. 숫자 구분자 도입으로 코드 가독성이 크게 향상되며, 특히 많은 숫자 상수나 값을 다룰 때 유용합니다. // before const billion = 1000000000; const trillion = 1000000000000; // ES12 const billion = 1_000_000_000; const trillion = 1_000_000_000_000; 2. Logical Assignment Operators ES12에서는 논리 할당 연산자(||=, &&=,??=)를 도입하여 논리 연산과 ..
-
Javascript ES11 문법정리JS & TS 2023. 11. 24. 17:35
ES11이라고도 알려진 ECMAScript 2020은 JavaScript 언어에 몇 가지 새로운 기능과 개선 사항을 도입했습니다. 개인적으로 정말 좋아하는 기능들이 생긴 버전이라 기억에 남고 지금도 자주 사용하는 기능들이 많은 버전입니다. 1. Optional Chaining Operator (?.) 선택적 연결 연산자(?.)는 각 수준의 존재를 명시적으로 확인할 필요 없이 객체의 중첩 속성에 액세스 하는 간결한 방법을 제공합니다. 널('null' 또는 '정의되지 않음') 값이 발견되면 평가가 중단됩니다. // 이전 if (object && object.property && object.property.nestedProperty) { const value = object.property.nestedPro..