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

 

❤️‍🔥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('너무 비싸요..')
}

이런 코드가 있다면 컴퓨터는 어떻게 출력할까?

 

자, 해석부터 해보자

 

1. 현재 라면 가격은 4800원이다.
2. if (라면 가격이 4000원보다 싸다) - 조건 성립이 안되므로 다음 조건으로 넘어간다!
3. else if (라면 가격이 5000원 이하 이다) - 여기서 true
4. 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(`오늘의 라면 평균가격: ${오늘}`)