1. 삼항 연산자
// 삼항 연산자
condition ? exprIfTrue : exprIfFalse
앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우 실행할 표현식이 배치된다. 해당 연산자는 if...else문의 대체재로 빈번히 사용됩니다.
- 조건이 두 가지인 경우에는 불필요한
else if를 작성할 필요가 없다. - 단순한 조건과
return만 있기 때문에 과감하게 삼항 연산자를 활용할 수 있다.
2. Nullish Coalescing Operator
// 널 병합 연산자
leftExpr ?? rightExpr널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.
- 변동 가능한
let이라는 변수를 선언한 것과 조금 지저분해보이는if문을 사용한 것을 널 병합 연산자를 사용하여 아래와 같이 바꿀 수 있다.
Default Parameter와의 차이점
- Default Parameter는
undefined인 경우에만 default 값이 자동으로 할당되고,null로 명확하게 지정하거나 값이 있는 경우에는 default parameter는 해당되지 않는다. - 따라서 Default Parameter는
undefined인 경우에만 반환되고, 널 병합 연산자는null이거나undefined인 경우 모두 오른쪽 연산자를 반환한다.
Logic OR(||) Operator와의 차이
// 널 병합 연산자
leftExpr ?? rightExpr
// OR 연산자
expr1 || expr2- 널 병합 연산자(
??)는 왼쪽 피연산자가null이거나undefined인 경우에만 오른쪽 피연산자가 반환된다. - OR 연산자 (
||)는 왼쪽 피연산자가falsy인 경우, 오른쪽 연산자가 반환된다.falsy- false
null;NaN;0,-0;- empty string (
""or''or ``); undefined
Expr 의미
// 널 병합 연산자
leftExpr ?? rightExpr
// OR 연산자
expr1 || expr2- Syntax를 보면 value가 아닌, 피연산자로 expression가 쓰인 것을 확인할 수 있다. 값을 직접적으로 할당할 때에도 이용되지만, 아래 예시처럼 코드를 실행해서 실행된 값을 할당할 때에도 사용할 수 있다.
3. Object Destructuring
- 길어지는 코드, 반복되는 코드, 낮은 가독성을 피하기 위해 객체를 구조 분해하여 할당할 수 있다.
4. Spread Synthax
- 객체 혹은 배열들을 펼칠 수 있게 해준다.
// 함수 호출:
myFunction(...iterableObj);
//배열 리터럴과 문자열:
[...iterableObj, '4', 'five', 6];
//객체 리터럴(ECMAScript 2018에서 추가):
let objClone = { ...obj };
5. Optional Chaining
// Optional chaining
obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)- optional chaining 연산자 (
?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. ?.연산자는.체이닝 연산자와 유사하게 작동하지만, 만약 참조가null또는undefined이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면,undefined를 리턴한다.- 따라서 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식이 생성된다. 어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다.
6. Template Literals
7. Loops
위 코드를 filter(), map(), reduce() 메서드를 사용하여 가독성 좋게 쓸 수 있다.
filter(): 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.map(): 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.reduce(): 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.
굳이 함수로 따로 만들 필요 없이 배열 API를 사용하여 아래 코드와 같이 만들 수 있다. 
하지만 위 코드처럼 연속적인 일을 하는 경우엔 아래와 같이 chining하여 더욱 간단하게 작성할 수 있다.
8. async / await
두 가지 이상의 프로미스를 연결해서 사용해야 할 때에는 async와 await을 이용하면 깔끔하고 순차적으로 확인할 수 있기 때문에 가독성을 높이고 이해력을 높일 수 있다.
Quiz
(영상을 보면서 육성으로 와... 하면서 본 부분이다...)
중복된 부분을 제거하여 새로운 배열로 만들어야 하는 것이 퀴즈였다. 나는 일단 filter()를 사용하여 중복된 것을 찾고 새로운 배열로 반환하기 위해 map()을 사용할 생각이었다. 이것도 나름 잘 생각한 거라고 생각했는데 정답 코드는 더욱 더 간단했다.
위 코드를 하나씩 뜯어보자면,
new Set(array)- 배열이라는 자료 구조는 중복을 허용한다. 하지만
Set이라는 자료 구조는 중복을 허용하지 않는다. array의 배열을 전달해서 새로운Set이라는 자료를 만든다. 이때 중복된 것은 제거된다.
- 배열이라는 자료 구조는 중복을 허용한다. 하지만
[...new Set(array)]- Spread Syntax를 이용해서
Set에 있는 것들을 각각 하나씩 나열하여 새로운 배열로 반환한다.
- Spread Syntax를 이용해서
🌱 새싹 개발자의 고군분투 코딩 일기