FE가 되고싶니? 나도✨

ES2015 이후부터는 자바스크립트에서 변수나 함수를 활용해서 프로퍼티를 만들 때 프로퍼티 네임과 변수나 함수 이름이 같다면 축약해서 사용할 수 있다.

function sayHi() {
  console.log('Hi!');
}

const title = 'code';
const birth = 2000;
const job = '인플루언서';

//때로는 객체를 만들 때 변수에 할당된 값을 활용해서 프로퍼티를 만들 수도 있다.
const user = {
  title: title, //활용할 변수의 이름과 프로퍼티 네임이 똑같다면
  birth, //이렇게 하나만 작성하는 표현이 가능하다.
  job, 
  sayHi,
};

console.log(user); // {title: "code", birth: 2000, job: "인플루언서", sayHi: ƒ}

그리고 메소드를 작성할 때도 다음과 같이 function 키워드를 생략할 수가 있다.

//getFullName: function() {
//    return `${this.firstName} ${this.lastName}`;
//  },
//: function을 생략할 수 있다.

const user = {
  firstName: 'Tess',
  lastName: 'Jang',
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(user.getFullName()); // Tess Jang

뿐만아니라 아래 코드와 같이 표현식을 대괄호로 감싸주게 되면, 표현식의 값을 프로퍼티 네임으로 쓸 수 있다.

//계산된 속성명(computed property name)
const usr = {
  [표현식]: 값,
};

const propertyName = 'birth';
const getJob = () => 'job';

const codeTest = {
  ['topic' + 'name']: 'Modern JavaScript',
  [propertyName]: 1998, //변수에 담긴 값을 사용하거나
  [getJob()]: '프로그래밍 강사' //함수의 리턴값을 사용할 수도 있다.
};

console.log(codeTest); //{topicName: "Modern JavaScript", birth: 1998, job: "프로그래밍 강사"}

펼치다 라는 spread의 의미처럼, 여러개의 값을 하나로 묶은 배열을 다시 각각의 개별값으로 펼치는 문법이다.

//spread 구문(spread syntax)
const number = [1, 2, 3];
console.log(number); // (3) [1, 2, 3]  배열이 출력된다.
console.log(...number); //1, 2, 3

//rest parameter
const sumAll = (...args) => {
  let sum = 0;
  for (arg of args) {
    sum += arg;
  }
  return sum;
};

console.log(sumAll(1, 2, 3, 4)); //10

배열로 묶어있던 값들이 괄호가 벗겨지고 각각의 개별값으로 펼쳐졌다. 그런데 잘 생각해보면 Rest parameter를 만들때도 '...'을 사용했다. 얼핏 비슷한것 같지만 Rest parameter는 여러 개의 아규먼트를 하나의 파라미터로 묶는방식이고, Spread 구문은 하나로 묶여 있는 값을 각각의 개별 값으로 펼치는 방식이다. 그래서 하나의 값으로 평가되는게 아니라 여러 값의 목록으로 평가된다.

const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = [...webPublishing, 'JavaScript'];

console.log(webPublishing); //(2) ['HTML', 'CSS']
console.log(interactiveWeb); //(3) ['HTML', 'CSS', 'JavaScript']
//spread 구문을 활용하면 조금 더 간단하고 직관적이게 배열을 다룰 수 있다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2];
console.log(arr3); //(6) [1, 2, 3, 4, 5, 6]

const latte = {
  esspresso: '30ml',
  milk: '150ml'
};

const cafeMocha = {
  ...latte,
  chocolate: '20ml',
}

console.log(latte); // {esspresso: "30ml", milk: "150ml"}
console.log(cafeMocha); // {esspresso: "30ml", milk: "150ml", chocolate: "20ml"}


//여러개의 파라미터가 있는 함수를 호출할 때 배열을 펼쳐서 각각의 아규먼트로 사용할 수 있다.
const introduce - (name, birth, job) => {
  console.log(`안녕하세요! 반갑습니다!`);
  console.log(`저는 ${name}입니다.`);
  console.log(`${birth}년 생이고,`);
  console.log(`직업은 ${job}입니다.`);
};

const myArr = ['지니', 1992, '고등학교 교사'];
introduce(...myArr); //함수를 호출할 때 아규먼트로 활용도 가능
//spread 구문 자체를 값으로 오해하면 안된다! 여러개의 값이 각각 매칭되는 상황이기에 가능

Spread 구문은 배열이나 객체를 복사하거나 혹은 복사해서 새로운 요소들을 추가할 때 유용하게 활용할 수 있다. 참고로 배열은 객체로 펼칠 수 있지만 객체는 배열로 펼칠 수 없다.

//하나의 값을 가진 배열을 펼쳤다고 하더라도 괄호가 벗겨지고 하나의 값으로 평가되는게 아니라 오류가 발생한다.
const numbers =  [1];
const number = ...number; // TypeError!

//배열을 펼쳐서 객체에 담으면 
const members = ['태호', '종훈', '우재'];
const newObject = { ...members };

console.log(newObject); // {0: "태호", 1: "종훈", 2: "우재"}
//0번부터 시작하는 배열의 인덱스가 프로퍼티 네임이 되서 객체가 만들어진다.

//객체는 배열로 펼칠 수 없다.
const topic = {
  name: '모던 자바스크립트',
  language: 'JavaScript', 
}
const newArray = [...topic]; // TypeError!

객체를 spread할 때는 반드시 객체를 표현하는 중괄호 안에서 활용해야 한다.

조건 연산자 (Conditional operator)이면서 삼항 연산자 (Ternary operator)라고도 불리는 이 연산자는 자바스크립트에서 세 개의 피연산자를 가지는 유일한 연산자이다.

if문과 같은 원리로 조건에 따라 값을 결정할 때 활용되는데

//조건 ? truthy 할 때 표현식 : falsy 할 때 표현식
const cutOff = 80;

function passChecker(score) {
  return score > cutOff ? '합격입니다!' : '불합격입니다!';
};

//score > cutOff 가 truthy하다면 합격입니다를, falsy하면 불합격입니다를 return

console.log(passChecker(75)); //함수를 호출하는 점수가 75점이니까 불합격이 return된다.

//화살표 함수로 표현해보면
const passChecker = (score) => score > cutOff ? '합격입니다!' : '불합격입니다!';

console.log(passChecker(90)); //합격이 출력된다.

간단한 조건식의 경우에는 if문 보다 훨씬 더 간결하게 표현할 수 있는 장점이 있지만 내부에 변수나 함수를 선언한다거나 반복문 같은 표현식이 아닌 문장은 작성할 수 없다는 한계가 있기 때문에 if문을 완벽하게 대체할 수는 없다.