반복문
특정 코드를 반복해서 실행하고 싶을 때 사용하는 구문이다.
- for 문
- while 문
for문
조건식을 만족하는 한 계속해서 코드를 반복 실행한다. 매 반복 실행 마다 마지막에 증감식을 실행시킨다.
for (초기식; 조건식; 증감식) {
반복 실행될 코드
}
while문
조건식을 만족하는 한 계속해서 코드를 반복 실행한다.
while(조건식){
반복 실행될 코드
}
for문과 whlie문 중 어떤 거를 선택해야 할지 모르겠을 때, while문은 언제까지 반복할지 모를 때 사용하는거고 for문은 반복횟수를 명확히 알 때 사용하는 것이다.
반복문으로 피보나치 수열 구하기
피보나치 수열이란?
- 첫 번째와 두 번째 숫자가 1이고, 그 다음부터는 바로 앞의 두 숫자를 더한 값이 되는 수열입니다.
- 예: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, ...
구현 방법 1 : For 반복문 사용
function fibonacci(n) {
// 1. 첫 두 숫자를 저장할 변수 초기화
let first = 1;
let second = 1;
// 2. 결과를 저장할 배열 생성
let result = [first, second];
// 3. n-2번 반복 (첫 두 숫자는 이미 있으므로)
for (let i = 2; i < n; i++) {
// 4. 현재 숫자는 이전 두 숫자의 합
let current = first + second;
// 5. 결과 배열에 추가
result.push(current);
// 6. 다음 계산을 위해 숫자들을 한 칸씩 이동
first = second;
second = current;
}
return result;
}
// 사용 예시
console.log("피보나치 수열 (처음 10개):");
console.log(fibonacci(10).join(", "));
구현 방법 2 : While 반복문 사용
function fibonacciWhile(n) {
let first = 1;
let second = 1;
let result = [first, second];
let count = 2;
while (count < n) {
let current = first + second;
result.push(current);
first = second;
second = current;
count++;
}
return result;
}
// 사용 예시
console.log("While문으로 구현한 피보나치 수열 (처음 10개):");
console.log(fibonacciWhile(10).join(", "));
1. 초기화 단계
let first = 1; // 첫 번째 숫자
let second = 1; // 두 번째 숫자
let result = [first, second]; // 결과 배열
2. 반복 과정
// 예: n = 5일 때의 진행 과정
반복 1: first(1) + second(1) = 2
→ result: [1, 1, 2]
반복 2: first(1) + second(2) = 3
→ result: [1, 1, 2, 3]
반복 3: first(2) + second(3) = 5
→ result: [1, 1, 2, 3, 5]
3. 변수 이동
first = second; // 이전 두 번째 숫자가 첫 번째로
second = current; // 새로 계산된 숫자가 두 번째로
4. 실행 결과 예시
피보나치 수열 (처음 10개):
1, 1, 2, 3, 5, 8, 13, 21, 34, 55
5. 주의 사항
너무 큰 수를 계산할 때는 BigInt 사용을 고려해야 한다.
재귀 방식은 스택 오버플로우가 발생할 수 있으니 주의해야 한다.
성능이 중요한 경우 메모이제이션 방식을 고려해야 한다.
배열형 (Array Type)
인덱스 기반으로 값을 순서대로 삽입할 수 있는 특별한 객체 형태
- 인덱스(Index) : 위치, 0부터 시작하는 정수형 값
var array = [0, 10, 20];
array[0]; // 0
array[2]; // 20
배열형 (Array Type), 값의 삽입 / 제거
- legnth : 배열의 크기를 리턴
- push() : 배열에 새로운 값을 추가
- unshift() : 배열에 새로운 값을 0번 인덱스로 추가
- pop() : 배열의 마지막 값을 리턴하면서 제거
- shift() : 배열의 처음 값을 리턴하면서 제거
length는 속성이고 push()~shift()는 함수이다.
예시
array.length => 배열크기 3
array.push(30); => [0, 10, 20, 30]
array.unshift(30); => [30, 0, 10, 20]
array.pop(); => [0, 10]
array.shift(); => [10, 20]
객체 자료형 (Object Type), 프로퍼티
프로퍼티는 값이나 함수(메소드, method)를 가질 수 있다.
userName : "인프런"
propertyname value
CSS처럼 Key와 Value라고 생각하면 좀 더 이해가 쉬울 것 같다.
객체 프로퍼티에 접근하거나 값을 저장하고 싶으면 . (dot) 기호를 사용한다.
var objects = {userName: "인프런", age: 10}; // 새로운 객체 타입 선언, 프로퍼티 없이 선언 가능
objects.userName // "인프런", userName 값에 접근
objects.age = 12 // age 값을 12로 변경
objects.online = true // online 값을 true로 지정
함수(Function)?
함수는 독립적인 실행 코드를 하나로 묶어 둔 것을 의미한다. 이렇게 코드들을 묶어서 작성하는 것을 함수의 정의(declaration)라고 하고 정의된 함수는 호출(call)을 통해 실행할 수 있다.
function 함수명(매개변수){
실행코드
}
함수(Function)의 입력과 출력
수학에서의 함수는 미리 정해진 방정식에 미지수를 정의하면 해당 미지수에 값을 대입하고 y 값을 돌려받는다.
y = f(x)
프로그래밍의 함수도 한 개 이상의 입력(=매개변수)과 단일 출력(=리턴값)을 구현할 수 있다.
function converDollarToWon(dollar){
return (dollar * 1457.8)
}

'Front-End' 카테고리의 다른 글
| [CSS] 부트스트랩 태그 정리 (1) | 2025.02.25 |
|---|---|
| [JavaScript] 기초 공부 4 (1) | 2025.02.10 |
| [JavaScript] 기초 공부 2 (5) | 2025.02.08 |
| [JavaScript] 기초 공부 1 (2) | 2025.02.03 |
| [CSS] 기초 공부 4 (3) | 2025.02.02 |