js 꿀팁

생각보다 사소하지만 사소한 차이가 큰 변화를 만들어내는 법.
코딩 하면서 적용했던 기술들에 대해서 정리해보려한다.

template literal

backtick() 를 사용해서 문자열을 표현한 것을 template literal` 이라고 한다

computed property name ( [func()]: 1 )

let key = "name";
let obj = {
  [key] : "cha"
}

// obj = { name: "cha" }

위 처럼 하는게 귀찮다면 computed property name 를 고려해볼 법하다

function func() {
  return 'hello';
}
let obj = {
  [func()] : 'hi'
}

computed property name

비구조화 할당

const { a } = { a: '1' };

이건 쉽다. a 키 값에 해당하는 value 를 가져온다. 그렇다면 아래도 가능하다

const { a: map } = { a: { mapKey: 'mapValue' } };

이럴 경우 map 에 { mapKey: 'mapValue' } 이 할당된다.

[0] vs at(0)

배열은 코딩하면서 단연 자주 마주치는 친구이다. 특정 배열의 index 에 접근하는 일은 너무나도 자주 일어난다. 이때 흔히 array[0] 를 사용하는데, 자칫 값이 undefined 일 경우 에러를 마주하게 된다.
이는 의도된 행위일 수도 있지만 아무것도 없더라도 그냥 지나갔으면 좋겠는 경우들도 있다. 이때 사용 할 수 있는 것이 array.at(0) 이다. 이렇게 사용하면 에러를 던지지 않고 그냥 넘어간다.

Dot notation vs Bracket Notation

array.a vs array['a'] 무슨 차이가 있을까?
점 표기법의 경우, 유효한 식별자에서만 사용이 가능하다.

유효한 식별자란?
공백이 없고 숫자로 시작하지 않으며 특수 문자를 포함하지 않는 이름을 의미한다

반면에 대괄호 표기법은 어떤 문자열이든 속성 이름으로 사용 가능해 더 범용적으로 사용 될 수 있다.

Promise.all

const [a,b,c] = await Promise.all([ promise1, promise2, promise3 ]);

!!

const a = 'hello'

return !!a;

a 가 존재하면 true
a 가 존재하지 않으면 false

&&

&& 앞의 값이 참일 경우 뒤의 값을 반환,
앞의 값이 거짓일 경우 false 를 반환한다.

true && { result: true }

false && { result: false }

Object.assign(target, resource)

여기서 Object.assign(target, source) 함수는 source 객체의 속성들을 target 객체로 복사하는 역할을 한다. 이를 활용하여 생성자가 받은 attribute 객체의 속성들을 this 객체에 복사하여 초기화한다.

class Example {
  name: string;
  age: number;

  constructor(attribute: Example) {
    return Object.assign(this, attribute);
  }
}

! ( non-null-assertion operator )

# non-null-assertion operator
function (token!) {}

객체가 null이 아님을 단정하고, 해당 객체의 token 필드를 접근하겠다는 것을 의미한다.

+ ( 단항 플러스 연산자 )

+ 기호는 TypeScript (또는 JavaScript)에서 사용되는 단항 플러스 연산자이다. 이 연산자는 문자열을 숫자로 강제 변환하는 데 사용된다

_param

const func( _id, name ) {
	...
}

위와 같은 함수들을 많이 봤을 것이다. _id 와 같이 _ 를 붙이는 변수는 주로 쓰이지 않는 변수라는 것을 나타낸다.

padStart

우리가 흔히 달력을 다룰때 10 이하 ( 1,2,3 ... ) 을 01,02,03 과 같이 다루고 싶은 경우가 생각보다 많다. 이때 유용하게 사용 할 수 있는 것이 padStart 이다.

const str1 = '5';

console.log(str1.padStart(2, '0'));
// Expected output: "05"

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

hasOwnProperty

  filterProperties<T>(obj: any, type: T): T {
    const result: any = {};
    for (const key in type) {
      if (obj.hasOwnProperty(key)) {
        result[key] = obj[key];
      }
    }
    return result;
  }