안녕하세요. 🥰🥰🥰
오늘도 어김없이 돌아온 자바스크립트의 기초를 다져보는 시간! 데이터 제어하기에 대해 알아보도록 하겠습니다.
여기에는 지난 번에 했던 if문이 포함되니 복습한다는 느낌으로 함께 공부하시면 좋을 것 같습니다.
데이터 제어하기
자바스크립트 내에서 데이터를 제어하는 종류에는 다양한 것이 있는데요.
가장 대표적인 것이 if문이며 그 외에 if문 생략, 삼항 연산자, 다중 if문, 중첩 if문, switch문, while문, do while문, for문, 중첩 for문, continue문, break문이 있습니다. 이 친구들에 대해서 자세히 알아보도록 하겠습니다.
👉 기본 if문
자바스크립트에서 쓸 가장 일반적인 형태이자 기본적인 구문 중 하나이자 조건에 따라 다른 작업을 수행하려고 할 때 작성하는 구문입니다.
if(조건식){
//조건식이 참일때 표현식
}👉 if else문
조건이 맞을때와 틀릴때의 2가지 경우에 대한 코드를 작성하는 구문입니다.
{
if(조건식){
document.write("실행되었습니다.(true)"); // 참 실행
} else {
document.write("실행되었습니다.(false)"); // 거짓 실행
};
}
// 조건식에 들어가는 것에 따른 결과값
// true : 1, 2, "0", "1", "ABC", [], {}, true ..... flase를 제외한 나머지(숫자,문자열)
// false : 0, null, undefined, false, ""(빈문자열)여기서 살펴볼 것은 false의 0입니다. 0은 우리가 생각하기에 숫자이지만 숫자로 치지 않는 특별한 경우이기 때문에 false가 됩니다.
👉 if문 생략
중괄호 {}을 생략해서 조금 더 간단히 작성할 수 있습니다.
{
const num = 100;
// 정석문법
// if(num){
// document.write("실행되었습니다.(true)");
// } else {
// document.write("실행되었습니다.(flase)");
// }
//생략
if(num) document.write("실행되었습니다.(true)");
else document.write("실행되었습니다.(false");
}
//결과값 : 실행되었습니다. (true)👉 삼항 연산자
조건문을 간결하게 표현하는 연산자. 삼항 연산자는 "if-else"문을 한 줄로 간결하게 표현이 가능하므로 기존 if문보다 더 효율적으로
사용이 가능합니다.
* 원본
{
const num = 100;
if(num == 100){
document.write("true");
} else {
document.write("false");
}
}
* 삼항 연산자 사용
(num == 100) ? document.write("true") : document.write("flase");
결과값 : true👉 다중 if문
if 문 이후에 여러 조건을 검사해야 할 경우 사용하게 되는 식입니다.
여러 개의 조건 중 하나가 true인 경우 해당하는 값을 실행하고 전체 if문을 종료합니다.
// if(num === 90){} // 90이라는 것이 숫자인지 문자인지 확인하고 싶다면 =을 세 개 쓰면된다.
{
const num = 100;
if(num == 90){
document.write("실행되었습니다.(num == 90)");
} else if (num == 100) {
document.write("실행되었습니다.(num == 100)");
} else if (num == 110) {
document.write("실행되었습니다.(num == 110)");
} else if (num == 120) {
document.write("실행되었습니다.(num == 120)");
} else {
document.write("실행되었습니다.");
}
}
* 삼항 연산자 사용
(num == 100) ? document.write("true") : document.write("flase");
결과값 // 실행되었습니다.(num == 100)👉 중첩 if문
중첩 if문은 if문 안에 if문을 추가하는 것입니다.
{
const num = 100;
if(num == 100){
document.write("실행되었습니다.(1)");
if(num == 100){
document.write("실행되었습니다.(2)");
if(num == 100){
document.write("실행되었습니다.(3)");
}
}
} else {
document.write("실행되었습니다.(4)")
}
}
결과값 // 실행되었습니다.(1)실행되었습니다.(2)실행되었습니다.(3)👉 switch문
다중 if문과 흡사하며 다중 if문으로 변경이 가능합니다.
조건에 맞으면서 break 키워드가 있다면 그 실행문에서 끝이나며, break를 사용하지 않는다면 무한으로 빠지며 모든 키워드를 실행합니다.
{
const num = 100;
switch(num){
case 90:
document.write("실행90");
break;
case 80:
document.write("실행80");
break;
case 70:
document.write("실행70");
break;
case 60:
document.write("실행60");
break;
case 50:
document.write("실행50");
break;
default:
document.write("0");
};
}
//결과값 : 0👉 while문
while문은 조건이 참인 동안 반복적으로 코드를 실행합니다.
for문으로 변경이 가능하며 조건식에 맞지 않으면 실행이 되지 않거나, 무한으로 빠지게 됩니다.
무한 루프나 특정 조건에 만족할 때까지 반복해야하는 경우 사용하는 것이 좋습니다.
주로 파일을 읽고 쓰기에 많이 사용합니다.
{
let num = 0;
while(num<5){
document.write(num);
num++;
}
}
//결과값 : 01234👉 do while문
조건에 따라 반복을 계속할지를 결정할 때 사용하는 것은 while 문과 동일합니다.
다만, 무조건 중괄호 {} 블럭을 한번 실행하고, 조건을 검사하여 반복을 결정합니다.
{
let num2 = 0;
do {
document.write(num2);
num2++;
} while(num2<5);
}
//결과값 : 01234👉 for문
for문은 자바스크립트에서 가장 많이 사용하는 반복문으로 조건에 들어가는 값이 일정하게 커지는 명령을 실행할 때 편리합니다.
for문에서는 몇 번 박복했는지 기록하기 위해 차운터를 사용하며 for 문의 첫번 째 항에서 카운터 변수를 지정합니다.
* 예제 *
{
let num = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for(let i=0; i<num.length; i++){
document.write(arr[i] + ",");
}
}
//결과값 : 1,2,3,4,5,6,7,8,9,👉 중첩 for문
for문이란 하나의 for문 내부에 for문을 포함하는 것을 말합니다.
반복문 안에 새로운 반복문이 존재하는 형태입니다.
for(let i=1; i<=10; i++){
document.write(i, "<br>")
for(let j=1; j<=10; j++){
document.write(j);
}
}👉 continue문 / breack문
'특별한 조건을 만나면 반복을 끝내라'라는 의미로 생각하시면 좋습니다.
실행문의 위치에 따라 값이 변경 될 수 있습니다.
continue문
continue문은 반복문 내에서 사용되고, 보통 for문 while문 등과 함께 사용됩니다.
for문이나 while문의 {}안에서 continue 문장을 만난 순간 continue문 아래에 있는 실행해야 하는 문장들을 건너 뛰고, 다음 반복을 시작합니다.
{
for(let i=1; i<20; i++){
if(i == 10){
continue;
}
document.write(i);
}
}
//결과값 : 123456789111213141516171819breack문
이제 더 이상 반복하지 말고, 바로 for문이나 while문을 끝내세요.
라는 의미입니다.
{
for(let i=1; i<20; i++){
if(i == 10){
break;
}
document.write(i);
}
}
//결과값 : 123456789참고 홈페이지