Day +7

비트·2023년 4월 19일

JavaScript js 조건문 코드스테이츠

CodeStates

목록 보기

7/54

1. 조건문

1-1. if문

if문은 주어진 조건식의 참(true)/거짓(false) 여부에 따라 실행이 결정
JavaScript의 타입은 불린 타입

//조건식의 평가 결과가 참일 때 문자열 ‘hello world’를 출력하기

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

⚡ 동치연산자 (===)

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

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

//!== 예시
let name = 'parkhacker';
if (name !== 'kimcoding') {
	console.log('가입할 수 있는 이름입니다.'); // '가입할 수 있는 이름입니다.'
}

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

두 피연산자의 값의 크기를 비교합니다. 수학에서의 부등호 기호의 사용법과 유사

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

if (num > 5) {
	num = num - 1;
}
console.log(num); // 5

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

논리합(||)과 논리곱(&&)을 사용하면 복수의 조건을 작성할 수 있다.
||은 여러 조건 중 하나만 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이 아닙니다.'
}

1-2. else문

조건이 true일 때, 그리고 false일 때 각각 다른 코드가 실행되도록 사용.

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

else문은 독립적으로 사용할 수 없고, if문 바로 뒤에 작성.
여기서 조건을 더 추가하고 싶으면 else if문을 사용.
if문과 else문은 두 번 이상 사용할 수 없지만 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('성인입니다.');
}

⚡ 삼항 조건 연산자

if문과 else문을 삼항 조건 연산자로 바꿔 쓸 수 있습니다.
조건식 ? 참 : 거짓 ;

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

//삼항연산자 변경시
let num = 5;
num % 2 === 0 ? console.log('짝수입니다.') : console.log('홀수입니다.'); // '홀수입니다.'

2. 반복문

2-1. for문

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
}
```

🔥 위 예제의 실행 순서는 다음과 같다.

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

let result = 0;

result = result + 1;
result = result + 2;
result = result + 3;
result = result + 4;
result = result + 5;

console.log(result); // 15


// 반복문을 사용하면 불필요한 코드를 반복적으로 사용하지 않고 간결하게 코드를 작성할 수 있다.
let result = 0;

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

console.log(result); // 15

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

2-2. 문자열과 반복문

⚡ 인덱스(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 <= 9; i++) {
	console.log(str[i]);
}
//변수 i가 0부터 9까지 1씩 증가하며 반복문이 실행
//변수 str에 할당된 문자열 'codestates'의 첫 번째 문자인 ‘c’의 인덱스는 0, 마지막 문자인 ‘s’의 인덱스는 9이므로,
//결과적으로 이 코드는 각 문자를 하나씩 차례대로 출력하는 코드가 된다.


//문자열의 길이가 매우 길거나 또는 알 수 없는 상태일 때는 어떻게 해야 할까?
let str = 'codestates';
for (let i = 0; i <= str.length - 1; i++) {
	console.log(str[i]);
}