알아야 할 6가지 JavaScript 기능
게시 됨: 2020-09-241년 조금 전에 우리는 구텐베르크에서 편안하게 개발하기 위해 알아야 할 5가지 "새로운" JavaScript 기능에 대해 이야기했습니다. 거기에서 우리는 객체와 배열 구조 해제가 무엇인지, 화살표 함수를 만드는 방법, 스프레드 및 나머지 연산자가 무엇인지 등을 배웠습니다. 다행스럽게도 JavaScript에는 익숙해지면 더 이해하기 쉽고 간결한 코드를 작성하는 데 도움이 되는 많은 기능이 있습니다.
오늘은 정말 멋진 JavaScript 기능 6가지를 보여 드리겠습니다. 연산자, 변수 범위 지정, 약속, 비동기 함수... 모두 배울 준비가 되셨습니까?
#1 연산자를 사용하는 JavaScript의 선택적 연결 ?.
선택적 연결 연산자를 사용하면 객체가 undefined 거나 null 일 가능성이 있는 경우 객체의 속성에 간단하게 액세스할 수 있습니다. 예를 들어 다음과 같은 개체가 있다고 가정합니다.
const toni = { name: 'Antonio', details: { age: 35, }, }; toni 의 age 에 액세스하려면 먼저 details 속성에 액세스한 다음 age 에 액세스해야 합니다.
function getAge( person ) { return person.details.age; } 우리가 이전 함수에서 가지고 있는 문제는 그것이 당신에게 새로운 것이 아니라고 확신합니다. 우리가 그 person 이 가질 것으로 기대하는 속성이 항상 거기에 있지는 않다는 것입니다. 즉, person 또는 person.details 가 undefined 인 경우 위의 함수는 유형 오류를 트리거합니다.
getAge( toni ); // 35 getAge( {} ); // Uncaught TypeError: person.details is undefined일반적으로 몇 가지 안전 장치를 추가하여 이 문제를 해결합니다.
function getAge( person ) { if ( ! person ) { return; } if ( ! person.details ) { return; } return person.details.age; } getAge( toni ); // 35 getAge( {} ); // undefined 명확하게 수정합니다. 불행히도, 결과 함수는 더 복잡하고 정말로 중요한 것에서 우리의 주의를 흐리게 하는 많은 시끄러운 코드를 가지고 있습니다. 궤도로 돌아가 더 간단한 방법으로 솔루션을 수정하려면 선택적 연결 연산자 ?. :
function getAge( person ) { return person?.details?.age; } getAge( toni ); // 35 getAge( {} ); // undefined 기본적으로 이 연산자는 undefined 되지 않았거나 null 이 아닌 한 각 속성에 액세스할 수 있습니다. 존재하지 않는 객체의 속성에 액세스하려고 시도하는 것을 감지하자마자 undefined 를 반환합니다.
# 2 Nullish 병합 연산자( ?? )
JavaScript에서 다음 연산자를 사용하여 변수에 기본값을 설정하는 것은 매우 쉽습니다. || , 오른쪽? 잘못된! 우리 모두는 이것을했지만주의하지 않으면 예기치 않은 부작용이 발생할 수 있습니다 ...
예를 들어 Redux 저장소에 사용자가 설정한 값을 검색할 수 있는 선택기가 있다고 가정합니다. 사용자가 아직 값을 지정하지 않은 경우(즉, 값이 undefined 인 경우) || :
function getValue( state ) { return state.value || 5; }이제 사용자가 하나 이상의 값을 설정한 후 이전 함수로 얻을 수 있는 몇 가지 예를 살펴보겠습니다.
// No setValue( x )... getValue(); // 5 setValue( 2 ); getValue(); // 2 setValue( 1 ); getValue(); // 1 setValue( 0 ); getValue(); // 5 이런! 우리가 마지막 케이스에 도달할 때까지 모든 것이 잘 작동했습니다! 분명히 사용자가 값을 0 으로 설정하면 함수의 결과는 5 가 됩니다. 왜요? 글쎄요, 그 근거는 꽤 모호합니다. x||y 는 x 가 "거짓" 값인 경우에만 y 를 반환합니다. undefined 는 거짓 값이므로 일반적으로 잘 작동합니다. 그러나 예를 들어 false 또는 0 도 마찬가지입니다.
실제로는 기본값이 없을 때만 default 을 설정하고 싶었습니다. 따라서 값이 있는지 여부를 확인하기 위해 안전 장치를 추가할 수 있습니다.
function getValue( state ) { if ( undefined === state.value ) return 5; return state.value; }그리고 기분이 좋다면 삼항 연산자를 사용하여 작성할 수도 있습니다.
function getValue( state ) { return undefined === state.value ? 5 : state.value; } 그러나 다시 한 번 두 솔루션 모두 코드를 불필요하게 복잡하게 만듭니다. 변수에 기본값을 할당하려면 nullish 병합 연산자 ?? 를 사용해야 합니다. , 왼쪽 부분이 null 이거나 undefined 경우에만 오른쪽 부분을 반환합니다.
function getValue( state ) { return state.value ?? 5; }그리고 놀랍게도, 결과는 정확히 우리가 원했던 것입니다.
// No setValue( x )... getValue(); // 5 setValue( 2 ); getValue(); // 2 setValue( 1 ); getValue(); // 1 setValue( 0 ); getValue(); // 0아, 그런데 이 연산자를 할당과 함께 사용할 수 있습니다. 예를 들어 다음과 같습니다.
value = value ?? 5;다음과 같습니다.
value ??= 5;#3 프라미스와 비동기 함수
Promise는 비동기 작업, 즉 결과를 즉시 사용할 수 없는 작업으로 작업할 때 소스 코드를 단순화할 수 있도록 하는 JavaScript로 구현된 메커니즘입니다. 예를 들어 서버에서 데이터를 검색하려는 경우 서버가 요청을 수신하고 처리하고 응답을 다시 보낼 때까지 기다려야 하므로 응답이 즉각적이지 않을 것이 분명합니다.
이전 JavaScript 버전 및 라이브러리(예: jQuery)에서는 이를 콜백으로 구현하는 데 사용했습니다. 아이디어는 매우 간단했습니다. 요청 자체와 함께 응답을 사용할 수 있게 되면 호출되어야 하는 함수(콜백)를 정의합니다. 이렇게 하면 비동기 작업(즉, 서버에서 데이터 검색)이 완료되면 라이브러리가 함수를 호출하고 논리가 다시 시작됩니다.
jQuery.ajax( { url: 'https://server.com/wp-json/wp/users/1', success: ( user ) => { console.log( user ); }, } );하나의 격리된 요청만 트리거하는 경우 이 솔루션은 매우 우아하고 편리합니다. 그러나 더 많은 요청을 수행해야 하는 즉시 상황이 더러워집니다. 예를 들어, 두 명의 다른 사용자를 요청하려면 콜백을 중첩해야 합니다.
jQuery.ajax( { url: 'https://server.com/wp-json/wp/v2/users/1', success: ( user1 ) => { jQuery.ajax( { url: 'https://server.com/wp-json/wp/v2/users/2', success: ( user2 ) => { console.log( user1, user2 ); }, } ); }, } );Promise는 이 문제에 대한 솔루션입니다. 특정 결과를 얻는 것이 즉각적이지 않은 경우(예: 서버에서 무언가를 검색할 때) JavaScript Promise를 즉시 반환할 수 있습니다. 이 객체는 실제 값의 래퍼이며 해당 값이 미래의 어느 시점에서 사용 가능하다는 "약속"을 의미합니다.
예를 들어, 약속을 사용하여 첫 번째 스니펫을 다시 작성하면 다음과 같습니다.
const promise = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/1', } ); promise.then( ( user ) => console.log( user ) ); 보시다시피 wp.apiFetch 는 서버에서 사용자 1을 가져와야 하지만 바로 결과를 제공합니다. 그러나 결과는 사용자 자신이 아니라 요청이 완료되면 사용자에게 해결될 약속입니다. 따라서 우리가 해야 할 일은 프라미스가 해결될 때 응답을 처리할 콜백을 작성하는 것입니다.
이제 이것이 우리가 이전에 했던 것보다 그렇게 어렵지 않다고 생각할 수도 있습니다. 그렇죠? 결국, 우리는 여전히 콜백을 사용하고 있지만… 여러 요청을 결합하기 시작하면 이것이 얼마나 유용한지 알 수 있습니다.
const promise1 = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/1', } ); const promise2 = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/2', } ); Promise.all( [ promise1, promise2 ] ).then( ( [ user1, user2 ] ) => console.log( user1, user2 ); ); Promise를 사용하여 사용자 1과 2를 검색하는 두 개의 병렬 요청을 시작할 수 있었고 Promise.all 을 사용하여 두 약속이 모두 해결될 때까지 기다릴 수 있었습니다. 중첩된 콜백이 포함된 스파게티 코드가 없습니다.
글쎄요, 약속의 위대한 일은 아직 오지 않았습니다. 일부 구문 설탕을 사용하여 JavaScript 약속과 함께 작업하고 동기식으로 보이는 비동기식 코드를 작성할 수 있습니다. async 키워드를 사용하여 비동기 함수를 정의하기만 하면 일이 훨씬 쉬워집니다.
async function logTwoUsers( id1, id2 ) { const user1 = await wp.apiFetch( { url: '…' + id1 } ); const user2 = await wp.apiFetch( { url: '…' + id2 } ); console.log( user1, user2 ); } 비동기 함수 내에서 비동기 작업을 호출할 때마다 await 키워드를 사용하여 결과를 기다릴 수 있습니다. 명심해야 할 유일한 것은 async 함수를 정의할 때 그 결과는 항상 약속이라는 것입니다.
async function getNumberFive() { return 5; } const p = getNumberFive(); // a promise p.then( console.log ); // prints "5" #4 let 과 const 를 사용할 때의 변수 범위
이미 알고 계시겠지만 이제 let 및 const 키워드를 사용하여 변수를 선언할 수 있습니다. 전자는 변수를 정의하고 후자는 상수를 정의합니다.
let x = 1; console.log( x ); // 1 x = 2; console.log( x ); // 2 const y = 1; console.log( y ); // 1 y = 2; // Uncaught TypeError: invalid assignment to const 'y' console.log( y ); // 1 두 키워드 모두 상수가 아닌 변수를 선언할 수 있기 때문에 let 과 var 가 같은 것이라고 생각할 수도 있습니다. 그러나 그들 사이에는 상당한 차이가 있습니다. 바로 범위입니다. let 및 const 를 사용하면 변수의 범위는 변수가 정의된 블록입니다. var 에서는 전체 기능입니다.
function fn() { if ( true ) { var x = 1; let y = 2; const z = 3; }//end if console.log( x ); // 1 console.log( y ); // Uncaught ReferenceError: y is not defined console.log( z ); // Uncaught ReferenceError: z is not defined } # 5 JSON.parse 사용 시 데이터 변환
JSON.parse 함수는 JSON 문자열을 구문 분석하고 JavaScript 객체를 빌드합니다. 예를 들어:
const x = JSON.parse( '{"x":1,"a":[1,2,3]}' ); // Object { x: 1, a: [ 1, 2, 3 ] } 대부분의 사람들이 그것에 대해 모르는 것은 reviver 라는 두 번째 인수를 지원한다는 것입니다. 이 매개변수는 구문 분석 중인 각 요소에 대해 실행되는 함수로, 원하는 대로 값을 조작할 수 있습니다. 예를 들어 다음과 같은 JSON 문자열을 상상해 보십시오.
const json = '{"name":"David","birthday":"1985-12-01T10:00:00.000Z"}'; JSON.parse 를 있는 그대로 사용하면 name 과 birthday 라는 두 개의 문자열 속성이 있는 객체를 생성합니다. 그러나 JSON.parse 에 reviver 기능을 제공하면 birthday 이 Date 로 구문 분석되는지 확인할 수 있습니다.
const user = JSON.parse( json, ( key, value ) => 'birthday' === key ? new Date( value ) : value ) # 6 Undesrcore 문자를 사용하는 소스 코드의 숫자 구분 기호( _ )
오늘의 마지막 팁은 숫자 구분 기호입니다. 사람이 이해하기 쉽게 숫자를 쓸 수 있도록 하는 제안(현재 4단계)이 있습니다. 예를 들어 다음 숫자가 얼마나 큰지 알 수 있습니까?
10000000000 2189719.25 천 단위 구분 기호를 사용할 수만 있다면 훨씬 더 해석하기 쉬울 것입니다! 이것이 바로 밑줄 _ 을 사용하여 할 수 있는 일입니다.
10_000_000_000 2_189_719.25요약
JavaScript에 포함된 모든 새로운 도구와 기능에 익숙해지면 더 나은 JavaScript 코드를 작성할 수 있습니다. 오늘 우리는 이 프로그래밍 언어로 가능한 것에 대한 몇 가지 예를 보았습니다. 새로운 것을 배웠기를 바라며, 마음에 들면 동료들과 공유하는 것을 잊지 마십시오. 곧 봐요!
Unsplash에서 Sam Dan Truong의 추천 이미지.