[모던자바스크립트]-문법과 표현

ioioi·2023년 11월 12일
0

Javascript

목록 보기
14/21
post-thumbnail

📌 조건 연산자

삼항 연산자(Ternary operator)

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

function passChecker(score) {
  return score > CUT_OFF ? '합격' : '불합격!';
}

📌 Spread 구문

배열에 유용함
배열의 각각의 개별 값을 가져옴
배열을 좀 더 편하게 복사할 수 있음

const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3
const webPublishing = ['HTML', 'CSS'];
const interactiveWeb = webPublishing.slice();

interactiveWeb.push('JavaScript');

console.log(webPublishing);  // ['HTML', 'CSS']
console.log(interactiveWeb);  // ['HTML', 'CSS', 'JavaScript']

👉 slice(): 원본 배열이 그대로 보존
인자를 넘기지 않으면 배열의 처음 값부터 마지막 값까지 전체를 복제

스프레드 연산자 사용헤서 바꾸기

const interactiveWeb = [...webPublishing, 'JavaScript']

스프레드 연산자 사용해서 배열 합치기

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

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

하나의 값으로 평가로 되는게 아닌 여러개의 목록으로 평가됨

const numbers = [1];
const number = ...numbers;  // SyntaxError!!!

배열을 객체에 담기

프로퍼티로 만들어진다! index를 갖게 됨

const members = ['태호', '종훈', '우재'];
const newObject = {...members};
console.log(newObject) // {0: '태호', 1: '종훈', 2: '우재'}

객체 Spread하기

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"}

주의 사항

  • 객체로는 새로운 배열을 만들거나 함수의 아규먼트로 사용할 수는 없습니다.
  • spread할 때는 반드시 객체를 표현하는 중괄호 안에서 활용해야 한다!!!!
profile
UIUX/Frontend

0개의 댓글

관련 채용 정보