안랩샘아카데미 React로 시작하는 프론트엔드 2주차 정리

다중분기문

switch 조건문
-특정 값의 조건을 비교할 때 사용한다.
조건비교해서 해당하는 조건으로 바로 점프할 수 있다.
break명령어로 조건이 만족되면 switch문을 탈출할 수 있고,
default는 if문에서 else와 같이 사용할 수 있다.

Switch(조건){
case 값1: 명령1;
break;
case 값2: 명령2;
break;
case 값3: 명령3;
break;
default: 명령n;
}

// switch(조건) {
//     case 1: console.log(`1`)
//     break;
//     default:
// }

결과예측

let a = 2 + 2;
switch (a) {
case 3:
alert( '비교하려는 값보다 작습니다.' );
case 4:
alert( '비교하려는 값과 일치합니다.' );
case 5:
alert( '비교하려는 값보다 큽니다.' );
default:
alert( "어떤 값인지 파악이 되지 않습니다." );
} 

a의 값은 4로 case 4의 '비교하려는 값과 일치합니다.'에 해당되지만 break문이 없기때문에 case5와 default의 문장까지 alert

결과예측

let a = 3;
switch (a) {
case 4:
alert('계산이 맞습니다!');
break;
case 3: // (*)
case 5:
alert('계산이 틀립니다!');
alert("수학 수업을 다시 들어보는걸 권유 드립니다.");
break;
default:
alert('계산 결과가 이상하네요.');
}

a는 3으로 case 3에 해당되지만 주석이라 표시되지않고 break문이 없기때문에 case 5인 '계산이 틀립니다!',"수학 수업을 다시 들어보는걸 권유 드립니다."까지 출력하고 break문을 만나서 출력이 끝난다. break문이 없으면 의도하지않은 결과가 나올수있기때문에 조건이 만족했을때 만족하는 조건만 출력되고 나머지가 안나오는걸 바라면 case 3끝에 break문 처리를 해줘야한다.

결과예측

let arg = prompt("값을 입력해주세요.");

switch (arg) {

case "0":

case "1":

console.log("이나 1을 입력하셨습니다.");

break;

case "2":

console.log("2를 입력하셨습니다.");

break;

case 3:

console.log("이 코드는 절대 실행되지 않습니다!");
}

Number로 형변환하지않고 입력을 받기때문에
문자형이 아닌 숫자형인 case 3은 실행되지않는다.

미션> 홀수와 짝수 구분

const num = Number(prompt("숫자를 입력해주세요."));
switch(num%2) {
    case 0: 
    alert("짝수입니다.")
    break;

    case 1:
    alert("홀수입니다.")
    break;
}

강사님 코드

const input Number(prompt('숫자를 입력하세요.', '숫자'));

switch (input % 2) {

case 0:

alert('짝수입니다.');

break;

case 1:

alert('홀수입니다.');

break;

default:

alert('숫자가 아닙니다.');
break;
}

switch문 default끝의 break 필요없음, 안써도 문법적 에러러가 발생하지않는다.

미션>태어난 연도를 입력 받아 띠 출력하는 프로그램

const byear = Number(prompt("태어난 연도를 입력해주세요"))
switch(byear%12) {
    case 0: 
        alert("원숭이띠입니다.");
        break;
    case 1: 
        alert("닭띠입니다.");
        break;
    case 2: 
        alert("개띠입니다.");
        break;
    case 3: 
        alert("돼지띠입니다.");
        break;
    case 4: 
        alert("쥐띠입니다.");
        break;
    case 5: 
        alert("소띠입니다.");
        break;
    case 6: 
        alert("호랑이띠입니다.");
        break;
    case 7: 
        alert("토끼띠입니다.");
        break;
    case 8: 
        alert("용띠입니다.");
        break;
    case 9: 
        alert("뱀띠입니다.");
        break;    
    case 10: 
        alert("말띠입니다.");
        break;    
    case 11: 
        alert("양띠입니다.");
        break; 
    default:
        alert("해당되는 띠가 없습니다.");
}

강사님 코드

const rawInput = prompt('태어난 해를 입력해주세요.', '');

const year = Number(rawInput);

const year % 12;

let result;

switch (e) {

case 0:

result = '원숭이';

  break;

case 1: result = '닭'; break;

case 2: result = '개'; break;

case 3: result = '돼지'; break;

case 4: result = '쥐'; break;

case 5: result = '소'; break;

case 6: result = '호랑이'; break;

case 7: result = '토끼'; break;

case 8: result = '용'; break;

case 9: result = '뱀'; break;

case 10: result = '말'; break;

case 11: result = '양'; break;
} 
alert(`$(year)년에 태어났다면 ${result] 띠입니다.`);

반복문

반복문의 의미

• 명령어를 반복적으로 수행하고자 할 때
• for in 반복문, for of 반복문, for 반복문, while 반복문,
  break, continue(반복문 제어)

미션>반복문 없이 1부터 5까지 더하기

let sum = 0;

sum +=1;
sum +=2;
sum +=3;
sum +=4;
sum +=5;
document.write("1부터5까지더하면"+sum)

for 문 사용하기
가장 많이 사용하는 반복문으로 값이 일정하게커지면서
명령을 반복해서 실행할 때 사용한다.

for(초기값; 조건; 증가식){
	실행할 명령;
}    

for(let i = 0; i < 5; i++){
	console.log(i);
}       

for 반복문 사용해서 1부터 5까지 더하기

let sum = 0;
for(let i = 1; i <= 5; i++){
    sum += i;
}
console.log(sum);

while문 사용하기(조건만족해야실행)

let i = 1;
while (i <= 5) {
   console.log(i);
   i++;
}

do while문 사용하기(먼저한번실행하고조건확인)

let i = 1;
do {
  console.log(i);
  i++;
} while(i <= 5);

continue,break 사용하기

let i = 1;
while (i <= 5) {

  if(i % 2 === 0) {
    continue; //특정조건을 만족하면 반복문맨위로 걷어올림
  }
  console.log(i);
  i++;

  if( i >= 3){
    break; //반복문돌다가 특정조건이 되면 탈출
  }
}

별찍기

//for문 사용
for (let l = 0; l < 8; l++){ 
    for(let s = 0; s <= l; s++) {
      document.write("*")
    }
    document.write("<br>")
  }

for (let l = 0; l < 9; l++){ 
  for(let s = 9; s > l; s--) {
    document.write("*")
  }
  document.write("<br>")
}

for(let i = 0; i < 14; i++)  {
    for(let j= 13; j > i; j--)  {
      document.write('&nbsp');
    }
    for(let j=0; j <= i; j++)  {
      document.write('*');
    }
    for(let j=1; j <= i; j++)  {
      document.write('*');
    }
    document.write('<br>');
  }

배열(복합자료형)

• 여러 자료를 묶어서 활용할 수 있는 특수한 자료
• 여러 개의 자료를 저장하기 위해 변수를 여러 개 선언해야 하는 불편함 해소
• 대괄호[...] 사용해 생성, 내부의 값은 쉼표로 구분

let seasons = [ '봄','여름','가을','겨울'];
//배열에는 요소들이 들어있다.
const arrdata = [1,"Hello",true,[4,5],{}, function(){}];
//숫자, 문자, boolean, 배열, 객체, 함수까지 다양한 데이터타입이 한 배열에 요소로 들어갈 수 있다.

const arrdata = [`사과`,`바나나`, `망고`, `딸기`,`배`];
console.log(arrdata); //length: 5 
console.log(arrdata[0]); //사과만 뽑아오기, 인덱스는 0부터 시작한다. 
console.log(arrdata.length); //크기 출력
console.log(arrdata[arrdata.length-1]); //마지막 요소 출력하기
arrdata.push('수박'); //요소 추가하기, 맨끝에 수박추가된다.
console.log(arrdata);

arrdata[2] = "애플망고"; 
//2인덱스에 추가하니까 기존 망고가 없어지고 애플망고로 수정됨
console.log(arrdata);

const a = arrdata.indexOf('망고'); //망고 위치 알아내기
arrdata.splice(a,1); //삭제(망고의인덱스,하나만없애기)
arrdata.splice(2,0, "애플망고"); //삽입(원하는인덱스,0,넣고싶은요소)
console.log(a);
console.log(arrdata);

// 미션> 배열 출력하기
const arrdata = [`사과`,`바나나`, `망고`, `딸기`,`배`];

for(let i=0; i<arrdata.length; i++){
    console.log(arrdata[i]);
}

// 미션> 태어난 연도를 입력 받아 띠 출력하는 프로그램 2
const animals = [`원숭이띠`,`닭띠`,`개띠`,`돼지띠`,
`쥐띠`,`소띠`,`호랑이띠`,`토끼띠`,`용띠`,`뱀띠`,`양띠`,`말띠`];

const year = Number(prompt("태어난 연도를 입력해주세요.")) % 12;

console.log(animals[year]);

for in 반복문

• 배열과 함께 사용
• 배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용
  for (const 반복변수 in 배열){
  실행할 명령;
  }

for of 반복문

• 요소의 값을 반복할 때 안정적으로 사용
• 반복 변수에 요소가 들어감
• 요소의 인덱스는 얻을 수 없고 값만 얻을 수 있음
  for (const 반복변수 of 배열 또는 객체){
  실행할 명령;
  }

함수

alert(message), prompt(message, default), confirm(question)과 같은 내장 함수가 있고 반복되는 코드를 한 번만 정의 해놓고 필요할 때마다 호출하므로 반복 작업을 피할 수
있다.
긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의
가독성이 좋아지고 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽다.

함수의 기본형태

• 코드의 집합
• 필요할 때마다 호출하여 반복적으로 사용가능
• 함수의 선언: function 키워드, 함수 이름, 괄호로 둘러싼 매개변수

function showMessage() {
alert( '안녕하세요!' );
}

function showMessage(from, text) { //(두개의 매개변수)
    console.log(from + `:` + text);
}
//함수선언후 함수이름으로 호출을 해줘야 콘솔창에 찍힌다.

console.log("함수 호출 전");
showMessage(`chris`, `Hello`);
showMessage(`john`, `Hi`);
console.log("함수 호출 후");

function sum(a, b) { //(두개의 파라미터)
    return a+b; //리턴키워드사용해서 값을 되돌려준다.
}

console.log("함수 호출 전");
let sumNum;
sumNum = sum(3,4);
console.log(sumNum);
console.log("함수 호출 후");

도전> argument 넘겨서 함수 호출하기

const num1 = Number(prompt("첫번째 숫자를 입력해주세요"));
const num2 = Number(prompt("두번째 숫자를 입력해주세요"));

function addNumber(num1,num2) {
    return num1+num2;
}

function subtractNumber(num1,num2) {
    return num1-num2;
}

function multipleNumber(num1,num2) {
    return num1*num2;
}

function divideNumber(num1,num2) {
    return num1/num2;
}

console.log(`더하기결과는`+addNumber(num1,num2));
console.log(`빼기결과는`+subtractNumber(num1,num2));
console.log(`곱하기결과는`+multipleNumber(num1,num2));
console.log(`나누기결과는`+divideNumber(num1,num2));

미션> 윤년을 확인하는 함수 만들기

const year = Number(prompt("년도를 입력해주세요"));
function isLeapYear(year){
    if(year%4 === 0 && year%100 !== 0 || year%400 === 0){
        return true;
    }else{
        return false;
    }
}
console.log(`2022년은 윤년일까? === ${isLeapYear(2022)}`)
console.log(`2010년은 윤년일까? === ${isLeapYear(2010)}`)
console.log(`2000년은 윤년일까? === ${isLeapYear(2000)}`)
console.log(`1900년은 윤년일까? === ${isLeapYear(1900)}`)
console.log(`2024년은 윤년일까? === ${isLeapYear(2024)}`)

강사님 코드

function isLeapYear(year){
	return (year%4 === 0) && (year%100 !== 0) || (year%400 === 0)
}

함수 표현식

• 자바스크립트는 함수를 특별한 종류의 값으로 취급
• 함수 선언 방식 외에 함수 표현식(Function Expression) 을 사용해서 함수를 만들 수 있다.

function sayHi() {
alert( "Hello" );
}

익명함수
let sayHi = function() {
alert( "Hello" );
};

let sayHi = function() { //함수이름funcA 필요없음
    console.log("Hi");
}

console.log(sayHi); //함수표현식자체가 찍힌다.
console.log(sayHi()); // Hi 정상적으로 실행
console.log(funcA()); // funcA가 정의되지않았다는 오류발생

콘솔창 확인

익명함수
함수의 선언

• function () {}

let func = sayHi; //변수처럼 함수를 복사해서 사용할 수 있다.
func(); 

화살표 함수 - function 키워드 대신 화살표를 사용

let sum = (a, b) => a + b;
/ 위 화살표 함수는 아래 함수의 축약 버전
let sum = function(a, b) {
return a + b;
};
/
alert( sum(1, 2) ); // 3

화살표함수로 변경하기

const num1 = Number(prompt("첫번째 숫자를 입력해주세요"));
const num2 = Number(prompt("두번째 숫자를 입력해주세요"));

let addNumber = (num1,num2) => num1+num2;

let subtractNumber = (num1,num2) => num1-num2;

let multipleNumber = (num1,num2) => num1*num2;

let divideNumber = (num1,num2) => num1/num2;

let restNumber = (num1,num2) => num1%num2;

console.log(`더하기결과는`+addNumber(num1,num2));
console.log(`빼기결과는`+subtractNumber(num1,num2));
console.log(`곱하기결과는`+multipleNumber(num1,num2));
console.log(`나누기결과는`+divideNumber(num1,num2));
console.log(`나머지결과는`+restNumber(num1,num2));