블로깅챌린지]Unit.5 JavaScript 기초(조건문, 반복문) - 코드스테이츠

SEB_FE_45

Section1. Unit.5 JavaScript 기초

---

1. 조건문

가. if문 개요

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

참과 거짓을 판단하기 위한 자바스크립트 타입은 Boolean(불리언) 타입이다.

조건식은 결과가 불리언타입이 되도록 작성해야 한다.

---

1) 동치연산자(=== / !==)

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

!==은 반대로 동일하지 않으면 true, 동일하면 false를 반환한다.

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

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

---

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

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

let num = 5;			//num변수에 값 5를 할당한다.
if (num < 10) {			//만약 변수 num 이 10보다 작으면
	num = num + 1;		//변수 num에 num+1을 재할당하자
}
console.log(num); // 6		//변수 num은 num+1이 되기 때문에 5(최초할당값)+1 = 6

if (num > 5) {			//만약 변수 num이 5보다 크면
	num = num - 1;		//변수 num에 num-1을 재할당하자
}
console.log(num); // 5		//변수 num은 num-1이 되기 때문에 6(재할당값)-1 = 5

---

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

논리합( | | )과 논리곱( && )을 사용하면 복수의 조건을 작성할 수 있다.

논리합( | | )은 여러 조건 중 하나만 true여도 true를 반환한다(OR).

논리곱( && )은 조건들 중 하나라도 false면 false를 반환한다(AND).

let age = 15;				//age 변수에 15를 할당한다.
if (age > 13 && age <= 19) {		//변수age가 13보다 크고(AND), 19보다 작거나 크면
	console.log('청소년입니다.'); // '청소년입니다.'	//청소년입니다를 반환해라
}

 

---

4) 부정연산자( ! )

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

let num = 11;			//num 변수에 11을 할당하자
if (!(num === 10)) {		//변수 num이 10이 아니면(!)
	console.log('변수 num은 10이 아닙니다.'); // '변수 num은 10이 아닙니다.'  //log 값을 출력해라
}

---

나. else 문

else 문을 사용하면 조건이 true일 때와 false 일때 각각 다른 코드가 실행되도록 할 수 있다.

let num = 5;						// num 변수에 5를 할당하자
if (num % 2 === 0) {					// num변수를 2로 나눈 나머지 값이 0이라면
	console.log('짝수입니다.');			// 짝수입니다를 반환해라
} else {						// 그렇지 않으면
	console.log('홀수입니다.'); // '홀수입니다.'	//홀수입니다를 반환해라
}	// 변수 num에 5가 할당되어 있었기 때문에 2로 나누면 나머지는 1이된다. 이에 홀수입니다가 반환된다.

else문은 독립적으로 사용이 불가하다. if문 뒤에 사용해야 하며, 조건을 추가할 때에는 else if문을 사용한다.

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

let age = 15;					//age 변수에 15를 할당하자
if (age < 8) {					//변수 age가 8보다 작으면
  console.log('미취학아동입니다.');		// 미취학아동입니다를 출력하자
} else if (age >= 8 && age < 14) {		// 8보다 크거나 작고(논리곱), 14보다 작다는 조건이 맞으면
  console.log('초등학생입니다.');		//초등학생입니다를 출력하자
} else if (age >= 14 && age < 17) {		// 14보다 크거나 작고(논리곱), 17보다 작다는 조건이 맞으면
  console.log('중학생입니다.'); // '중학생입니다.'	// 중학생입니다를 출력하자
} else if (age >= 17 && age < 20) {		// 17보다 크거나 작고(논리곱), 20보다 작다는 조건이 맞으면
  console.log('고등학생입니다.');		// 고등학생입니다를 출력하자
} else {					// 이 외에는
  console.log('성인입니다.');			// 성인입니다를 출력하자
}	//위 예제는 변수age가 15이므로, 14보다 크거나 작고, 17보다는 작다는 조건이 맞기에 중학생입니다 출력됨

---

1) 삼항 조건 연산자

if문과 else 문을 삼항 조건 연산자로 바꿔 쓸 수 있다. 조건식을 먼저 작성한 후 ? 를 입력하고, ? 뒤로 참/거짓일때 실행할 코드를 입력한다. 참/거짓일 때 실행할 코드는 : 으로 구분한다.

삼항 조건 연산자를 활용하는 이유는 가독성에 있다. 다만 조건에 따라 실행해야 할 내용이 복잡하면 if~else문을 사용하는 것이 좋다.

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

// 위 코드와 아래 코드는 값이 같다.

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

---

2. 반복문

가. for문

불필요한 코드를 반복적으로 사용하지 않고 간결하게 코드를 작성하는 방법이다.

let result = 0;							

for (let i = 1; i <= 5; i++) {	
//for문에 설정한 변수 i은 1부터 시갖하여 5보다 작거나 같아질 때까지 1씩증가한다.
  result = result + i;
//rusult=+i 와 같이 작성할 수도 있다.
//변수 result값에 result + i 값을 재할당한다.
}

console.log(result); // 15

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

for문의 형식은 for(초기값; 조건식; 증감식) { //실행할 코드 }로 구성되어있다.

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

조건식은 코드블럭 내부의 코드의 실행 여부를 결정한다(true면 실행 / false면 종료).

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

---

나. 문자열과 반복문

1) 인덱스(Index)

문자열의 순서이며, 문자열의 첫번째 문자의 인덱스는 0이다.

특정문자의 인덱스를 확인하는 메서드는 indexOf( ) 이다. 이때, 찾는 문자가 2개 이상일 경우, 가장 앞에있는 문자의 인덱스를 조회한다.

 

2) 길이(length)

문자열 뒤에 .length를 붙여서 사용한다. 문자열의 길이를 모르는 경우 문자열의 길이만큼 for문을 실행하기 위해서는 아래와 같이 작성한다. 

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

str.length-1 인이유는 'hello, my world'의 문자열 길이는 15이지만, 인덱스의 경우 0부터시작하기 때문에 문자열의 마지막인덱스는 14가 된다. 이에 i <= str.length - 1 작성하거나 i < str.length라고 하면, 문자열의 길이만큼 반복문을 실행한다.

 

3) 반복문과 조건문

반복이 진행되는 동안 특정 조건에 따라 문제를 해결할 수 있도록 코드를 작성하는 것이다.

반복문에서 설정한 값들이 반복되면서 조건문에서 설정한 값을 만족시켰을 때, 반복이 종료되고, 결과가 반환된다.

 

4) 반복문의 중첩

반복문 내에 또다른 반복문을 사용할 수 있다. 중첩된 반복문은 외부 반복문의 초기화와 조건식 평가가 이뤄진 후, 내부 반복문이 실행된다. 내부반복문도 초기화와 조건식 평가가 이루어진 후 내부 코드가 실행되고, 증감식, 조건식 평가가 반복적으로 이뤄진다.

반복문은 2개 이상 중첩이 가능하다. 2개가 중첩되면 이중 반복문, 3개가 중첩되면 삼중반복문이라 한다.

---

다. while 문

for문은 초기화, 조건식, 증감식을 입력해야 하는 반면, while 문은 조건식만 입력한 후, 그 평가결과가 true인 경우 코드블록 내부의 코드를 반복하여 실행한다.

let num = 0;						//num에 0을 할당(초기화 값에 해당)

while (num < 3) {					//num변수가 3보다 작은 것이 true면
	console.log(num); // 0 1 2		//num을 출력하고, num+1해라
	num++							
}

//for문으로 바꾸면 아래와 같다.

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

while 반복문 사용시 무한루프를 주의해야 한다. 이에 조건식이 false로 평가되는 순간이 반드시 필요하다.

무한루프는 반복문이 종료되는 조건식이 항상 참으로 평가되어 무한이 반복되는 현상을 말한다.

let num = 1;
while (num > 0) {		//num이 항상 0보다 크기때문에 무한루프(반복)이 발생한다.
	console.log(num);
	num++;
}

do..while문은 아래와 같이 작성한다.

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

 

---

for문을 사용하는 경우

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

while문을 사용하는 경우

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

---

3. 오늘의 회고!

통곡의 벽이라 불리는 JavaScript의 조건문과 반복문을 배웠다. 왜 통곡의 벽인지 실감하는 하루였다.

우선 코플릿을 통해 문제를 푸는 동안 문제 해석에도 어려움을 느꼈다...

좌절을 맛본 후, 페어분과 반복문 코플릿 문제를 함께 풀었다.

문제를 풀어가면서, 페어분께서 코드를 해석하는 방법등을 상세하게 알려주셔서 많은 도움이 되었다.

내일까지 함께 해주시는 페어분이 조금이라도 보람된 시간이 되길 바라는 마음에서 오늘은 조금더 열심히 공부를 해보자!

 

벌써 7일째 수업이 진행되고 있다. 리얼 훈련병이 된 느낌이다.

제식조차 못해 얼차려를 받는 훈련병과 같이 어쩌면 기본적인 것들도 이해가 되지 않아 코플릿 문제들을 통해 얼차려를 받는 기분이 든다.

과거 군대에서도 반복 훈련과 이미지트레이닝을 통해 좋은 훈련성적을 받았었다. 그때와 같이 이번 부트캠프에서도 누구보다 열심히 노력하면 보상이 있을 것이라 생각한다!

캠프 수료후 성장해 있을 나를 기대하자!