JS 포스팅을 하면서 참고하던 모던 자바스크립트에서 예전 패스트캠퍼스 프론트앤드 개발 패키지 영상을 결제해놓은게 있어서 벨로퍼트 강사님의 모던자바스크립트 강의와 자료로 이제 포스팅을 정리하려고 합니다. 영상의 강의를 보고 벨로퍼트와 함께하는 모던 자바스크립트 를 참고해 정리를 해서 포스팅의 내용이 간결해질거 같습니다.
조건문
조건문을 사용하면 특정 조건이 만족됐을 때 특정 코드를 실행할 수 있다.
if문
가장 기본적인 조건문은 if문이다.
if문은, "~~하다면 ~~를 해라"를 의미한다.
if문은 조건이 만족 될 때에만 특정 코드를 실행 시킬 수 있다.
if (조건) {
코드;
}예시코드
const a = 1;
if (a + 1 === 2) {
console.log('a + 1 이 2 입니다.');
}결과는, "a + 1 이 2 입니다." 이 출력된다.
여기서 a의 값이 변해 If 문의 조건을 성립하지 못한다면 아무것도 출력되지 않는다.
조건이 만족됐을 때 실행시킬 코드가 { }로 감싸져 있는데, 이를 코드 블록이라고 한다.
만약에 조건이 true 가 된다면 우리가 지정한 코드가 실행되는 것이고, false 가 된다면 코드가 실행되지 않는다.
if-else 문
if-else문은 "~~하다면 ~~하고, 그렇지 않다면 ~~해라"를 의미한다.
예시코드
const a = 10;
if ( a > 15) {
console.log('a 가 15보다 큽니다.');
} else {
console.log('a 가 15보다 작습니다.');
}위 코드의 결과는 "a가 15보다 작습니다."가 나온다.
만약 특정 조건이 만족할 때와 만족하지 않을 때 서로 다른 코드를 실행해야 된다면 if-else 구문을 사용 할 수 있다.
if-else if문
if-else if문은 여러 조건에 따라 다른 작업을 해야 할 때 사용한다.
예시코드
const a = 10;
if (a === 5) {
console.log('5입니다!');
} else if (a === 10) {
console.log('10입니다!');
} else {
console.log('5도 아니고 10도 아닙니다.');
}결과는 "10입니다!"가 나온다.
else if의 개수는 상관이없다.
switch/case 문
switch/case문은 특정 값이 무엇이냐에 따라 다른 작업을 하고 싶을 때 사용한다.
예시코드
const device = 'iphone';
switch (device) {
case 'iphone':
console.log('아이폰!');
break;
case 'ipad':
console.log('아이패드!');
break;
default:
console.log('아이폰도 아이패드도 아닙니다.');
}device의 값의 따라 출력결과가 다르게 나온다.
switch/case 문은 이와 같이 특정 값이 무엇이냐에 따라 다른 작업을 수행 할 수 있게 해준다.
switch/case 문에서는 각 case 에서 실행할 코드를 작성하고 맨 만지막에 break;를 해주어야한다. break를 하지않으면 그 다음 case의 코드까지 실행해버린다.
맨 아래의 default:는 device 값이 case로 준비하지 않은 값일 경우를 의미한다.
Front-end