1. 01. 문장과 표현식
문장 (statements)
: 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리
표현식 (expressions)
: 결과적으로 하나의 값이 되는 모든 코드
표현식인 문장 vs 표현식이 아닌 문장
- 둘을 구분하는 가장 간단한 방법은 우리가 구분하고자 하는 문장을 변수에 할당하거나, 어떤 함수의 아규먼트로 전달해보는 것
<code />
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가 발생
- 조건문이나 반복문은 값으로 평가되지 않고 오로지 문장으로만 평가되기 때문
2. 02. 조건을 다루는 표현식
조건 연산자 (Conditional operator)
<javascript />
const msg = speed > 50 ? '[주의!]과속주행 중입니다.' : '정속주행 중입니다.';
<javascript />
let msg = x > 3 ? 'x는 3보다 크다.' : 'x는 3보다 크지 않다.';
3. 04. Spread 구문
<javascript />
const codeit = {
name: 'codeit',
};
const codeitClone = {
...codeit, // spread 문법!
};
console.log(codeit); // {name: "codeit"}
console.log(codeitClone); // {name: "codeit"}
<javascript />
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할 때는 반드시 객체를 표현하는 중괄호 안에서 활용해야 한다
<javascript />
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
4. 06. Spread 구문 연습하기
<javascript />
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);
5. 07. 모던한 프로퍼티 표기법
- 활용할 변수의 이름과 프로퍼티 네임이 똑같으면 중복해서 작성하지 않고 하나만 작성해도 됨
<javascript />
const title = 'Codeit';
const birth = 2017;
const job = '프로그래밍 강사';
const user = {
title,
birth,
job,
};
console.log(user);
- 객체 내에서 함수 선언시 function 명령어와 콜론 기호 생략해 축약형으로 작성 가능
<javascript />
const user = {
firthName:'Tess',
lastName:'Jang',
getFullName(){
return `${this.firthName} ${this.lastName}`;
},
};
console.log(user.getFullName());
계산된 속성명(Computed property name)
<javascript />
const proprtyName = 'birth';
const getJob = () => 'job';
const codeit = {
['topic'+'Name']:'Modern JavaScript',
[proprtyName]:2017,
[getJob()] : '프로그래밍 강사',
};
console.log(codeit);
6. 09. 옵셔널 체이닝
옵셔널 체이닝 (Optional Chaning)
: ECMAScript2020에서 등장한 안전하게 프로퍼티에 접근하는 방법
<code />
function printCatName(user) {
console.log(user.cat?.name);
}
- 물음표와 마침표를 붙여 사용하는 부분이 바로 옵셔널 체이닝 연산자(?.)
- 만약 옵셔널 체이닝 연산자 왼편의 프로퍼티 값이 undefined 또는 null이 아니라면 그다음 프로퍼티 값을 리턴하고 그렇지 않은 경우에는 undefined를 반환하는 문법
7. 10. Destructuring(구조 분해)
<javascript />
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
<javascript />
let A = 'ABC';
let B = 'BCD';
[A,B] = [B,A];
console.log(A); //BCD
console.log(B); //ABC
8. 11. 배열 Destructuring 연습하기
<javascript />
// 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);
9. 13. 객체 Destructuring 연습하기
<javascript />
// 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);
10. 16. 에러와 에러 객체
- 에러 객체 만들기
<javascript />
throw new TypeError('타입 에러가 발생했습니다.');
11. 17. try catch문
<javascript />
// try catch문
try{
//코드
}catch (error){
//에러가 발생했을 때 동작할 코드
}
<javascript />
// try catch문
try{
console.log('에러 전');
const codeit = '코드잇';
console.log(codeit);
codeit = 'codeit';
const lan = 'JavaScript';
console.log(lan);
}catch (error){
console.log('에러 후');
}
12. 20. finally문
- try문에서 어떤 코드를 실행할 때 에러 여부와 상관 없이 항상 실행할 코드를 작성
<javascript />
try {
// 실행할 코드
} catch (err) {
// 에러가 발상했을 때 실행할 코드
} finally {
// 항상 실행할 코드
}
- finally문에서 error 다루기
<javascript />
try {
try {
// 실행할 코드
} catch (err) {
// 에러가 발상했을 때 실행할 코드
} finally {
// 항상 실행할 코드
}
} catch (err) {
// finall문에서 에러가 발생했을 때 실행할 코드
}
13. 21. 퀴즈왕의 길은 험난하다 (try-catch문 연습)
<javascript />
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);
'FRONTEND > JavaScript' 카테고리의 다른 글
| [코드잇 - 모던 자바스크립트] 06. 자바스크립트 모듈 (0) | 2022.11.22 |
|---|---|
| [코드잇 - 모던 자바스크립트] 05. 자바스크립트의 유용한 내부 기능 (0) | 2022.11.21 |
| [코드잇 - 모던 자바스크립트] 03. 함수 다루기 (0) | 2022.11.16 |
| [코드잇 - 모던 자바스크립트] 02. 자바스크립트의 동작 원리 (0) | 2022.11.16 |
| [코드잇 - 모던 자바스크립트] 01. 모던 자바스크립트 이해하기 (0) | 2022.11.16 |
