객체

TypeScript에서 enum 사용하기: const enum vs as const 객체

TypeScript에서 열거형(enum)은 선호되지 않는다. 어째서일까? TypeScript에서 열거형의 데이터를 표현하는 방법은 여러 가지가 있지만, 최신 버전의 TypeScript에서는 as const 객체를 사용하는 것이 일반적이다. 다만, 다른 언어에서 많이 사용되는 enum 방식의 사용은 공식문서에서도 추천되지 않는데, 이번 글에서는 이 두 가지 방법의 차이와 각각의 장단점을 알아보고 어째서 enum이 추천되지 않는 방식인지 알아보았다. const enum과 일반 enum의 차이 🙌 enum을 표현하는데도 그냥 enum과 const enum이 존재하며 차이점이 있다. 일반 enum은 컴파일된 JavaScript 코드에서도 그대로 존재하며(번들링 사이즈 증가), reverse mapping을 지원..

자바스크립트 동적으로 객체 생성하기 (Computed Property Names)

자바스크립트에서 데이터를 나타내는데 많이 사용되는 객체는 때에 따라서 수정되야 하고 동적으로 생성되야 한다. 이런 경우에, 유용하게 사용될 수 있는 문법들을 정리해보기로 하였다. Computed Property Names ⛅️ 객체에서 프로퍼티의 이름을 동적으로 생성할 수 있게 해주는 문법이다. 대괄호 안에 변수를 넣음으로써, 해당 변수의 값이 프로퍼티의 이름이 되게 한다. const name = "park"; const target = false; const obj = { [name]: target, } console.log(obj); // {park: false} 객체 확장하기 기존에 존재하는 객체를 바탕으로 새롭게 더 많은 데이터, 프로퍼티를 가지는 객체를 생성하게 되야 하는 경우도 있다. 혹은 여..

Proxy 사용하기

proxy를 사용하면 기존 이벤트를 가로채 다른 함수를 실행할 수 있다. 간단한 예를 보면, 다음과 같다. const target = { a: "a_word", b: "b_word", } const handler = { get(target, prop, receiver) { switch(prop){ case 'a': return "A"; case 'b': return "B"; } } } const proxy = new Proxy(target, handler); console.log(proxy.a, proxy.b); 기존의 객체를 가로채어 다른 값을 return하게 만든다. handler가 기존의 실행을 가로채어 실행되는 함수로, switch나 if문 등을 사용하여 특정 key값의 객체값만 다른 값으로 re..

JSON과 JSON.stringify, JSON.parse

JSON(JavaScript Object Notation)은 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. 오늘날에는 자바나 파이썬과 같은 언어에서도 많이 사용된다. // JSON 예시 { "text": "Hi, I am human", "readonly": true, "creadtedYear": 2019 } JSON은 자바스크립트의 객체와 유사한 형태를 띄고 있지만, JSON에는 또 다른 규칙들이 있다. 🥙 자바스크립트 객체에서 키는 따옴표 없이 쓸 수 있지만, JSON에서는 반드시 큰 따옴표를 붙여야 한다. 🥨 자바스크립트 객체에서는 문자열의 값에 '나 "나 `와 같이 어떠한 형태의 따옴표도 사용할 수 있지만, JSON에서는 반드시 큰따옴표로 감싸야 한다. 🍝 깊은 복사를 할 때에도 사용될 수 있..