[2023 신입부원 심화 스터디] 조현상 #2주차 - 기초문법 part.2, 3

심화스터디 2주차 글 시작~! 

 

#자바스크립트의 조건문과 반복문 그리고 함수

 

저번 시간 스터디 내용

- 변수 와 상수 선언 방법

- 변수 와 상수를 가지고 연산하는 방법

 

변수와 상수를 가지고 조건문을 만들 수 있다.

자바스크립트에서 제공하는 조건문은 if 와 switch 문이 있다.

먼저 if문부터 보면

const c = 30;

if( c > 90) {
	console.log("A");
}
else if( c > 50) {
	console.log("B");
}

else{
	console.log("F");
}


//c는 30이기 때문에 F가 출력될 것이다.

if 문은 if , else if , else 가 있다.

if 문 선언은 

if ( 조건문 ){ ...}  으로 선언할 수 있으며 조건문 안에 연산이 True 일 경우에 ... 이 실행된다.

 

만약 연산이 False 라면 ... 이 실행되지 않고 넘어가는데

이 때 else if 와 else 를 쓸 경우 해당 조건문이 이어서 실행이 된다.

 

else if는 else if( 조건문 ) 을 통해서 만들어줄 수 있으며 보통 추가 조건을 만들고 싶을 때 사용이 된다.

 

else 는 모든 조건이 만족하지 않았을 때 만족하게 해주는 조건문이다.

 

그래서 c는 90 보다 작기 때문에 c > 90 은 False로 만족하지 않아서 넘어가게 되고

c > 50 도 만족하지 않기 때문에 넘어가게 된다.

마지막으로 else 에 들어와서 F가 출력이 되는 것이다.

 

 

 

다음 switch 문을 보면

const c = 'B';

switch(c){
    case 'A':
    	console.log("A학점이다.");
        break;
    case 'B':
    	console.log("B학점이다.");
        break;
        
    default:
    	console.log("F학점이다.");
}


// B학점이다. 가 출력될 것이다.

switch 문은 if문과 비슷하지만 반복되는 코드를 줄이기 위해 자주 쓰이며, 특정값을 찾을 때 주로 쓰인다.

switch 문은 switch(변수){}  로 선언이 되며

case 'A':  와 같이 case 찾고 싶은 변수 :   로 case 들을 통해서 변수를 찾아준다.

만약 변수가 맞다면 case 안에 있는 식들이 실행이 될 것이고 맞지 않는다면 다음 case로 넘어갈 것이다.

여기서 주의할 점이 있다.

const c = 'B';

switch(c){
    case 'A':
    	console.log("A학점이다.");

    case 'B':
    	console.log("B학점이다.");

        
    case 'C':
    	console.log("C학점이다.");
        
    default:
    	console.log("F학점이다.");
}


// B학점이다.
// C학점이다.
// F학점이다. 가 출력될 것이다.

case 문 안에 break; 를 쓰지 않는다면 해당 case 안에 있는 식이 끝난 후 계속해서 다른 case들을 실행해주기 때문에 꼭 break를 써야한다.

 

const c = 'X';

switch(c){
    case 'A':
    	console.log("A학점이다.");

    case 'B':
    	console.log("B학점이다.");

        
    case 'C':
    	console.log("C학점이다.");
        
    default:
    	console.log("F학점이다.");
}



// F학점이다. 가 출력될 것이다.

default 는 if 문에서 else 와 같이 모든 case가 실패 했을 때 defult 문 안에 있는 식들이 실행되게 된다.

 

 

 

다음은 반복문 for 과 while 을 볼 것이다.

우선 for문 부터 보면

for(let i = 0; i < 6; i++){
	console.log(i)
}
//0
//1
//2
//3
//4
//5 이 출력될 것이다.

for( 변수 선언 ; 조건식이 참 거짓 유무확인 ; 연산자){} 로 선언할 수 있는데 

처음 선언 될 때

1. 변수 선언

2. 조건식 참 거짓 유무 확인

3. 만약 조건식이 참일 경우 {} 실행

4. 연산자

순으로 실행이 된다.

이 때

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

 

와

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

의 차이는 첫번째 경우는 블록이 끝날 경우 i도 같이 사라지게 되고 두번째 경우는 i가 블록 밖에서 선언되었기 때문에 블록이 끝난 후에도 사라지지 않는다.

 

for 강의를 들으면서 == 와 === 차이가 궁금해서 검색을 해봤다.

== 는 데이터 타입을 고려하지 않고 참과 거짓 유무를 확인한다.

0 == false // true

하지만 === 는 데이터 타입을 고려해서 참과 거짓 유무를 확인한다.

0 === false // false   0은 int 타입이고 false boolean 타입이기 때문에 서로 다르다.

배열을 이용해서 for문을 다르게 사용할 수 있는데

const arr = [1,2,3];
for (const i of arr){
	console.log(i)
}

//1
//2
//3 출력

for( 변수 of 리스트 ) {} 를 선언해주면 리스트 안에 있는 값들이 변수를 통해 저장이 된다.

 

여기서 궁금한 것이 있는데 i를 const 로 선언해주었는데 i 값이 바뀌어도 괜찮은 지가 궁금하다. 

 

while 은 for 문과 비슷하지만 형태만 다른 것이다.

let i = 0;
while ( i < 10 ) {
	i++;
}

// while 문이 끝나면 i는 10이 되어 있을 것이다.

while(조건식){} 으로 선언할 수 있고 조건식이 true 면 {} 가 실행이 된다.

while 문에서 주의해야될 점은 while은 조건식이 계속 true면 무한 루프를 돌 수 있기 때문에 항상 끝을 만들어놔야한다.

 

do while 은 while 문과 똑같지만 do를 먼저 실행 시키고 그 다음 while 을 실행 시킨다.

 

 

마지막으로 함수를 보면 

 

함수는

function sum(a,b){
	return a+b;
}



let x = 10;
let y = 5;

let c = sum(x,y);

// c 가 15가 된다.

함수는 function( 인자 ) {} 로 선언할 수 있다. 

그리고 함수를 호출하면 다음과 같이 x, y 가 a, b 인자에 들어가서 a+b를 하게 된다.

 

함수에서 주의할 점은 인자수가 선언할 때와 호출할 때가 같아야 되기 때문에 주의해야된다.

 

오류를 줄이기 위해 인자를 미리 정해주는 매개변수 기본값 기능이 있는데

 

function sum(a,b = 0){
	return a+b;
}



let x = 10;
let y = 5;

let c = sum(x);

// c 가 10가 된다.

이처럼 b를 미리 정해주면 sum(x) 에서 x 한 개만 넣었을 때 a = x , b = 0 이 되어서 오류가 발생하지 않게 된다.

 

하지만 기본값은 뒤에서 앞으로 넣을 수 있기 때문에 주의하자.

function sum(a = 0,b = 0 ,c){   // c - > b - > a 순으로 기본값을 정해줘야 하기 때문에 오류
	return a+b +c;
}



let x = 10;
let y = 5;

let c = sum(x);

 

자바스크립트에서 인자수가 선언할 때와 호출할 때가 같아야 되는 문제를 조금이나마 해결하기 위해 다음과 같은 방법이 있다.

function sum(a, ...rest){   // c - > b - > a 순으로 기본값을 정해줘야 하기 때문에 오류
	console.log(rest);
}



let x = 1;
let y = 2;
let z = 3;
let k = 4;


sum(x,y,z,k);

// [2,3,4] 출력이 될 것이다.

나머지 매개변수는 ... 변수 를 사용해서 

인자수와 상관 없이 나머지 인자들은 rest에 들어가기 때문에 우리는 인자수와 상관없이 함수를 선언할 수 있다.

 

마지막으로 함수를 다양한 방식으로 선언할 수 있는데

 

우선 다음과 같이 함수를 sum 에 저장하는 형식으로 선언할 수도 있다.

//원래 식
function sum (a,b){
	return a+b;
}
//바뀐 식
const sum = function (a,b){
	return a+b;
};

그 다음 함수를 람다 표현으로 고치는 방법이 있는데

//원래 식
function sum (a,b){
	return a+b;
}
//바뀐 식 1. {} 사용하지 않았을 때
const sum =(a,b) = > a +b ;

//바뀐 식2. {} 사용했을 때
const sum = (a,b) => {
	return a+b;
};

다음과 같이 화살표로 함수를 선언할 수 있다.

이 때 주의할 점은 {} 를 사용하지 않으면 자동으로 return 형태로 만들어주는데 {} 를 사용했을 때는 return 을 꼭 적어줘야한다.

추가적으로

const sum = a = > a ;

함수의 인수가 1개라면 () 도 없애줄 수 있다.

단 1개를 제외하고는 없애면 안된다.