구텐베르크에서 개발하기 위해 알아야 할 5가지 JavaScript 기능

2016년 Matt Mullenweg는 다음과 같이 말했습니다.

몇 가지 숙제를 드리겠습니다. JavaScript는 웹의 미래이기 때문에 깊이(...) 배우십시오.

Matt Mullenweg(YouTube에서)

당신이 3년 전에 그의 조언을 따랐는지 모르겠지만, 당신이 하지 않았다면 더 이상 미룰 수 없습니다. 블록 편집기의 공식 릴리스로 인해 많은 개발자가 JavaScript에 익숙해졌습니다. 언어는 WordPress 내에서 점점 더 관련성이 높아지고 있으며, 뒤쳐지지 않으려면 해당 언어로 기술을 향상시켜야 합니다.

과거에 jQuery와 같은 라이브러리 없이 바닐라 JavaScript를 사용하여 달성할 수 있는 것에 대한 게시물을 작성했습니다. 오늘 저는 한 걸음 더 나아가 JavaScript의 새 버전에 포함되어 있고 처음 봤을 때 충격적인 몇 가지 참신함을 설명하고자 합니다. 나는 그것들을 아는 것이 중요하다고 생각합니다. 왜냐하면 그것들은 모든 새로운 JavaScript 프로젝트(물론 Gutenberg 포함)에 존재하기 때문입니다.

구텐베르크와 함께 자바스크립트를 배워봅시다!

#1 – 객체 및 배열의 ​​구조화

Gutenberg에서 단락을 편집하는 인터페이스가 어떻게 작동하는지 보고 싶다고 가정해 봅시다. 구텐베르크에 대한 이전 게시물을 읽었다면 관련 블록의 edit 구성 요소를 살펴봐야 한다는 것을 알고 있습니다. 우리의 경우 이 구성 요소는 ParagraphBlock 이며 렌더링 메서드인 127행에서 가장 먼저 찾을 수 있는 내용은 다음과 같습니다.

이게 다 뭐야? 음, 더 쉬운 것부터 시작하겠습니다. 다음과 같은 객체가 있다고 상상해보십시오.

객체와 배열을 구조화하면 배열의 값이나 객체의 속성을 고유한 변수로 압축 해제할 수 있습니다.

단 한 번의 진술로 우리는 post 의 id , title , content 을 복구할 수 있었습니다. 그리고 이것이 바로 구텐베르크가 첫 번째 스니펫에서 수행한 작업입니다. this.props 의 attributes 개체, setAttributes 함수, isRTL 속성 등을 가져왔습니다.

조금 더 혼란스럽긴 하지만 똑같이 흥미로운 것은 중첩된 개체에서 속성을 추출할 수 있다는 것입니다. 즉, 다음과 같은 객체에서 시작합니다.

post 에서 값을 검색할 수 있을 뿐만 아니라 author 의 id 또는 name 과 같은 중첩된 객체의 값을 검색할 수 있습니다.

이제 주의하십시오. 객체를 구조화할 때마다 생성하는 변수는 가져오는 속성과 동일한 이름을 갖습니다. 이것은 다음과 같은 질문을 던집니다. 서로 다른 중첩 객체에서 여러 id 속성을 복구하려면 어떻게 될까요? 예를 들어, 우리의 경우 post 과 중첩된 객체 author 모두 id 를 가지고 있으므로…

이 두 값을 꺼낼 수 있습니까? 솔루션은 별칭에 있습니다.

즉, 가져오려는 속성(예: author.id )과 해당 값을 저장할 변수의 이름( authorId )을 한 번에 지정할 수 있습니다.

마지막으로, 구조 분해는 배열에서도 작동한다는 점을 알려 드리겠습니다.

뿐만 아니라 기능 매개변수. 즉, 함수의 매개변수 중 하나가 객체인 경우 함수 정의 자체에서 이를 구조화할 수 있습니다.

꽤 편리하죠?

#2 – 화살표 기능

또 다른 꽤 일반적인 예입니다. 구텐베르크 이미지 블록의 캡션을 보면 693행에 다음이 표시됩니다.

괄호 안의 value 은 무엇입니까? 화살은 왜 있는 걸까요? 내부에 중괄호가 있는 setAttributes 는 무엇입니까? 아아!!

글쎄, 이것을 차근차근 복호화하자. => 와 같은 화살표가 보이면 화살표 함수를 만난 것입니다. 화살표 함수는 클래식 함수와 매우 유사할 수 있지만 약간 다른 구문을 사용합니다.

화살표 함수의 주요 이점은 코드를 훨씬 더 간결하게 만들어 더욱 단순화할 수 있다는 것입니다. 예를 들어, 함수에 단일 명령어가 있는 경우 함수가 유일한 명령문을 평가한 결과를 자동으로 반환하기 때문에 중괄호와 return 키워드를 저장할 수 있습니다.

우리가 만들 수 있는 또 다른 단순화는 인수 목록의 괄호입니다. 단일 매개변수가 있는 함수를 작성하는 경우 괄호는 선택 사항이 됩니다.

#3 – 스프레드 및 나머지 연산자

단락 블록으로 돌아가서 64행을 살펴보세요.

이런 젠장?

스프레드 연산자를 소개하겠습니다. ... .

Spread 구문을 사용하면 0개 이상의 인수(함수 호출의 경우) 또는 요소(배열 리터럴의 경우)가 예상되는 위치에서 배열 표현식 또는 문자열과 같은 이터러블을 확장하거나 0개 이상의 위치에서 객체 표현식을 확장할 수 있습니다. 키-값 쌍(객체 리터럴의 경우)이 예상됩니다.

가장 간단한 예부터 시작하겠습니다. 특정 수의 요소가 있는 배열이 있고 이를 다른 배열에 넣고 싶다고 가정합니다. 다음을 통해 이를 달성할 수 있습니다.

그것으로 우리는 한 배열( list )의 요소를 다른 배열( result ) 내에서 "확장"(따라서 연산자 이름)합니다.

이것은 객체에서도 작동합니다:

이제 다음 예를 보십시오(이 섹션을 열 때 사용한 Gutenberg 예의 복사본).

공통 속성을 가진 두 개체를 확장하면 결과 개체에는 두 개체의 속성 결합이 포함되고 모든 "반복" 속성에 대해 오른쪽 개체 값이 포함됩니다. 따라서 예를 들어 두 객체에서 반복되는 title 속성은 newAttributes 객체의 값을 포함하는 반면 다른 속성(한편으로는 author , 다른 한편으로는 words )은 포함할 수 있는 유일한 값으로 결과에 나타납니다. .

#4 – 템플릿 리터럴

템플릿 리터럴은 구텐베르크에서 널리 사용됩니다. 다음 index.js , 133행에서 예를 볼 수 있습니다.

또는 더 복잡한 인라인 136:

템플릿 리터럴은 포함된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄 문자열과 문자열 보간 기능을 함께 사용할 수 있습니다. ES2015 사양의 이전 버전에서는 "템플릿 문자열"이라고 했습니다. 여기에 우리가 방금 본 첫 번째 것과 유사한 또 다른 예가 있습니다.

자, 두 번째 예에서 무슨 일이 일어났습니까? 기본적으로 우리는 "이름"이 동적인 속성을 가진 객체를 만들고 있습니다(일부는 변수를 사용하고 다른 일부는 템플릿 리터럴을 사용함). 더 짧은 예를 들어 보겠습니다.

생각보다 쉽죠?

#5 – 잠시 동안 안녕

마지막으로 배열 작업에 매우 유용하고 이미 익숙해야 하는 몇 가지 함수로 이 게시물을 끝내고 싶습니다. 둘 다 예를 들어 구텐베르크 기둥 블록에서 찾을 수 있습니다. 실제로 저는 map (136행)과 reduce (119행)에 대해 이야기하고 있습니다. 각각의 용도와 사용 방법을 살펴보겠습니다.

map 메소드는 호출 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 새 배열을 생성합니다.

기본적으로 배열의 모든 요소( for 문)를 실행하고 각 요소(클래식 for 의 "본문")에 함수를 적용하는 방법입니다.

reduce 메서드는 map 과 매우 유사하지만 원래 요소에 함수를 적용한 결과가 요소인 배열을 반환하는 대신 단일 값을 반환합니다. 즉, 누산기와 배열의 각 값(왼쪽에서 오른쪽으로)에 함수를 적용하여 단일 값으로 줄이는 방법입니다. 예를 들어:

마무리

보시다시피 새 버전의 JavaScript에는 코드를 보다 효율적이고 편안하게 작성할 수 있는 구성이 추가되지만 처음에는 구문이 혼동될 수 있습니다. 오늘의 게시물이 JavaScript의 새로운 기능과 JavaScript의 새로운 구조 및 기능을 사용하는 방법을 이해하는 데 도움이 되었기를 바랍니다.

JavaScript가 발전하는 방식이 정말 마음에 듭니다. JavaScript를 사용하면 더 좋고 읽기 쉬운 코드를 작성할 수 있기 때문입니다(물론 읽는 방법을 알게 되면). 어떻게 생각해? 이 게시물을 읽은 후 이미 "JavaScript를 깊이 배우기"에 열중하고 있습니까?

Unsplash 에서 Ross Findon 의 추천 이미지 .