/ JAVASCRIPT

대수롭지 않게 넘어갈 만한 문법과 표현식(1)

조건 연산자(Conditional operator)

if(조건){
  // true 일 때 동작
}else{
  // false 일 때 동작
}
------------------------
switch (값) {
  case A:
    // 값이 A와 일치할 때 동작
    break;
  case B:
    // 값이 B와 일치할 때 동작
    break;
  default:
    // 값과 일치하는 case가 없을때 동작
}

ES2015 이전에 나온 조건을 다루는 방법이 위와 같이 if문과 switch문 두개뿐이였다. 하지만 그 이후에 새롭게 등장한 조건연산자를 활용한다면 간결하게 조건문을 다룰수있다.

조건 ? truthy 할 때 동작 : falsy 할 때 동작

위가 조건 연산자의 기본 형태인데 자바스크립트에서 유일한 항이 세개인 연산자로서 삼항 연산자(Ternary operator) 라고 불린다. 이 삼항 연산자가 얼마나 간결한지 살펴보자면

const passNum = 80;

//if문을 사용했을 때
function passCheck(score){
  if(score > passNum){
    return '합격!';
  }else {
    return '불합격!';
  }
}
//삼항 연산자를 사용했을 때
function passCheck(score){
  score > passNum ? '합격!' : '불합격!';
}

console.log(passCheck(90));
//편의상 함수이름을 똑같이 작성하였음

위 두 함수는 같은 결과를 출력할것이다. 한눈에 보기에도 if문 보다 삼항 연산자가 더 간결하다는것을 알 수 있다.

Spread 구문(Spread Syntax)

이 구문 또한 앞선 조건 연산자와 같이 ES 2015에서 등장한 구문이다.
배열을 다룰 때 유용하게 사용되며 ‘펼치다’ 라는 뜻을 가진것처럼 여러개의 값을 묶어놓은 배열을 각각의 값으로 펼쳐준다고 생각하면 쉬울것같다.

const arr = [1, 2, 3];

console.log(arr);       // -> [1, 2, 3]

//Spread
console.log(...arr);    // -> 1, 2, 3

사용방법은 위와같이 간단한데 …만 앞에 붙여주면 된다. 이와 같은 구문은 배열을 복사할때 유용하게 사용된다.

const arr = [1, 2, 3];
const arr2 = arr;

arr2.push(4);

console.log(arr);       // -> [1, 2, 3, 4]
console.log(arr2);      // -> [1, 2, 3, 4]

위처럼 배열은 복사하게된다면 배열의 값을 복사하는것이 아니라 주솟값을 복사하기 때문에 기존 배열에도 ‘4’가 푸시된 것을 볼 수 있다. 하지만 Spread 구문을 사용한다면

const arr = [1, 2, 3];
const arr2 = [...arr];

arr2.push(4);

console.log(arr);       // -> [1, 2, 3]
console.log(arr2);      // -> [1, 2, 3, 4]

const arr3 = [...arr, 4];

console.log(arr3);      // -> [1, 2, 3, 4]

위와 같이 값만을 복사해 사용할 수 있으며 마지막 줄의 코드처럼 또다른 인자로 값을 넘기면 push와 같이 값을 추가해 줄 수도있다.

모던한 프로퍼티 표기법

ES 2015에서 추가된 객체의 프로퍼티를 좀 더 간결하게 표현하는 방법을 알아보자

const user = {
  name : 'kim',
  age : 15,
  job : 'none'
}

위는 우리가 사용하는 일반적인 객체를 표현하는 방법인데 아래처럼 변수에 할당해서 프로퍼티를 표현할 수 있다.

const name = 'kim';
const age = 15;
const job = 'none';

const user = {
  name : name,
  age : age,
  job : job
}
// 사용할 프로퍼티 이름과 변수명이 같다면
// ⬇⬇와 같이 표현할 수 있다.
const user = {
  name,
  age,
  job
}

위와 같은 방법은 변수 뿐만아니라 함수도 똑같이 적용시킬 수 있다. 요점은 사용할 프로퍼티의 이름이 변수명이나 함수명과 같다면 간단하게 작성이 가능하다.
또한 프로퍼티명을 표현식으로 작성할 수 있는데

const obj = {
  ['na' + 'me'] : 'jong'
}

console.log(obj);       // -> {name: 'jong'}

위처럼 를 사용하여 작성이 가능하다는 것을 알아두자

옵셔널 체이닝(Optional Chaining)

옵셔널 체이닝이란 ECMAScript2020때 새롭게 등장하였는데 이것은 우리가 보다 안전하게 프로퍼티에 접근하게 만들어준다. 특히 중첩된 객체 프로퍼티에 접근할때 유용하게 사용되는데 예를 들어보자

const user = {
  name: 'kim',
  friend: {
    name: 'jong',
    age: 15
  }
}
const user2 = {
  name: 'park'
}

function printFriendName(obj) {
  console.log(obj.friend.name);
}

printFriendName(user)         // -> 'jong'
printFriendName(user2)        // -> error에러

//이런 에러를 막기위한 방법
function printFriendNameNoError(obj) {
  console.log(obj.friend && user.friend.name);
}

위처럼 중첩된 객체속 프로퍼티의 값을 찾는 함수가 있는데 함수로 호출한 객체 중 원하는 프로퍼티가 없다면 error를 출력하게 되는데 우리는 이때 AND연산자를 사용하여 error가 출력되는것을 방지할수 있었다. 하지만 이것을 간단하게 만들어줄 문법이 옵셔널 체이닝 이다.

function printFriendNameNoError(obj) {
  console.log(obj.friend?.name);
}
// ⬇⬇삼항연산자로 나타내면

function printFriendNameNoError(obj) {
  console.log((obj.Friend === null || obj.Friend === undefined) ? undefined : obj.Friend.name);
}
// 위 처럼 나타낼 수 있다.

위 코드처럼 물음표와 마침표를 붙여 사용하는 부분이 옵셔널 체이닝 연산자(?.)로
옵셔널 체이닝 연산자 왼편의 프로퍼티 값이 undefined 또는 null이 아니라면 그다음 프로퍼티 값을 리턴하고 그렇지 않은 경우에는 undefined를 반환하는 문법이다.