React, Vue, Svelt 와 같은 프레임워크를 이용하여 보다 더 편리한 프론트엔드 개발이 가능해졌지만, 그 기반에는 항상 자바스크립트가 있다. 자바스크립트는 초기 비개발자를 위한 언어를 모토로 생성되었기 때문에 쉽게 사용할 수 있지만, 그로 인해 생기는 불편한 점이 있었다. ⏤ 예를 들면 var 를 이용하여 중복 선언과 호이스팅을 통해 선언 전에 사용이 가능했지만, ( 오류를 저하시켜야 비 개발자들이 잘 사용할 수 있을 것이란 믿음에 ) 실제로 개발하다 보니 디버깅이 어려워서 let, const 를 해결책으로 발전 ⏤ 그래서 자바스크립트를 꾸준히 발전시키는 사람들이 있다. TC39 문서를 통해서 자바스크립트가 변화하는 동향들을 확인할 수 있다. (Proposal 칸을 확인해야 최종적으로 자바스크립트 신문법에 포함되는 것들을 확인할 수 있다.)
2023년 자바스크립트의 최신 동향
01, Array find from Last
Array 에서 index 값 혹은 value 값을 찾는 방법은 여러가지가 존재한다.
- Array.prototype.indexOf ⏤ 검색하는 value (인자) 가 배열 안에 있으면 index, 없으면 -1 return
- Array.prototype.lastIndexOf ⏤ 배열에서 주어질 수 있는 마지막 index 값이 존재하면 index, 없으면 -1 return
- const arr = ['yarn', 'dev', 'yarn', 'run'] 이라는 배열이 존재한다.
- arr.lastIndexOf('yarn') 을 하면 yarn 이 나올 수 있는 마지막 index 값 (= 2) 가 출력된다.
- 만약 두 번째 인자에 검색할 index 범위를 설정해주면 arr.lastIndexOf('yarn', 1) , index=1 까지 검색을 하는 것이니까 마지막 yarn 의 위치 ( =0 ) 이 출력된다.
- Arrary.prototype.find ⏤ 함수를 통해 만족하는 첫 번째 요소 value 값을 가져온다.
- Array.prototype.findIndex ⏤ 함수를 통해 만족하는 첫 번째 요소 index 값을 가져온다.
const arr=[1, 2, 3, 4]
const findResult=arr.find(item=> item>3)
console.log(findResult) // 4
const findIndexOfResult=arr.findIndexOf(item=> item>3)
console.log(findIndexOfResult) // 3 (숫자 4가 위치한 index)
index와 value를 찾는 많은 함수들이 제공하고 있지만, 모두 첫번째=>마지막을 검색하는 로직이지 마지막 => 첫번째를 검색하는 함수는 존재하지 않는다. 불가능한 일은 아니다.
const arr=[1, 2, 3, 4]
arr.reverse().find(1)위와 같이 reverse 함수를 사용하여 뒤에서부터 검색할 수 있다. 하지만 이렇게 사용했을 때의 단점이 존재한다.
1. reverse 함수가 arr 의 속성을 변형시킨다.
- console.log(arr) 를 출력한다면 [4, 3, 2, 1] 로 reverse된 결과가 출력된다. 본래의 array 가 mutation 되는 것은 좋은 경우가 아니다.
1번의 문제를 해결하기 위해 다른 방법도 존재한다.
const copyArr=[...arr]
copyArr.reverse().find(1)spread 연산자를 이용하여 copy 하고 reverse 시키는 방법이다. 그러나 이 방법은 좋지 않다.
2. mutaition을 막기 위해 불필요한 복사와 변수가 선언되어버린다.
그리고, 만약 이 방법을 한다고 해도 불편한게 index를 다시 거꾸로 생각해야한다.
3. index를 계산하기 위해 불필요한 계산이 필요하게 된다.
위와 같은 단점들을 막기 위해 Array.prototype.findLast()와 Array.prototype.findLastIndex() 를 새로 도입했다. 위와 같은 함수를 통해 last Index 부터 검색이 가능해진다.
02, Hashbang Grammar
hashbang은 CLI로 자바스크립트를 이용하는 유저들을 위해 제안된 문법이다. ⏤ 해시뱅(혹은 셔뱅)은 스크립트 앞에 `#!` 을 붙이는 것이다.
#!/usr/bin/env node
// in the Script Goal
'use strict';
console.log(1);
Q . 왜 shebang 이라 안부르고 hashbang 이라고 부르는가?
- 현대에서 she보다는 hash라는 단어가 (#) 기호로 사용되고 있기 때문이다.
04, Change Array by Copy
위에서도 언급했었는데(01, Array find from Last - reverse 함수), 본래의 array을 mutatable한 함수는 바람직하지 않다. 이를 해결하기 위해 본래의 array를 변형하지 않는 함수를 추가한다. ⏤ MDN에 아직 반영안되어 있는 것을 보니 아직 적용되지 않은 것 같다.
const sequence = [1, 2, 3];
sequence.toReversed(); // => [3, 2, 1]
sequence; // => [1, 2, 3]
// 본래의 reserve() 함수 실행시,
sequence.reserve() // [3, 2, 1]
sequence // [3, 2, 1]const outOfOrder = [3, 1, 2];
outOfOrder.toSorted(); // => [1, 2, 3]
outOfOrder; // => [3, 1, 2]
// 본래의 sort
outOfOrder.sort(); // [1, 2, 3]
outOfOrder; // [1, 2, 3]