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 자동 반환
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
[2023 신입부원 기초 스터디] 조상혁 2주차 - CSS알아가기! (1) | 2023.04.13 |
---|---|
[2023 신입부원 심화 스터디] 박지민 #2주차 - 기초문법 part. 2, 3 (0) | 2023.04.13 |
[2023 신입부원 기초 스터디] 최종은 #2주차 - CSS알아가기 (0) | 2023.04.12 |
[2023 신입부원 기초 스터디] 박민규 #1주차 - 기초부터 확실히! (태그정리) (0) | 2023.04.07 |
[2023 신입부원 기초 스터디] 도승준 #1주차 - 레전드가 어쩌구.. 필드셋이 저쩌구.. (0) | 2023.04.06 |