자바스크립트 문법 (3/4) - 조건문, 반복문, 함수

2022년 11월 8일 · 약 4분

Seung hyo, Lee

Front End Engineer @ Assistfit

❤️‍🔥 TIL : Today I Learned

오늘 정리할 내용

조건문, 반복문, 그리고 함수를 라면 예제로 정리한다.

조건문 [ if, else if, else ]

조건을 만족했을 때만 코드를 실행합니다!

이 조건의 결괏값이 앞서 우리가 배운 boolean입니다. 보통 비교 연산자를 활용하며, () 소괄호 안에 있는 내용이 true 라면 {} 중괄호 안에 있는 코드를 실행합니다. false 라면 다음 조건 (else if, else)을 실행하거나 다음 조건이 없다면 넘어갑니다!

조건문에 사용되는 구문은 위처럼 3가지! if 와 else if 그리고 else

먼저 첫 조건을 가지려면 if 구문으로 코드를 작성합니다.

if (조건) {
  // 조건을 만족할 때 실행 할 코드
}

이후 if 구문의 조건을 만족하지 않았을 때 실행하고 싶은 코드는 else 또는 else if 구문과 함께 작성합니다!

let 라면가격 = 4800;

if (라면가격 < 4000) {
  console.log("오 싸네~ 사야지");
} else if (라면가격 <= 5000) {
  console.log("음 고민해 볼게요~~");
} else {
  console.log("너무 비싸요..");
}

이런 코드가 있다면 컴퓨터는 어떻게 출력할까? 자, 해석부터 해보자.

현재 라면 가격은 4800원이다.
if (라면 가격이 4000원보다 싸다) - 조건 성립이 안되므로 다음 조건으로 넘어간다!
else if (라면 가격이 5000원 이하 이다) - 여기서 true
else 구문은 실행하지 않는다! (else if 구문에서 true를 반환했기 때문에 종료)

자 이것처럼 조건문은 개발자가 코딩을 디테일하게 할수록 더 조건이 많아지고 섬세한 필터가 된다!

팁

else 에 조건 ()이 없는 이유는 나머지를 모두 실행하기 때문이다!

만약 위 조건에서 라면 가격이 5000원보다 비싸다면 if 와 else if 에서의 조건이 성립하지 않으므로, else 구문에서 조건 없이 받아 처리한다!!

반복문 [ Loop ]

특정 코드를 반복해서 실행할 수 있다! 이때 조건을 설정하여 우리가 원하는 만큼 반복할 수 있다!

반복문에는 while문 과 for문이 있다.

while (조건) {
  // 조건을 만족할 때 실행할 코드
}

while 문은 if 문과 형태가 비슷하다. 하지만 반복 실행이 되므로 조건이 무한루프에 빠지지 않도록 증감 연산자를 활용하여 데이터를 변환해야 한다.

let 라면물온도 = 95;
while (라면물온도 < 100) {
  console.log(`${라면물온도}도면 더 끓여야 합니다.`);
  라면물온도++; // 이 구문이 없으면 무한루프에 빠집니다
}

/*
=>
'95도면 더 끓여야 합니다.'
'96도면 더 끓여야 합니다.'
'97도면 더 끓여야 합니다.'
'98도면 더 끓여야 합니다.'
'99도면 더 끓여야 합니다.'
end!
*/

for (begin; condition; step) {
  // 조건 만족시 실행코드
}

// begin : 변수를 선언하고 값을 할당합니다.
// condition : 연산을 처리하고 결과값이 true 라면 계속실행, false 라면 for문 종료.
// step : 증감연산자 입력, condition 이 for문을 종료시 까지 반복합니다.

while과 같은 반복문이지만 더 명시적으로 반복문의 조건을 명확하게 표현할 수 있다! (조건이 잘 보임)

for (let 라면물온도 = 95; 라면물온도 < 100; 라면물온도++) {
  console.log(`${라면물온도}도면 더 끓여야 합니다.`);
}

/*
=>
'95도면 더 끓여야 합니다.'
'96도면 더 끓여야 합니다.'
'97도면 더 끓여야 합니다.'
'98도면 더 끓여야 합니다.'
'99도면 더 끓여야 합니다.'
end!
*/

반복문과 조건문 활용

반복문과 조건문은 코딩하는 데 있어서 핵심 중의 핵심이다! 과장 조금 더 보태서 우리가 짜는 프로그램은 반복문과 조건문 파티이기도 하다😱 입력된 데이터에 대해 조건문을 활용해 수많은 조건을 분기하고 반복문을 처리하는데 프로그램이 주로 하는 일이다.

for (let num = 1; num <= 10; num++) {
  if (num % 3 === 0) {
    console.log(`${num}는 3으로 나눠서 떨어지는 숫자 입니다.`);
  }
}

/*
=>
3는 3으로 나눠서 떨어지는 숫자 입니다.
6는 3으로 나눠서 떨어지는 숫자 입니다.
9는 3으로 나눠서 떨어지는 숫자 입니다.
*/

// quiz
for (let i = 1; i <= 20; i++) {
  if (i % 2 === 0) {
    console.log(`${i}는 짝수입니다.`);
  } else {
    console.log(`${i}는 홀수입니다.`);
  }
}

/*
=>
1는 홀수입니다.
2는 짝수입니다.
3는 홀수입니다.
4는 짝수입니다.
~
20는 짝수입니다.
*/

함수 ( function )

우리가 변수를 선언하고 해당 변수에 값을 할당했던 것처럼, 함수도 선언을 하고 해당 함수가 실행할 코드의 집합을 만들어서 저장해 줍니다. 실행 할 코드는 {} 바디에!

사실 프론트엔드 개발에서 함수가 굉장히 많이 쓰입니다. 대부분의 기능구현은 함수가 담당합니다. ex) 이벤트처리, 기능처리 등

function 함수명(매개변수1, 매개변수2) {
  // 이 함수에서 실행 할 코드들
  return 반환값;
}

// 함수명 : 함수가 하는 일을 대표하는 이름을 지어주는게 좋습니다.
// 매개변수 : 해당 함수{바디} 내부에 사용할 수 있는 일종의 변수, 함수 호출시 전달합니다.
// return : 함수 밖으로 반환할 값을 지정합니다.

자 언제나 처럼, 라면 예제를 또 봐야 이해가 가겠죠?^^

function 라면별가격(a, b, c) {
  const sum = a + b + c;
  const avg = sum / 3;
  return console.log(`라면은 평균 ${avg}원`);
}

라면별가격(4500, 6100, 5600);

// => 5400

위 예제는, 라면이 어떤 라면인지 구분이 안되는 상황이에요😮 그래서 이런 방법도 있어요!

function 라면평균가격(라면1, 라면2, 라면3) {
  const 평균 = (라면1 + 라면2 + 라면3) / 3;
  return 평균;
}

const 신라면 = 6200;
const 진라면 = 4800;
const 짜파게티 = 7000;
const 오늘 = 라면평균가격(신라면, 진라면, 짜파게티);
console.log(`오늘의 라면 평균가격: ${오늘}`);

조건문 [ if, else if, else ]​

반복문 [ Loop ]​

반복문과 조건문 활용​

함수 ( function )​

조건문 [ if, else if, else ]

반복문 [ Loop ]

반복문과 조건문 활용

함수 ( function )