JS 코드 기초 (조건문, 반복문)

Taehye.on·2023년 2월 21일
2

코드스테이츠 44기

목록 보기
5/89
post-thumbnail

D-7

어제 자바스크립트 기초를 시작하고 코플릿을 푸는데 어려웠다.
개념은 어느정도 알고 있다 생각했지만 막상 코플릿을 보니 막막하고 머리가 하얗게 되는 기분이였고 더 열심히 해야겠다 다짐했다.
오늘은 조건문, 반복문, 함수에 대해 배우는 과정이다.
페어, 줌 일체 없이 혼자 챕터를 진행해야해서 집중력이 떨어질 것 같지만
절대 놓쳐선 안되니 하나하나 제대로 짚고 가야겠다.

🔍 조건문

📌 if문

가장 대표적인 조건문이다. if문은 주어진 조건식의 참/거짓 여부에 따라 실행이 된다.
어제 배운 불린 타입이 바로 떠오르는데 마찬가지로 결과가 불린 타입이 되도록 작성해야 한다.

조건식의 평가 결과가 참일 때 문자열 'hellow world'를 출력하는 코드이다.

if (true){
   console.log('hellow world');
   }

if 뒤에 있는 () 에 조건식을 넣으면 코드블록 내부 코드가 실행이 된다.
조건식 true를 넣어 console.log('hellow world') 가 실행이 된다.

📌 동치연산자 ( === )

동치연산자 === 는 두 피연산자가 동일하면 true , 그렇지 않으면 false 를 반환한다.
!== 는 반대로 동일하면 false , 동일하지 않으면 true 를 반환한다.

let course = 'seb fe';
if (course === 'seb fe') {
  console.log('변수 course에 "seb fe"를 할당했습니다.');
}

📌 비교연산자 ( > , < , >= , <= )

비교연산자는 두 피연산자의 값의 크기를 비교한다.

let num = 5;
if (num < 10) {
	num = num + 1;
}
console.log(num); // 6

📌 논리연산자 ( && , || )

논리합 (||) 과 논리곱 (&&) 을 사용해 복수 조건을 작성할 수 있다.
|| 은 여러 조건 중 하나만 true 여도 true 로 판단하고
&& 은 여러 조건 중 하나라도 false 이면 false 로 판단한다.

let age = 15;
if (age > 13 && age <= 19) {
	console.log('청소년입니다.'); // '청소년입니다.'
}

📌 부정연산자( ! )

부정연산자는 조건을 부정한다. 조건이 true 이면 false , 조건이 false 이면 true 를 리턴한다.

let num = 11;
if (!(num === 10)) {
	console.log('변수 num은 10이 아닙니다.'); // '변수 num은 10이 아닙니다.'
}

🔍 else문

if문을 사용해 조건식이 true 일 때만 코드가 실행되었다.
이 else문을 이용해 조건식이 false 일 때 각각 다른 코드가 실행되게 할 수 있다.

let num = 5;
if (num % 2 === 0) {
	console.log('짝수입니다.');  //----->>>true 일 때
} else {               //----->>>짝수가 아닐 때 (false 일 때)
	console.log('홀수입니다.'); // '홀수입니다.'
}

이처럼 else문은 독립적으로 사용할 수 없고, if문 바로 뒤에 작성해야 한다.

if문else문은 두 번 이상 사용할 수 없지만 else if문은 여러번 사용 가능하다.

let age = 15;
if (age < 8) {
  console.log('미취학아동입니다.');  // 8살 미만일 때
} else if (age >= 8 && age < 14) {
  console.log('초등학생입니다.');    // 8살 이상 14살 미만일 때
} else if (age >= 14 && age < 17) {
  console.log('중학생입니다.'); //  // 14살 이상 17살 미만일 때
} else if (age >= 17 && age < 20) {
  console.log('고등학생입니다.');   // 17살 이상 20살 미만일 때
} else {
  console.log('성인입니다.');
}

🔍 삼항 조건 연산자

if문과 else문을 삼항 조건 연산자로 바꿔 쓸 수 있다.

let num = 5;
num % 2 === 0 ? console.log('짝수') : console.log('홀수'); // '홀수'

삼항 조건 연산자는 조건식을 먼저 작성 후 ? 를 입력하고 그 뒤에 참/거짓일 때
실행할 코드를 각각 입력한다. 참/거짓 실행 코드는 : 로 구분한다.

let num = 5;
if (num % 2 === 0) {
	console.log('짝수입니다.');
} else {
	console.log('홀수입니다.'); // '홀수입니다.'
}

이 코드와 똑같이 동작을 한다.
이처럼 조건에 따라 실행할 코드가 간단하면 삼항 조건 연산자가 편리하며 가독성도 좋다.
하지만 조건이 복잡하면 if문else문 사용이 좋다.

🔍 반복문

📌 for문

JavaScript의 대표적인 반복문이다.
for문을 사용하면 불필요한 코드를 반복적으로 사용하지 않고 간결하게 코드를 작성할 수 있다.

let result = 0;

for (let num = 1; num <= 5; num++) {
  result = result + num;
}

console.log(result); // 15

이 코드는 1부터 5까지 수를 더하는 코드이다.
for문의 형식을 살펴보자.

for (초기값; 조건식; 증감식) {
	// 실행할 코드
}

for 뒤에 오는 () 에는 초기값, 조건식, 증감식 이 들어간다. 코드블록에는 반복해서 실행할 코드가 들어간다. 이제 초기값, 조건식, 증감식 에 대해 자세이 알아보자.

📌 초기값

초기값은 증감식 반복횟수를 카운트하는 역할을 하는 변수이다.
(이때 변수는 정수를 의미하는 integer의 약자인 i를 주로 사용한다.)
초기값은 반복문의 코드블록 내부에서만 유효하다.

// 초기값(i)을 선언하고 1을 할당
for (let i = 1; 조건식; 증감식) {
	console.log(i);
}

📌 조건식

조건식은 코드블록 내부의 코드를 실행할지 여부를 결정한다.
true 일 경우 코드를 실행, false 일 경우 반복문이 종료된다.

// i가 3보다 작거나 같을 경우 코드 실행, 3보다 클 경우 반복문 종료
for (let i = 1; i <= 3; 증감식) {
	console.log(i);
}

📌 증감식

증감식은 코드블록 내부의 코드를 실행한 후 초기값으로 선언된 변수를 증가 또는 감소시키기 위한 표현식이다.

// 코드가 실행될 때마다 i가 1씩 증가
for (let i = 1; i <= 3; i++) {
	console.log(i); // 1 2 3
}

🔍 반복문의 중첩

반복문은 반복문 내부에 또 다른 반복문을 사용할 수 있다.

for (let i = 1; i <= 6; i++) {
	for (let j = 1; j <= 6; j++) {
		console.log(`첫번째 주사위는 ${i}, 두번째 주사위는 ${j}입니다.`);
	}
}

이처럼 반복문은 두 개 이상 중첩이 가능하다.

이렇게 조건문과 반복문에 대해 알아보았다.
이제 시작이니 겁먹지말고 열심히 공부를 해봐야겠다!

0개의 댓글