dev.to 의 Hirwa Blessing님 이 작성한 8 neat Javascript tricks you didn’t know in 4 minutes. 번역 자료입니다. 번역에 문제가 있다면 댓글 달아주시구요. 원문을 보시기를 추천드립니다

소개

Javascript는 특히 웹 개발에서 동적 웹 사이트 콘텐츠, 즉 웹 페이지를 수동으로 다시 로드하지 않고도 화면에서 이동, 새로 고침과 변경되는 모든 것을 생성하고 제어하는 데 사용되는 강력한 프로그래밍 언어입니다. 지난 5년동안 자바스크립트는 단순함과 많은 패키지로 인해 유명해졌습니다. 그러니 더 이상 고민하지 않고 들어가 보겠습니다.

1. string(문자) 에서 number(숫자)로

+ 기호만 사용하여 string(문자열)을 number(숫자)로 쉽게 변환 할 수 있습니다. + 연산자를 사용하는 것이 훨씬 더 깔끔하고 쉽습니다.

my_string = "123";
console.log(+my_string);
// 123

my_string = "amazing";
console.log(+my_string);
// NaN

위의 예에서 볼 수 있듯이 문자열 숫자(string number)에서만 작동합니다.

2. number(숫자)에서 string(문자)로

JavaScript 에 내장된toString()를 사용하지 않고 더 간단한 방법으로 숫자를 문자열로 변환 할 수 있습니다.

이걸 보세요:

let converted_number = 5 + "";
console.log(converted_number);
// 5

console.log(typeof converted_number); 
// string

3. 고유값 얻기

배열에서 고유값을 추출 할 수 있습니다. 단순히 Set object 와 Spread 오퍼레이션를 사용하여 배열에서 중복 값을 제거 할 수 있습니다.

간단한 데모입니다.

let array_values = [1, 3, 3, 4, 5, 6, 6, 6,8, 4, 1]
let unique_values = [...new Set(array_values )];
console.log(unique_values );
// [1,3, 4, 5, 6, 8]

4. Replace all

일반적으로 string.replace 메소드는 처음 사용할 때 대체됩니다. 자바 스크립트의 정규식은 문자열의 특정 콘텐츠를 대체하는데 사용할 수 있습니다.

이 예에서는 전역 정규식(regex) /g를 사용하여 문자열의 모든 항목을 대체합니다.

let replace_string = "Visit stunnitysoft. stunnitysoft is a software company";
console.log(replace_string.replace(/stunnity/, "Micro")); 
// "Visit Microsoft. stunnitysoft is a software company"
console.log(replace_string.replace(/stunnity/g, "Micro")); 
// "Visit Microsoft. Microsoft is a software company"

5. Optional Chaining

옵셔널 체인 연산자 (?.)를 사용하면 체인의 각 참조가 유효한지 명시적으로 유효성을 검사 할 필요없이 연결된 객체 체인 내 깊은 곳에있는 속성 값을 읽을 수 있습니다.

a?.b라는 표현을 생각해 봅시다.

이 표현식은 a가 null이 아니고 이나 undefined가 아닌 경우 a.b로 평가되고 그렇지 않으면 undefined로 평가됩니다.

a?.b?.c와 같이 여러 번 연결할 수도 있습니다.

a가 undefined 나 null인 경우 이 표현식은 undefined로 평가됩니다. 그렇지 않으면 b가 undefined 또는 null 인 표현식은 undefined로 평가됩니다. 그렇지 않으면 a.b.c로 평가됩니다.

구문

obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)

6. Nullish 병합 오퍼레이터(Nullish Coalescing Operator)

nullish 병합 오퍼레이터 (??)는 왼쪽의 피연산자가 null이거나 undefined 인 경우 오른쪽(right-hand) 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다.

표현식 a ?? b 를 봅시다. a가 null이거나 undefined 인 경우 b 를 평가하며 그렇지 않으면 a로 평가합니다.

7. 로지컬 AND (&&) 과 로지컬 OR (||) 오퍼레이터

로지컬 AND (&&) 오퍼레이터

b와 c가 표현식 인 다음 표현식이 있다고 가정해 보겠습니다.

b && c

b가 truthy인 경우에만 c의 값으로 평가되고, 그렇지 않으면 b의 값으로 평가됩니다.

  • b가 falsy이면 c도 평가되지 않습니다.
  • 이를 단락 평가(short-circuit evaluation)라고합니다.
  • React를 사용하는 동안 매우 유용합니다.

로지컬 OR (||) 오퍼레이터

b와 c 의 표현식이 있다고 가정해 보겠습니다.

b || c

b가 truethy이면 b 값으로 평가되고 그렇지 않으면 c 값으로 평가됩니다.

  • 단락 평가(Short-circuit)도 여기에서 발생합니다.
  • b가 true이면 표현식c는 평가조차되지 않습니다.
  • React에서도 자주 사용됩니다.

8. length를 사용하여 배열 크기 조정(resize) 및 비우기(emptying)

javascript에서는 length라는 기본 제공 방법을 재정의하고 사용자가 선택한 값을 할당할 수 있습니다.

다음 예를 살펴 보겠습니다:

let array_values= [1, 2, 3, 4, 5, 6, 7, 8];  
console.log(array_values.length); 
// 8  
array_values.length = 5;  
console.log(array_values.length); 
// 5  
console.log(array_values); 
// [1, 2, 3, 4, 5]

배열 비우기

let array_values= [1, 2, 3, 4, 5, 6, 7,8]; 
console.log(array_values.length); 
// 8  
array_values.length = 0;   
console.log(array_values.length); 
// 0 
console.log(array_values); 
// []

참고 : length를 0으로 설정하면 메모리 누수(memory leak)가 발생할 수 있으므로 권장되지 않습니다. 메모리에서 배열의 오브젝트를 정리하려면 명시적으로 제거해야합니다.

결론

우리는 많은 코드를 작성하지 않고도 강력한 작업을 수행했습니다. 계속해서 이런 자바스크립트 기술을 사용하면 코드를 더 깨끗하게 유지 관리 할 수 있습니다.

너무 길었는데 마지막 줄까지 기다려 줘서 고마웠어요 😊. 이 글이 도움이 되었기를 바라며, 만약 그렇다면 유용하다고 생각되면 다른 사람들과 공유 해주세요. Twitter 또는 Linkedin에서 자유롭게 제안하거나 메시지를 보내주세요.