[JS] 삼항연산 / spread / Optional Chaining / Destructuring

 

 

 

 

---

 

 

 

 

---

프로퍼티, 메소드 간결하게 표현

 

 

 

// 변수의 이름과 프로퍼티 네임 같으면 생략가능
const user = {
	title,          // = title : title
	birth           // = birth ; birth
}

 

//객체 내부에서 메소드 함수호출시 콜론기호와 function 생략가능
const user = {
	firstname,
	lastname,
    fullname : function() {
      return `{this.firstname} ${this.lastname}`;
  }
};

>
const user = {
	firstname,
	lastname,
    fullname () {
      return `{this.firstname} ${this.lastname}`;
  }
};

 

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

>
const user = {
  ['first'+'name'] : 'value',
}

console.log(user);
//{firstname : value}

 

 

 

 

 

 

 

 

---

 

삼항 연산자

 

 

= 조건부 연산자

조건 ? truthy할 때 표현식 : falsy할 때 표현식

간단한 if문 대부분 조건연산자로 표현가능 (내부에 변수나 함수선언, 반복문 불가)

 

const cutOff = 80;

const passChecker = (score) => score > cutOff ? '합격입니다!' : '불합격입니다!';

console.log(passChecker(75));

 

 

 

 

 

---

 

 

 

 

 

Spread operator

 

 

spread operator : 괄호를 제거해주는 연산자 (배열에서 유용) , object 중괄호, array 대괄호 안에서 사용

rest parameter : function 소괄호

 

const num = [1,2,3];
console.log(num)
//[1,2,3]

const num = [1,2,3];
console.log(...num)
//1,2,3

 

 

문자에 사용하면 한글자씩 출력된다.

문자는 array자료형과 유사해서 안에 괄호가 쳐져있다고 생각할 수 있다. ( 실제로 비슷한게 아니라 느낌이!!)

//문자도 array처럼 출력이 가능하다. 

let 문자 = "hello";

console.log(문자[0])
//출력 : 'h'

console.log(...문자)
//출력 : 'h e l l o'

 

 

 

 ✔️ array 합치기

 

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

const arr3 = [...arr1, ...arr2];    //concat대신 가능
console.log(arr3);
//출력 : [1,2,3,4,5,6]

 

 

 

✔️ array 복사하기

 

등호를 사용해서 a의 값을 b로 복사하면 값 공유가 일어난다.

a를 수정하면 b도 값이 똑같이 바뀐다.

var a = [1,2,3];
var b = a;

 

spread로 a의 괄호를 제거한다음 다시 괄호를 씌워주면 값의 공유없이 복사가능하다.

var a = [1,2,3];
var b = [...a];

 

 

 

 

✔️ Object 합치기 / 복사에 활용

 

object 두개를 합치고 싶을 때

var o1 = { a : 1, b : 2 };
var o2 = { c : 3, 그리고 o1에 있는거 전부.. }


// spread활용한다.
var o1 = { a : 1, b : 2 };
var o2 = { c : 3, ...o1 };
console.log(o2);
// 출력 : o2 = { a : 1, b : 2 , c : 3 }

 

? object의 key 값의 중복이 발생하면

 : 무조건 뒤에오는 중복값이 이긴다.

var o1 = { a : 1, b : 2};
var o2 = { a : 3, ...o1 };
console.log(o2);
//출력 : o2 = { a : 1, b : 2 }

 

 

 

✔️ array를 파라미터 형태로 집어넣을 때 활용한다.

function 더하기(a,b,c){
   console.log(a + b + c)
}

var 어레이 = [10, 20, 30];
더하기(...어레이);  //요즘방식
더하기.apply(undefined, 어레이);  //옛날방식

 

 

//새로운 배열을 만든다거나 함수의 아규먼트로 사용할 수는 없음 > 객체 표현하는 중괄호 안에서 활용

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

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

[...latte]; // Error

(function (...args) {
  for (const arg of args) {
    console.log(arg);
  }
})(...cafeMocha); // Error

//배열은 객체로 펼칠 수 있음
const members = ['태호', '종훈', '우재'];
const newObject = { ...members };

console.log(newObject); // {0: "태호", 1: "종훈", 2: "우재"}

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

 

 

 

 

 

 

 

---

 

Rest parameter

 

 

 : 함수에 파라미터가 몇개 들어올지 미리 정의가 불가능 할 때 점3개를 붙여주면 파라미터 잔뜩 들어올 수 있다.

  rest 파라미터로 들어온 값은 모두 [ ] 배열로 들어온다.

 

function 전부더하기(...a){
  console.log(a)
}

전부더하기(1,2,3,4,5)

 

 

 

 

Optional Chaining

 

 

 : 객체의 프로퍼티 다룰 때 접근전에 null , undefined 아니라는 것을 검증 > 에러방지

   null, undefined 아니면 프로퍼티 값 리턴 / 맞으면 undefined반환

 

function name(user) {
 console.log(user.cat?.name);
}

//삼항연산자로 표현
function name(user) {
 console.log((user.cat === null || user.cat === undefined)
 ? undefined : user.cat.name);
}

 

 

 

 

Destructuring

 

 

(구조분해) 배열의 요소나 객체의 프로퍼티 값들을 개별변수에 따로 할당

 = array, object 안에 있는 데이터를 빼서 변수로 만들고 싶을 때 쓰는 문법

 

 

[배열 구조분해]

const rank = ['one', 'two', 'three'];

const [하나,둘,셋] = rank;     //할당연산자

console.log(하나);
console.log(둘);
console.log(셋);

//one, two, three

//변수의 마지막에 rest para~ 나머지요소 마지막변수에 모두할당됨
const rank = ['one', 'two', 'three', 'four', 'five'];

const [하나,둘,셋,...쿠폰] = rank;

console.log(쿠폰);


//[four,five]

//배열이 더 많으면 undefined값 할당
const rank = ['one', 'two', 'three'];

const [하나,둘,셋,넷] = rank;

console.log(넷);
//undefined

//기본값 적용가능 (해당 배열없을경우 기본값이 할당)
const rank = ['one', 'two', 'three'];

const [하나,둘,셋,넷='없음'] = rank;

console.log(넷);
//없음

//두변수의 값을 서로 교환
let macbook = 'hi';
let ipad = 'bye';

[macbook, ipad] = [ipad, macbook];       //오른쪽 값을 왼쪽에 할당

console.log(macbook)
//bye

 

 

 

[객체 구조분해]

const mackbook = {
 title : '맥북',
 price : 1250000,
 memory : '16GB',
 storage : '1TB SSD 저장장치'
};

//const title = macbook.title;
//const price = macbook.price;
const {title, price} = macbook;    //프로퍼티 네임으로 분해

const mackbook = {
 title : '맥북',
 price : 1250000,
 memory : '16GB',
 storage : '1TB SSD 저장장치'
 'serial-num' : 'asfefaesfas'                
};

//const title = macbook.title;
//const price = macbook.price;
const {title:product, ..rest} = macbook;    //남은 프로퍼티들을 모아서 하나의 객체로
//product로 변수네임 변경

//활용가능한 프로퍼티 네임으로 변경해줌
const {'serial-num':serialNum} = macbook;
const { [propertyName] : product } = macbook;    //대괄호로 가능

console.log(product);
console.log(rest);

//나머지 배열의 특징과 비슷

 

 

 

[event에서 구조분해 활용]

const btn = document.querySelector('#btn');

btn.addEventListener('click', (event) => {
 event.target.classList.toggle('checked');
});

//target 프로퍼티 활용
btn.addEventListener('click', ({target}) => {
 target.classList.toggle('checked');
});

//target 중첩되서 좀더 분해 
btn.addEventListener('click', ({target : classList }) => {
 classList.toggle('checked');
});

//함수내부에서 구조분해 한번더
btn.addEventListener('click', ({target}) => {
 const {classList} = target;
 classList.toggle('checked');
});

 

 

 

[활용]

//점 표기법
function printFavoritSong(name, music) {
  console.log(`최근 '${name}'님이 즐겨듣는 노래는 '${music.singer}'의 
  '${music.title}'이라는 노래입니다.`);
}

//함수내부에서 구조분해해서 변수로 할당
function printFavoritSong(name, music) {
  const { singer, title } = music;
  console.log(`최근 '${name}'님이 즐겨듣는 노래는 '${singer}'의 '${title}'이라는 노래입니다.`);
}

//파라미터에서 구조분해
function printFavoritSong(name, { title, singer }) {
  console.log(`최근 '${name}'님이 즐겨듣는 노래는 '${singer}'의 '${title}'이라는 노래입니다.`);
}


const music1 = { title: '난치병', singer: '하림' };
const music2 = { title: '너의 모든 순간', singer: '성시경' };


printFavoritSong('영훈', music2);
printFavoritSong('동욱', music1);