JavaScript 조건문, 반복문, 함수 정리
intro
이번 시간에는 JavaScript의 조건문, 반복문, 함수에 대해 학습하였다. 프로그래밍을 하다 보면 상황에 따라 다른 코드를 실행해야 하거나 같은 작업을 여러 번 반복해야 하는 경우가 많다. 또한 반복되는 코드를 효율적으로 관리하기 위해 함수를 사용하기도 한다.
이번 수업에서는 if문, 반복문, switch문과 같은 흐름 제어 문법부터 함수의 개념과 다양한 함수 표현 방식까지 배울 수 있었다. 예제를 직접 작성해 보면서 각 문법이 어떤 상황에서 사용되는지 이해할 수 있었고, JavaScript가 어떻게 동작하는지 조금 더 깊게 알아볼 수 있는 시간이었다.
1. 조건문(Conditional Statement)
조건문은 특정 조건의 참(True) 또는 거짓(False)을 판단하여 실행할 코드를 결정하는 문법이다.
if문
가장 기본적인 조건문이다.
let score = 80;
if (score >= 60) {
console.log("합격");
}
조건식이 참일 경우에만 코드 블록이 실행된다.
if문의 동작 과정
단계설명
| 1 | 조건식 평가 |
| 2 | true이면 코드 실행 |
| 3 | false이면 건너뜀 |
if ~ else문
조건이 참일 때와 거짓일 때 서로 다른 동작을 수행할 수 있다.
let score = 50;
if (score >= 60) {
console.log("합격");
} else {
console.log("불합격");
}
else if문
여러 조건을 순차적으로 검사할 때 사용한다.
let score = 85;
if (score >= 90) {
console.log("A");
}
else if (score >= 80) {
console.log("B");
}
else if (score >= 70) {
console.log("C");
}
else {
console.log("F");
}
else if는 독립된 문법이 아니다
많은 사람들이 else if를 하나의 새로운 문법이라고 생각하지만 실제로는 그렇지 않다.
if (조건1) {
실행문;
}
else {
if (조건2) {
실행문;
}
}
위 코드를 보기 쉽게 줄여 쓴 형태가 else if이다.
즉, else if는 별도의 문법이 아니라 if문과 else문의 조합이라고 볼 수 있다.
한 줄 코드에서는 중괄호 생략 가능
실행문이 한 줄인 경우 중괄호를 생략할 수 있다.
if (age >= 20)
console.log("성인");
하지만 여러 줄의 코드를 작성할 예정이라면 가독성과 유지보수를 위해 중괄호를 사용하는 것이 좋다.
2. 반복문(Loop)
반복문은 같은 코드를 여러 번 실행할 때 사용하는 문법이다.
예를 들어 숫자 1부터 100까지 출력해야 한다면 출력문을 100번 작성하는 대신 반복문을 사용하면 된다.
while문
조건이 참인 동안 계속 반복한다.
let i = 1;
while (i <= 5) {
console.log(i);
i++;
}
실행 결과
1
2
3
4
5
for문
반복 횟수가 정해져 있을 때 가장 많이 사용하는 반복문이다.
for (let i = 1; i <= 5; i++) {
console.log(i);
}
for문의 구조
for (begin; condition; step)
구성 요소역할
| begin | 초기값 설정 |
| condition | 반복 여부 판단 |
| step | 증감 수행 |
do ~ while문
while문과 비슷하지만 조건을 나중에 검사한다.
let num = 10;
do {
console.log("실행");
}
while (num < 5);
위 예제는 조건이 거짓임에도 한 번은 실행된다.
while과 do while 비교
반복문조건 검사 시점
| while | 실행 전 |
| do while | 실행 후 |
따라서 do while은 최소 1회 실행이 보장된다.
3. break와 continue
반복문을 사용하다 보면 반복을 강제로 종료하거나 특정 반복만 건너뛰어야 할 때가 있다.
break
반복문을 즉시 종료한다.
for(let i=1;i<=10;i++) {
if(i === 5)
break;
console.log(i);
}
출력 결과
1
2
3
4
continue
현재 반복만 건너뛰고 다음 반복으로 이동한다.
for(let i=1;i<=5;i++) {
if(i === 3)
continue;
console.log(i);
}
출력 결과
1
2
4
5
4. 레이블(Label)
중첩 반복문에서는 break가 가장 가까운 반복문만 종료한다.
이때 레이블을 사용하면 원하는 반복문을 제어할 수 있다.
outer:
for(let i=0;i<3;i++) {
for(let j=0;j<3;j++) {
if(j === 1)
break outer;
}
}
위 코드는 outer로 지정된 바깥 반복문까지 종료한다.
5. switch ~ case문
여러 조건을 비교할 때 사용할 수 있는 조건문이다.
let grade = "B";
switch(grade) {
case "A":
console.log("우수");
break;
case "B":
console.log("보통");
break;
default:
console.log("기타");
}
특징
- 자료형까지 비교한다.
- break가 없으면 다음 case도 실행된다.
- 조건이 많을 때 가독성이 좋다.
if문과 switch문의 비교
항목if문switch문
| 범위 조건 | 가능 | 어려움 |
| 특정 값 비교 | 가능 | 매우 적합 |
| 가독성 | 보통 | 조건이 많을 때 우수 |
6. 함수(Function)
함수란?
함수는 특정 작업을 수행하는 코드의 묶음이다.
같은 코드를 반복 작성하지 않고 필요할 때마다 호출하여 사용할 수 있다.
function hello() {
console.log("Hello");
}
함수는 메모리에 저장되며 호출 시 실행된다.
hello();
매개변수(Parameter)
함수 호출 시 값을 전달받기 위한 공간이다.
function greet(name) {
console.log(name + "님 환영합니다.");
}
greet("가연");
기본값 지정
function greet(name = "Guest") {
console.log(name);
}
return
함수 실행 결과를 반환한다.
function add(a,b) {
return a+b;
}
let result = add(10,20);
return은 함수를 즉시 종료하는 역할도 수행한다.
function test() {
if(true)
return;
console.log("실행 안됨");
}
7. 함수 표현식
JavaScript에서 함수는 값(Value)이다.
따라서 변수에 저장할 수 있다.
const hello = function() {
console.log("Hello");
};
이를 함수 표현식(Function Expression)이라고 한다.
8. 화살표 함수(Arrow Function)
함수 표현식을 더 간결하게 작성하는 방법이다.
const hello = () => {
console.log("Hello");
};
매개변수가 하나라면 괄호도 생략 가능하다.
const square = x => x * x;
9. 메서드(Method)
객체의 프로퍼티 값으로 저장된 함수를 메서드라고 한다.
const user = {
name : "Tom",
sayHello : function() {
console.log("Hello");
}
};
user.sayHello();
this란?
this는 현재 함수를 호출한 객체를 가리킨다.
const user = {
name : "Tom",
showName : function() {
console.log(this.name);
}
};
출력 결과
Tom
10. 함수 표현식과 화살표 함수의 차이
가장 큰 차이는 this 처리 방식이다.
구분함수 표현식화살표 함수
| this | 호출한 객체 | 부모 스코프의 this |
| 사용 목적 | 일반 함수 | 간단한 함수 |
예제
const user = {
name : "Tom",
normal : function() {
console.log(this.name);
},
arrow : () => {
console.log(this.name);
}
};
화살표 함수는 자신이 선언된 위치의 this를 사용하기 때문에 결과가 달라질 수 있다.
11. 함수는 값이다
JavaScript에서 함수는 특별한 형태의 값이다.
function hello() {
console.log("Hello");
}
괄호 없이 사용하면 함수 자체를 참조할 수 있다.
console.log(hello);
또한 다른 함수의 인자로 전달할 수도 있다.
function run(func) {
func();
}
run(hello);
이러한 특징은 JavaScript가 함수형 프로그래밍을 지원하는 중요한 이유 중 하나이다.
12. 함수 선언문과 함수 표현식의 차이
함수 선언문
hello();
function hello() {
console.log("Hello");
}
정상 실행된다.
함수 표현식
hello();
const hello = function() {
console.log("Hello");
}
오류가 발생한다.
이유 : 호이스팅(Hoisting)
함수 선언문은 코드 실행 전에 메모리에 등록된다.
반면 함수 표현식은 변수에 저장되는 시점 이후에만 사용할 수 있다.
구분선언 전 호출
| 함수 선언문 | 가능 |
| 함수 표현식 | 불가능 |
마무리
이번 시간에는 JavaScript의 조건문, 반복문 그리고 함수에 대해 학습하였다. 조건문은 프로그램의 흐름을 제어하고, 반복문은 동일한 작업을 효율적으로 반복 수행하게 해준다. 또한 함수는 반복되는 코드를 재사용 가능하게 만들어 프로그램의 유지보수성과 가독성을 높여준다.
특히 JavaScript에서는 함수도 하나의 값으로 취급된다는 특징이 있어 함수 표현식이나 화살표 함수와 같은 다양한 활용이 가능하다는 점이 인상적이었다. 또한 이번에 배운 if문, while문, for문, 함수 선언 방식 등 많은 문법이 C언어와 매우 유사하여 비교적 익숙하게 학습할 수 있었고, 언어는 다르지만 기본적인 프로그래밍 개념은 서로 연결되어 있다는 점이 신기하게 느껴졌다. 앞으로는 다양한 예제를 직접 작성해 보면서 각 문법을 더욱 자연스럽게 활용할 수 있도록 연습해 볼 예정이다.