[JavaScript] 06. 블록문 & 조건문

🟡 1. 블록문(Block statemet/Compound statement)

 - 블록문은 0개 이상의 문들을 중괄호로 묶은 것으로 코드 블록 또는 블록이라고 부릅니다. 자바스크립트에서는 블록문을 하나의 단위로 취급합니다. 블록문은 다른 문들과는 다르게 끝에 세미 콜론(;)을 붙이지 않습니다.

// 블록문 
{
	let name = 'apple';
	console.log(name);
}

// 블록문 겸 반복문
for(let i = 0; i < 10; i++){
	console.log(i);
}

// 블록문 겸 함수
let func = function(a, b){
	return a * b;
}

 

 

 

🟡 2. 조건문(conditional statement)

- 조건문은 문 앞에 어떠한 조건을 걸어 두고 그 조건에 부합한 경우에 문에 들어갈 수 있도록 하는 것입니다.
  예를 들어 롤러코스터를 타려면 키가 110cm 이상이 되어야 합니다. 그럼 여기서 키가 110cm 이상이 조건에 해당하고, 그 조건에 부합을 하면 롤러코스터를 탈 수 있게 됩니다.

- 자바스크립트에서 조건문은 2가지가 있는데 if문과  switch문입니다.

 

 🟣 2.1 if문

 - if문은 주어진 조건식에 부합하면 문 안에 들어가 코드를 실행하고 그렇지 않으면 그 문 안에 코드는 실행되지 않습니다. 만약 조건식의 결과가 boolean 값이 아니라면 강제 변환되어 true 혹은 false로 반환됩니다.

// if else문
if(조건식){
	// 조건식이 true이면 이 블록이 실행됩니다.
}else{
	// 위 조건식이 false라면 이 블록이 실행됩니다.
}


// if else문 예제1

let height = 180;

if(height > 110){
	console.log('롤러코스터 탑승!');
}else{
	console.log('롤러코스터 못타ㅏㅏㅏㅏㅏㅏ ㅠㅠㅠ');
}
// '롤러코스터 탑승!'



// if else문 예제2

let height = 100;

if(height > 110){
	console.log('롤러코스터 탑승!');
}else{
	console.log('롤러코스터 못타ㅏㅏㅏㅏㅏㅏ ㅠㅠㅠ');
}
// '롤러코스터 못타ㅏㅏㅏㅏㅏㅏ ㅠㅠㅠ'

   - if 안에 조건식에 부합하지 않는 모든 값들은 else문을 실행하게 됩니다.

 

// 조건식이 여러개 있는 경우
// if .. else if .. else

if (조건식1){
	// 조건식1이 true이면 이 블록 실행
}else if (조건식2){
	// 조건식1이 false이고 조건식2가 trued이면 이 블록 실행
}else {
	// 조건식1, 조건식2가 false이면 이 블록 실행
}



// if .. else if .. else 예제1

let score = 98;

if (score > 90){
	console.log("you're A!");
}else if (score > 80 && score <= 90){
	console.log("you're B!");
}else {
	console.log("you're C!");
}
// "you're A!"



// if .. else if .. else 예제2

let score = 88;

if (score > 90){
	console.log("you're A!");
}else if (score > 80 && score <= 90){
	console.log("you're B!");
}else {
	console.log("you're C!");
}
// "you're B!"

 - 조건식을 여러 개 만들고 싶은 경우에는 else if를 이용해서 여러 개의 조건식을 추가할 수 있습니다. else if는 여러 개 추가 가능하지만 if, else는 무조건 한 개(else는 0개도 가능)만 존재해야 합니다.

 

// 조건식에서 반환된 값이 boolean이 아닌 경우 강제 변환을 통해서 boolean타입으로 변경
let num = 4;

// 4 % 2를하면 0이 나오는데, 0을 boolean타입으로 강제 변환하면 false가 된다.
if(num % 2){
	console.log("홀수");
}else {
	console.log("짝수");
}
// 짝수

 

 

 

🟡 3.  switch 문

 - switch문은 switch 문의 표현식에서 반환된 값에 맞는 case문으로 이동해서 실행시킵니다. 만약 맞는 case문이 없다면 default문으로 이동하게 됩니다.

switch (표현식) {
	case 표현식1:
    	switch 문의 표현식과 표현식1이 일치하면 실행됨.
        break;
    case 표현식2:
    	switch 문의 표현식과 표현식2가 일치하면 실행됨.
        break;
    default:
    	switch 문의 표현식과 일치하는 case가 없을 경우 실행됨.
}


// 예제
let animal = 'Dog';

switch (animal) {
	case 'Dog':
    	console.log('댕댕이입니다.');
        break;
    case 'Cat':
    	console.log('고영희입니다.');
        break;
    default:
    	console.log('나만 댕댕이, 고영희 없어.');
}

// '댕댕이입니다.'


// 예제2 break를 쓰지 않은 경우
let animal = 'Dog';

switch (animal) {
	case 'Dog':
    	console.log('댕댕이입니다.');
    case 'Cat':
    	console.log('고영희입니다.');
    default:
    	console.log('나만 댕댕이, 고영희 없어.');
}
// '댕댕이입니다.'
// '고영희입니다.'
// '나만 댕댕이, 고영희 없어.'

 - switch 문은 if문과는 다르게 조건에 맞는 case문부터 순서대로 실행이 되는 것입니다. 그래서 break 문을 사용하여 다른 case들을 실행시키지 않게 막는 것입니다. 

 

let name = 'Rose';

switch(name) {
	case 'Dog': case 'Cat': case 'Bird':
    	console.log('동물입니다.');
        break;
    case 'Tree': case 'Rose': case 'Sunflower':
    	console.log('식물입니다.');
        break;
    default:
    	console.log('동물과 식물이 아닙니다.');
}

// '식물입니다.'

- 위 예시와 같이 여러 개의 case를 하나의 문으로 작성할 수 도 있습니다.

 

 

 

📝 정리 

• 블록문은 코드를 중괄호로 묶은 것을 얘기하며, 자바스크립트에서는 블록문을 하나의 단위로 본다.
• 조건문에는 if문과 switch문이 있다.
• if문은 조건식이 true이면 if문 안에 코드를 실행한다. 조건식을 여러 개 추가하고 싶으면 else if를 쓴다. 
• if, else if의 조건이 부합하지는 않은 경우에도 어떠한 코드를 실행시키고 싶다면 else를 쓴다.
• switch문은 switch문 안에 조건식에서 반환된 값에 맞는 case를 찾아가 순서대로 실행시킨다.
• 만약 순서대로 실행을 시키는 게 아니고 해당 case만 실행시키고 싶다면 break문을 사용한다.
• if문과 switch문의 차이는 if문은 조건식이 해당하는 코드만 실행시키고 switch문은 해당하는 case부터 순차 실행한다.
• switch문보다는 if문이 코드의 간결성, 사용법이 간단하므로 if문을 사용하는 것을 추천한다.

 

 

긴 글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~