[코드잇 - 모던 자바스크립트] 04. 자바스크립트의 문법과 표현

01. 문장과 표현식

문장 (statements)

: 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리

 

 

표현식 (expressions)

: 결과적으로 하나의 값이 되는 모든 코드

 

표현식인 문장 vs 표현식이 아닌 문장

-  둘을 구분하는 가장 간단한 방법은 우리가 구분하고자 하는 문장을 변수에 할당하거나, 어떤 함수의 아규먼트로 전달해보는 것

let x; 
x = 3;

console.log(if (x < 5) {
  console.log('x는 5보다 작다');
} else {
  console.log('x는 5보다 크다');
});

const someloop = for (let i = 0; i < 5; i++) {
  console.log(i);
};

- console.log 메소드의 아규먼트로 if문을 전달하거나 someloop라는 변수에 for 반복문을 할당하게 되면, Error가 발생

- 조건문이나 반복문은 값으로 평가되지 않고 오로지 문장으로만 평가되기 때문

---

02. 조건을 다루는 표현식

조건 연산자 (Conditional operator)

const msg = speed > 50 ? '[주의!]과속주행 중입니다.' : '정속주행 중입니다.';

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

---

04. Spread 구문

const codeit = { 
  name: 'codeit', 
};

const codeitClone = { 
  ...codeit, // spread 문법!
};

console.log(codeit); // {name: "codeit"}
console.log(codeitClone); // {name: "codeit"}

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 하면 새로운 배열을 만들거나 함수의 아규먼트로 쓸 수 있었지만, 객체로는 새로운 배열을 만들거나 함수의 아규먼트로 사용할 수는 없다. 

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

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

---

06. 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);

---

07. 모던한 프로퍼티 표기법

- 활용할 변수의 이름과 프로퍼티 네임이 똑같으면 중복해서 작성하지 않고 하나만 작성해도 됨 

const title = 'Codeit';
const birth = 2017;
const job = '프로그래밍 강사';

const user = {
  title,
  birth,
  job,
};

console.log(user);

- 객체 내에서 함수 선언시 function 명령어와 콜론 기호 생략해 축약형으로 작성 가능

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

console.log(user.getFullName());

계산된 속성명(Computed property name)

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

const codeit = {
  ['topic'+'Name']:'Modern JavaScript',
  [proprtyName]:2017,
  [getJob()] : '프로그래밍 강사',
};

console.log(codeit);

---

09. 옵셔널 체이닝 

옵셔널 체이닝 (Optional Chaning)

: ECMAScript2020에서 등장한 안전하게 프로퍼티에 접근하는 방법

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

- 물음표와 마침표를 붙여 사용하는 부분이 바로 옵셔널 체이닝 연산자(?.)

- 만약 옵셔널 체이닝 연산자 왼편의 프로퍼티 값이 undefined 또는 null이 아니라면 그다음 프로퍼티 값을 리턴하고 그렇지 않은 경우에는 undefined를 반환하는 문법

---

10. Destructuring(구조 분해)

const arr = ['A','B','C','D'];

const[a,b,c,d] = arr;

console.log(a); //A
console.log(b); //B
console.log(c); //C
console.log(d); //D

let A = 'ABC';
let B = 'BCD';

[A,B] = [B,A];

console.log(A); //BCD
console.log(B); //ABC

---

11. 배열 Destructuring 연습하기 

// 1. Destructuring 문법을 활용해서 numbers 배열의 각 요소를 one, two, three라는 변수에 할당해보세요.
const numbers = [1, 2, 3];
[one,two,three] = numbers;


// 2. Destructuring 문법을 활용해서 TV는 livingRoom, 나머지 요소들(배열)은 kitchen 변수에 할당해 주세요.
const products = ['TV', '식탁', '냉장고', '전기밥솥', '전자레인지', '오븐', '식기세척기'];
[livingRoom,...kitchen] = products;


// 3. Destructuring 문법을 활용해서 두 변수의 값을 서로 바꿔주세요.
let firstName = 'Kang';
let lastName = 'Young';

[firstName,lastName] = [lastName,firstName];


// 테스트 코드
console.log(one);
console.log(two);
console.log(three);
console.log(livingRoom);
console.log(kitchen[1]);
console.log(firstName);
console.log(lastName);

---

13. 객체 Destructuring 연습하기

// 1. Destructuring 문법을 사용해서 title, artist, year, medium 변수에 myBestArt 객체의 각 프로퍼티를 할당해 주세요.
const myBestArt = {
	title: '별이 빛나는 밤에',
	artist: '빈센트 반 고흐',
	year: 1889,
	medium: '유화',
};

const {title,artist,year,medium} = myBestArt;

// 2. Destructuring 문법을 활용해서 myBestSong의 프로퍼티 중 title과 artist는 각각 songName과 singer라는 변수에, 나머지는 rest라는 변수에 객체로 할당해 주세요.
const myBestSong = {
	title: '무릎',
	artist: '아이유(IU)',
	release: '2015.10.23.',
	lyrics: '모두 잠드는 밤에...'
};

const{title:songName,artist:singer,...rest} = myBestSong;

// 3. printMenu 함수 안에 잘못 작성된 Destructuring 코드를 수정해 주세요.
const menu1 = { name: '아메리카노' };
const menu2 = { name: '바닐라 라떼', ice: true };
const menu3 = { name: '카페 모카', ice: false };

function printMenu(menu) {
	//  menu 파라미터로 전달되는 객체에 ice 프로퍼티가 없을 경우 기본값은 true여야 합니다.
	const {ice=true, name} = menu;

	console.log(`주문하신 메뉴는 '${ice ? '아이스' : '따뜻한'} ${name}'입니다.`);
}



// 테스트 코드
console.log(title);
console.log(artist);
console.log(year);
console.log(medium);
console.log(songName);
console.log(singer);
console.log(rest);
printMenu(menu1);
printMenu(menu2);
printMenu(menu3);

---

16. 에러와 에러 객체

- 에러 객체 만들기

throw new TypeError('타입 에러가 발생했습니다.');

---

17. try catch문

// try catch문 

try{
  //코드
}catch (error){
  //에러가 발생했을 때 동작할 코드 
}

// try catch문 

try{
  console.log('에러 전');
  
  const codeit = '코드잇';
  console.log(codeit);

  codeit = 'codeit';

  const lan = 'JavaScript';
  console.log(lan);
}catch (error){
  console.log('에러 후');
}

---

20. finally문

- try문에서 어떤 코드를 실행할 때 에러 여부와 상관 없이 항상 실행할 코드를 작성 

try {
  // 실행할 코드
} catch (err) {
  // 에러가 발상했을 때 실행할 코드
} finally {
  // 항상 실행할 코드
}

- finally문에서 error 다루기

try {
  try {
    // 실행할 코드
  } catch (err) {
    // 에러가 발상했을 때 실행할 코드
  } finally {
    // 항상 실행할 코드
  }
} catch (err) {
  // finall문에서 에러가 발생했을 때 실행할 코드
}

---

21. 퀴즈왕의 길은 험난하다 (try-catch문 연습)

const quiz1 = {
  question: '다음 중 스승의 날과 생일이 같은 인물은 누구일까요?',
  example: [ '율곡 이이', '퇴계 이황', '세종대왕', '신사임당'],
  answer: 3,
  solution: '훈민정음 창제 등 우리나라 문화와 교육 발전에 남긴 업적이 가장 큰 인물이라는 평가와 함께, 이 시대의 스승이 세종대왕처럼 존경받았으면 하는 바람으로 세종대왕의 탄생일이 스승의 날로 지정되었습니다.',
};

const quiz2 = {
  question: '다음 중 희노애락에 속하지 않는 것은 무엇일까요?',
  example: ['사랑', '기쁨', '즐거움'],
  answer: 1,
  solution: '희노애락에서의 애를 사랑 애(愛)라고 자칫 오해할 수가 있지만, 희노애락의 애는 슬플 애(哀)입니다. 기쁨은 기쁠 희(喜), 즐거움은 즐거울 락(樂)에 담겨 있습니다.',
};

function printQuiz({ question, example }) {
  try{
    let exMsg = '';
  for (let i = 0; i < example.length; i++) {
    exMsg += `${i + 1}. ${example[i]}  `;
  }

  console.log(question);
  console.log(exMsg);

  }catch(error){
    console.log(error.name);
  }
}

// 테스트 코드
printQuiz(quiz1);
printQuiz(1);
printQuiz("");
printQuiz({});
printQuiz(quiz2);