[JS] 모던 자바 스크립트 문법

조건을 다루는 표현식

조건 연산자(삼항 연산자)

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

function passChecker(score) {
	return score < 70 ? ‘합격’ : ‘불합격!’;
}

console.log(passChecker(90));

--

let msg = x > 3 ? 'x는 3보다 크다.' : 'x는 3보다 크지 않다.';

• 표현식이기 때문에 조건에 따라 변수를 선언하거나 반복문을 실행할 수는 없음.

spread 구문

배열에 담긴 값들이 각각 개별의 값으로 펼쳐짐.

const snacks = ['원카칩', '꿀버터칩', '헛스윙칩', '태양칩', '야채시간'];
const drinks = ['사이다', '콜라', '우유', '물', '커피', '레몬에이드'];

function printArguments(...args) {
  for (const arg of args) {
    console.log(arg);
  }
}

// 1. Spread 구문을 활용해서 sancks와 drinks 배열을 각각 mySnacks와 myDrinks 변수에 복사
const mySnacks = [...snacks];
const myDrinks = [...drinks];

mySnacks.splice(2, 3);
myDrinks.splice(1);

// 2. Spread 구문을 활용해서 mySnacks와 myDrinks 순서로 두 배열을 합쳐서 myChoice 변수에 할당
const myChoice = [...mySnacks, ...myDrinks]

// 3. Spread 구문을 활용해서 myChoice의 각 요소들을 printArguments 함수의 아규먼트로 전달
printArguments(...myChoice);

//실행결과
원카칩
꿀버터칩
사이다

• 객체 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"}

요즘 프로퍼티 표기법

• 프로퍼티 네임과 value로 사용할 변수나 함수 이름이 같다면 프로퍼티 네임 생략 가능. (getAge: getAge(), → getAge,)
• 함수에서 콜론과 ‘function’ 생략 가능 ( getFullName: function() → getFullName() )
• 프로퍼티 네임은 표현식에 대괄호를 붙여서도 가능하다 ( [’김’ + ‘다은’]: ‘value’, )

구조분해 (Destracturing)

• 배열 구조분해

const snacks = ['원카칩', '꿀버터칩', '헛스윙칩', '태양칩', '야채시간'];

const [daeun, joohyun, hyunsuk, bongjoo] = snacks;
	// const daeun = snacks[0]; 이런 식으로 하나씩 할당해줘야 하는 거 한번에 가능 
	// 할당되는 값이 배열의 형태일 때만 가능
	// '야채시간' 처럼 넘치는 값은 변수 할당 안됨 
const [daeun, joohyun, hyunsuk, ...bongjoo] = snacks;
	// 나머지 요소는 모두 변수 봉주로 할당 ['태양칩', '야채시간']
const [daeun, joohyun, hyunsuk, bongjoo,hyunji, yewon = '없음'] = snacks;
	// 예원에는 undifinde 할당됨. 혹은 기본값 할당 시킬 수 있음

let mac = '다은';
let lg = '주현';

[mag, lg] = [lg. mac]
	// 두 변수값을 바꿀 수 있음.

• 객체 구조분해

const user1 = {
  name: '김다은',
  team: 2,
	'birth-day': '2000' // 이렇게 변수 명으로 사용할 수 없는 프로퍼티 네임은 새로운 이름으로 할당받아야 함
}

const name = user1.name;
const team = user1.team;

const { name, team } = user1;

// 다른 이름으로 할당받고 싶다면?
const { name: userName, team } = user1; // name을 userName으로 선언

에러와 에러 객체

• 에러 객체: 에러를 다루기 위해 사용 (콘솔에 에러 네임 프로퍼티 + 에러 메세지 프로퍼티 뜨는 거)
  • ReferenceError: 존재하지 않는 변수나 함수를 호출할 때 (+변수가 선언되기 전)
  • TypeError: 잘못된 방식으로 자료형을 다뤘을 때 발생(함수 또는 변수의 값이 예상치 못한 유형일 때)
  • SyntaxError: 문법(언어 사양)을 지키지 않았을 때 발생하는 에러 (코드를 실행시키기 전에 에러를 발생시킴)
• 의도적으로 에러를 만들고 발생시키는 방법 (에러 객체 이름, 메세지 형식만 따르면 직접 만들 수 있음)
  • throw error - throw error 가 적힌 열에서 직접 만든 에러가 발생하고, 그 아래 줄들은 실행안됨.

예외처리(에러를 다루는 방법): try catch문

try {
	// 코드
} catch (error) {
	// 에러가 발생했을 때 동작할 코드 
	// (에러가 발생했을 때 바로 코드가 종료되는 게 아니라, catch문 안에 코드가 동작하게 됨.)
} finally {
	// 항상 실행할 코드
}

• try catch문을 썼을 때는 생성된 error 객체가 바로 콘솔에 출력되는 게 아니라 error라는 파라미터(catch (error))에 전달됨. (꼭 error라고 안써도 됨. 파라미터 이름 정할 수 있음)

  • console.log(error);, console.error(error); 이런 식으로 출력하면 볼 수 있음

• try catch문 활용하기

  • 에러가 발생해도 try catch문을 통해 error를 다뤘기 때문에 코드가 종료되지 않고 끝까지 실행시킬 수 있음.
  • try catch문은 실행이 가능한 코드 내에서의 에러를 다루기 때문에 SyntaxError는 해당되지 않음
    • 이렇게 실행이 가능한 코드 내에서의 에러를 예외(exception)이라고 부르고, try catch문 같은 처리 방식은 ‘예외 처리(Exception Handling)’이라고 부름.