본문 바로가기

WINK-(Web & App)/HTML & CSS & JS 스터디

[2023 신입부원 심화 스터디] 신진욱 #2주차 - 반복문,조건문,함수

반응형

1. 조건문

- 지정된 조건이 참인지 거짓인지에 따라 서로 다른 코드로 분기하기 위해 사용하는 제어문

- if문switch문이 존재

<조건문 (if)>

- if (조건) {}

- else {} // if문의 조건이 아닐때

- 하나의 조건문을 작성할 때 if, else는 한 번만 사용. (if로 시작, else로 끝나야 함 (else는 없어도 됨))

- else if는 if와 else 사이에 작성. 하나의 조건문에 여러 개 사용 가능

const a = 10;
const b = 20;
const c = 20;

if (a<b) { console.log('a가 더 작아요!');}
else if (b===c) { console.log('b랑 c가 같습니다!');
else { console.log('거짓!'); }

<조건문 (switch)>

- 동일한 조건이 주어지고 조건의 값에 따라 다른 명령을 실행

const number = 10;
switch (number) {
		case 1:
				console.log(number);
				break; // case와 break 키워드는 의도한게 아니면 항상 같이 사용해주기
		case 10:
				console.log(number);
				break;
		default: // 조건 필요 x, 마지막에 위치 해야함 case가 만족하는게 없을때 실행
				console.log('아무것도 해당되지 않아요!');
}
// break가 없다면? : 다음 break를 만날때까지 출력되기 때문에 의도치 않은 결과 출력

- if문과 다르지 않으나 주어진 상황에 따라 알맞게 사용하면 된다.

2. 반복문

- 반복적으로 수행해야하는 동작을 처리하기 위해 사용하는 제어문

- 반복문에는 for문while문이 존재

<반복문 (for)>

- for () {}

- () 안에는 시작값 정의; 반복 조건; 증감값; 들어간다

for (let i = 0; i < 5; i++) { console.log(i); } // 1번째 표현
let i = 0; for (; i<5; i++) { console.log(i); } // 2번째 표현
let i = 0; for (; i<5; i++) { console.log(i++); } // 3번째 표현
.
.
.
for (let i=0; i<10; i++) {
	if (i===5) { continue; } // continue를 이용하면 해당 조건일 때를 건너 뛴다 (반복문을 빠져나오는거 아님)
	if (i===7) { break; } // break를 이용해 사용자가 원할때 반복문 중단 가능 (반복문을 빠져 나감) 
	console.log(i);
} 
.
.
.
const arr = [1,2,3];
for (const i of arr) { console.log(i); }
// for of 문은 배열 원소 처음부터 끝까지 순회 하면서 반복문 코드를 실행시킨다.

<반복문 (while)>

- () 안에 조건이 만족할때만 내부코드를 실행시킨다.

// while문
let i=0;
while (i<10) {
	console.log(i++);
} // 조건이 참이면 while문으로 들어가고 거짓이면 나온다.

// do while문
let i=0;
do {
	console.log(i++); // 무조건 1번 출력이 된다.
} while (i<10);

3. 함수

- 하나의 동작, 어떤 목적을 달성하거나 원하는 결과를 도출하기 위한 코드 집합

- 한 번 만든 함수는 재사용할 수 있고 필요한 위치에서 부를 수 있다

- 함수 작성법 : function 이름 () {} 

// ex) 볶음밥 만들기 함수 (인자 1개 함수)
function bok(main) {
	console.log('${main} 볶음밥');
}
bok('새우'); // 새우 볶음밥
bok('제육'); // 제육 볶음밥

// ex) 합계 함수 (인자 2개 함수)
function sum(a,b) {
	console.log(a+b);
}
sum(10,20); // 30

- 인자 = 함수의 입력 값 = Arguments / 매개변수 = 함수의 입력 변수 = parameter

function a() {
	const b = 10;
	console.log(b);
}
a(); // 10
console.log(b); // error : b is not defined

// 함수 내부에 선언된 변수 -> 지역변수(로컬변수)
// 함수의 유효 범위가 해당 함수 내부로 제한

const b = 10;
function a() {
	console.log(b);
}
a(); // 10
console.log(b); // 10

// 함수 외부에서 선언된 변수 = 전역변수(글로벌변수)
// 함수 내부에서 접근 가능

const b = 10;

function a() {
	const b = 20;
	console.log(b);
}
a(); // 20 (지역변수 b)
console.log(b); // 10 (전역변수 b)

- 함수를 호출할때 인자의 개수를 많거나 적게 전달하면 어떻게 될까?

function sum(a,b) {
	console.log(a+b);
}
sum(10); // NaN
// 에러 발생 X -> 결과값만 안 나올 뿐이지 에러가 생겨서 페이지 다운 X
// 이유 : js에서는 값이 할당되지 않으면 기본적으로 undefined가 할당됨
// a = 10, b = undefined

- 필요한 개수보다 적은 인자가 전달되는 경우 => Default Parameter 이용

function sum(a,b=0) {
	console.log(a+b);
}
sum(10); // 10
// 제대로 인자를 지정 받으면 정상적으로 출력되고
// 적은 개수 인자를 받으면 b=0으로 할당되게 된다

- 필요한 개수보다 많은 인자가 전달되는 경우 => arguments 때문에 오류 발생 X

function sum(a,b) {
	console.log(arguments[0]);
	console.log(arguments[1]);
	console.log(arguments[2]);
}
sum(10,20,30); // 10 20 30
// 인자를 초과해서 입력해도 초과된 인수는 그냥 무시될 뿐 오류 발생 X

- 나머지 매개변수 : Rest Parameter

- 지정한 인자를 제외한 나머지 모든 인자들을 배열로 묶어서 나타낼 수 있는 구문

// 3개 이상의 입력이 주어졌을때 a와 b를 제외한 나머지를 한 번에 받아서 쓴다면
// Rest Parameter 이용 -> ...rest
function print(a,b,...rest) {
	console.log(a);
	console.log(b);
	console.log(rest);
}
print(10,20,30,40,50,60,70); // 10 20 [30,40,50,60,70]

- 리턴(return)이라는 명령문을 사용하여 특정 값을 반환

- 리턴(retrun)이라는 명령문을 사용 => 현재 함수를 종료 => 지정한 값을 함수를 호출한 지점으로 변환

function sum(a,b) {
	return a+b;
}
console.log(sum(10,20)); // 30

4. 함수의 표현식과 화살표 함수

function sum(a,b) {
	console.log(a+b);
}

// 함수의 표현식
const sum = function (a,b) {
	console.log(a+b);
}; 
sum(20,30); // 30

// 화살표 함수
const sum = (a,b) => console.log(a+b);
// 값을 반환해야 할때 {}가 있다면 return 넣고 없다면 return 자동 반환
반응형