[JavaScript] 기초(2)

[ 조건문 ]

▶ if문

: 주어진 조건식의 참(true) / 거짓(false) 여부에 따라 실행이 결정된다.

if 뒤에 있는 소괄호에 조건식을 넣으면, 조건식이 참으로 평가된 경우 코드블록 내부의 코드가 실행된다.

let name = 'kimcoding';

if (name === 'kimcoding') {
	console.log('중복된 이름입니다.'); // '중복된 이름입니다.'
}

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

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

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

// 실습) age가 19보다 크고, job이 student가 아닐 경우 코드가 실행되도록 조건식을 작성하세요.

let age = 25;
let job = 'sw engineer';

if (age > 19 && job !== 'student') {
  console.log('조건을 만족합니다.');
}

▶ else문

: 조건이 true일 때, 그리고 false일 때 각각 다른 코드가 실행된다.

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

조건을 더 추가하고 싶으면 else if문을 사용하며, else if는 여러 번 사용이 가능하다.

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

// 실습) 구구단을 출력하는 함수에서 변수 num이 2와 9사이의 수일 경우 구구단을 출력하고,
// 그렇지 않은 경우 2와 9사이의 숫자를 입력해 달라는 메시지를 콘솔에 출력하도록 코드를 완성하세요.

let num = 0;
if (num <= 9 && num >= 2) {
  console.log(num * 1);
  console.log(num * 2);
  console.log(num * 3);
  console.log(num * 4);
  console.log(num * 5);
  console.log(num * 6);
  console.log(num * 7);
  console.log(num * 8);
  console.log(num * 9);
} else {
  console.log('2와 9사이의 수를 입력하세요.');
}

☑️ 2 <= num <= 9 이런 식으로 합쳐 쓰면 작동 X

▶ 삼항 조건 연산자

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

참/거짓일 때 실행할 코드는 :로 구분.

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

위의 예시처럼 조건에 따라 실행할 코드가 간단하다면, 삼항 조건 연산자를 활용하는 것이 편리할 뿐만 아니라 가독성도 좋다. 그러나 조건에 따라 실행해야 할 내용이 복잡하다면, if문과 else문을 사용하는 것을 추천.

[ 반복문 ]

● for문

for (초기값; 조건식; 증감식) {

// 반복해서 실행할 코드

}

초기값: 증감식 반복횟수를 카운트하는 역할의 변수

(이때 변수는 integer(정수)의 약자인 i를 주로 사용한다. iteration(반복)의 약자라는 이야기도 있음. )

초기값은 반복문의 코드블록 내부에서만 유효하다.

조건식: 코드블록 내부 코드의 실행 여부를 결정하는 식.

true일 경우에는 코드를 실행하며, false일 경우에는 반복문이 종료된다.

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

let result = 0;

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

console.log(result); //1부터 5까지의 수를 차례대로 더한 값->15

위 예시 코드의 진행 순서

for문 내부에 num이라는 변수를 선언하고 1이라는 초기값을 할당한다.
변수 num이 5보다 작거나 같은지 확인한다.
2의 결과가 true면, 코드블록 내부의 코드를 실행한다.
변수 num을 1증가 시킨다.
2부터 4까지 반복한다.
2의 결과가 false면, 반복문이 종료된다.

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

위 예제의 실행 순서

for문 내부에서 유효한 변수 i를 선언하고 1을 할당한다.
조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 1이므로 i <= 3은 true로 평가된다.
코드블록 내부의 console.log(i)가 실행되어 1이 출력된다.
증감식에 따라 i가 1증가 한다. i는 2가 된다.
조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 2이므로 i <= 3은 true로 평가된다.
코드블록 내부의 console.log(i)가 실행되어 2가 출력된다.
증감식에 따라 i가 1증가 한다. i는 3이 된다.
조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 3이므로 i <= 3은 true로 평가된다.
코드블록 내부의 console.log(i)가 실행되어 3이 출력된다.
증감식에 따라 i가 1증가 한다. i는 4가 된다.
조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 4이므로 i <= 3은 false로 평가된다.
반복문이 종료된다.

☞ 반복문을 이용하여 구구단 예제 간결하게 작성하기

let num = 3;
if (num >= 2 && num <= 9) {
	console.log(num * 1); // 3
	console.log(num * 2); // 6
	console.log(num * 3); // 9
	console.log(num * 4); // 12
	console.log(num * 5); // 15
	console.log(num * 6); // 18
	console.log(num * 7); // 21
	console.log(num * 8); // 24
	console.log(num * 9); // 27
} else {
	console.log('2와 9사이의 수를 입력하세요.');
}

//반복문 사용
let num = 3;
if (num >= 2 && num <= 9) {
	for (let i = 1; i <= 9; i++) {
		console.log(num * i);
	}
} else {
	console.log('2와 9사이의 수를 입력하세요.');
}

- 인덱스(index)

※ 첫 번째 문자의 인덱스는 0

let str = 'codestates';
console.log(str[0]); // 'c'
console.log(str[4]); // 's'

indexof() 를 이용하면 특정 문자의 인덱스를 확인할 수도 있다.

let str = 'codestates';
console.log(str.indexOf('c')); // 0
console.log(str.indexOf('e')); // 3

만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회.

- 길이(length)

문자열의 길이는 문자열 뒤에 .length를 붙임으로써 조회할 수 있다.

let str = 'codestates';
console.log(str.length); // 10

만약 문자열의 첫 번째 문자부터 마지막 문자까지 모두 출력하는 코드를 구현하려면?

let str = 'codestates';
for (let i = 0; i <= str.length - 1; i++) {
	console.log(str[i]);
}

→ 조건문 + 반복문

// 실습) 1부터 10까지의 숫자 중 홀수만 출력하도록 코드를 작성하세요.
for (let i = 1; i <= 10; i++) {
	if (i % 2 === 1) {
		console.log(i);
	} // i%2 !== 0 으로 작성해도 답 나옴
}

// 실습2) 주어진 문자열의 문자들 중, 인덱스가 짝수인 문자만 출력하도록 코드를 구현하세요.
let str = 'software engineering bootcamp';

for (let i = 0; i < str.length; i++) {
	if (i % 2 === 0) {
		console.log(str[i]);
	}
} // s f w r n i e r n o t a p

※ 공백도 하나의 문자열로 취급함.

→ 반복문의 중첩 (반복문은 두 개 이상 중첩 가능)

//  정육면체 주사위 두 개를 굴려서 나올 수 있는 모든 경우의 수를 구하기 위한 코드
for (let i = 1; i <= 6; i++) {
	for (let j = 1; j <= 6; j++) {
		console.log(`첫번째 주사위는 ${i}, 두번째 주사위는 ${j}입니다.`);
	}
}

위 코드의 실행순서는 다음과 같다.

변수 i를 선언하고 1을 할당한다.
i가 6보다 작거나 같은지 평가한다.
1. 변수 j를 선언하고 1을 할당한다.
2. 변수 j가 6보다 작거나 같은지 평가한다.
  1. i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${1}입니다.)
  2. j가 1 증가한다.
3. 변수 j가 6보다 작거나 같은지 평가한다.
  1. i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${2}입니다.)
  2. j가 1 증가한다.
4. 변수 j가 6보다 작거나 같은지 평가한다.
  1. i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${3}입니다.)
  2. j가 1 증가한다.
5. 변수 j가 6보다 작거나 같은지 평가한다.
  1. i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${4}입니다.)
  2. j가 1 증가한다.
6. 변수 j가 6보다 작거나 같은지 평가한다.
  1. i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${5}입니다.)
  2. j가 1 증가한다.
7. 변수 j가 6보다 작거나 같은지 평가한다.
  1. i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${6}입니다.)
  2. j가 1 증가한다.
8. i가 6보다 작거나 같은지 평가한다.
  1. 내부 반복문을 종료한다.
i가 1증가한다.
i가 6보다 작거나 같은지 평가한다.
1. 변수 j를 선언하고 1을 할당한다.
2. 변수 j가 6보다 작거나 같은지 평가한다.
  1. i와 j를 각각 출력한다. (첫번째 주사위는 ${2}, 두번째 주사위는 ${1}입니다.)
  2. j가 1 증가한다.
3. 변수 j가 6보다 작거나 같은지 평가한다.
  1. i와 j를 각각 출력한다. (첫번째 주사위는 ${2}, 두번째 주사위는 ${2}입니다.)
  2. j가 1 증가한다.
4. …(중략)…
5. 변수 j가 6보다 작거나 같은지 평가한다.
  1. i와 j를 각각 출력한다. (첫번째 주사위는 ${6}, 두번째 주사위는 ${6}입니다.)
  2. j가 1 증가한다.
6. 변수 j가 6보다 작거나 같은지 평가한다.
  1. 내부 반복문을 종료한다.
i가 1증가한다.
i가 6보다 작거나 같은지 평가한다.
외부 반복문을 종료한다.

☞ 이중반복문으로 구구단 전체 출력하기

for (let i = 2; i <= 9; i++) {
  console.log(`${i}단`);
  for (let j = 1; j <= 9; j++) {
    console.log(`${i} x ${j} = ${i * j}`);
  }
}

● while문

: 초기화, 조건식, 증감식이 모두 필요한 for문과 달리 while문은 조건식만 입력한 후 조건식의 평가결과가 true인 경우 코드블록 내부의 코드를 반복하여 실행한다.

// for문 사용
for (let num = 0; num < 3; num++) {
	console.log(num); // 0 1 2
}

// while문 사용
let num = 0;

while (num < 3) {
	console.log(num); // 0 1 2
	num++
}

※ while문을 사용할 때는 무한루프(반복문이 종료되는 조건식이 항상 참으로 평가되어 무한히 반복되는 현상)를 주의!

● do ... while문

: while 뒤에 오는 조건식이 true로 평가되는 동안 do 뒤에 오는 코드블록 내부의 코드를 반복하여 실행한다.

단, 이 경우 do의 코드블록 내부의 코드가 최소 한 번은 실행됨.

do {
	console.log('코드블록 내부의 코드는 최소 한 번은 실행됩니다.') 
	//'코드블록 내부의 코드는 최소 한 번은 실행됩니다.'
} while (false)

(참고) for문과 while문의 용도는 명확하게 구분되지 않는다. 그러나 주로 사용하는 상황은 있다.

for문을 사용하는 경우

반복 횟수가 비교적 명확할 때
배열, 문자열 내부를 순회할 때
반복문의 중첩이 필요할 때

while문을 사용하는 경우

반복 횟수가 명확하지 않을 때

'22.12.15 ~ 23.06.08 코드스테이츠' 카테고리의 다른 글

[HTML] 기초 (0)	2022.12.22
[JavaScript] 기초(4) (0)	2022.12.22
[JavaScript] 기초(3) (0)	2022.12.22
[JavaScript] 기초(1) (0)	2022.12.16
< 목표와 계획 > (0)	2022.12.16