[DAY3] JavaScript 기초 3(반복문, 함수)

목차

🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일

⭐요약

---

Javascript의 반복문(for, while, do...while)과 함수의 사용법을 정리함.

🚀5. 반복문

 

1) for문	for문은 초기화, 조건식, 증감식을 포함하여 반복적인 작업을 수행할 때 사용됨.
2) while문	while문은 주어진 조건이 참인 동안 코드 블록을 반복 실행함. 조건식만 있으며, 초기화와 증감식은 코드 블록 안에서 처리해야 함.
3) do...while문	do...while문은 최소 한 번은 코드 블록을 실행한 후 조건을 검사함. 이는 조건이 처음부터 거짓이라도 코드 블록을 최소 한 번은 실행하고자 할 때 유용함.

 

🚀6. 함수

 

1) 함수의 선언과 호출	함수는 function 키워드를 사용하여 선언되며, 호출은 함수 이름 뒤에 괄호를 붙여 수행함. 매개변수를 통해 입력을 받고, return 문을 사용하여 출력을 반환함.
2) 매개변수와 전달인자	함수는 매개변수를 통해 외부로부터 값을 받아들이며, 이 값을 함수 내부에서 사용할 수 있음. 함수를 호출할 때 제공하는 값을 전달인자라고 함.
3) 반환값	함수의 실행 결과는 return 문을 통해 반환됨. return 문 이후의 코드는 실행되지 않으며, 함수는 return 문에서 실행을 종료함.

 

5. 반복문

---

1) for문

JavaScript의 대표적인 반복문인 for문에 대해서 학습함.

먼저, 1부터 5까지의 수를 차례대로 더한 값을 구하는 코드를 작성함. 가장 쉽게 떠올릴 수 있는 방법은 1부터 5까지의 수를 모두 직접 입력하는 것임.

let result = 0;
result = result + 1;
result = result + 2;
result = result + 3;
result = result + 4;
result = result + 5;
console.log(result); // 15

이런 식으로 작성해도 원하는 결과를 얻을 수 있음. 하지만 만약 1부터 5까지의 합이 아니라 100,000까지의 합이라면 어떻게 될까? 같은 코드를 100,000줄을 반복해서 작성해야 함. 코드를 작성하는 것도 힘들지만, 그런 코드는 가독성도 매우 떨어질 수밖에 없음.

이때 반복문을 사용하면 불필요한 코드를 반복적으로 사용하지 않고 간결하게 코드를 작성할 수 있음. 1부터 5까지의 수를 모두 더하는 코드를 for문으로 구현하면 다음과 같음.

let result = 0;

for (let num = 1; num <= 5; num++) {
  result = result + num;
}

console.log(result); // 15

이 코드를 살펴보면, 아래와 같은 순서로 진행됨.

1. for문 내부에 num이라는 변수를 선언하고 1이라는 초기값을 할당함.
2. 변수 num이 5보다 작거나 같은지 확인함.
3. 2의 결과가 true면, 코드블록 내부의 코드를 실행함.
4. 변수 num을 1 증가시킴.
5. 2부터 4까지 반복함.
6. 2의 결과가 false면, 반복문이 종료됨.

for문은 다음과 같은 형식으로 이루어져 있음.

for (초기값; 조건식; 증감식) {
	// 실행할 코드
}

for 뒤에 오는 소괄호(())에는 각각 초기값, 조건식, 증감식이 들어감. 코드블록에는 반복해서 실행할 코드가 들어감. for문을 구성하는 각 요소에 대해 하나하나 자세히 살펴봄.

• 초기값: 증감식 반복 횟수를 카운트하는 역할을 하는 변수임. (이때 변수는 정수를 의미하는 ‘integer’의 약자인 i를 주로 사용함.) 초기값은 반복문의 코드블록 내부에서만 유효함.

  // 초기값(i)을 선언하고 1을 할당
  for (let i = 1; 조건식; 증감식) {
  	console.log(i);
  }

• 조건식: 코드블록 내부의 코드를 실행 여부를 결정함. true일 경우에는 코드를 실행하며, false일 경우 반복문이 종료됨.

  // i가 3보다 작거나 같을 경우 코드 실행, 3보다 클 경우 반복문 종료
  for (let i = 1; i <= 3; 증감식) {
  	console.log(i);
  }

• 증감식: 코드블록 내부의 코드를 실행한 후 초기값으로 선언된 변수를 증가 또는 감소시키기 위한 표현식임.

  // 코드가 실행될 때마다 i가 1씩 증가
  for (let i = 1; i <= 3; i++) {
  	console.log(i); // 1 2 3
  }

 

a. 인덱스(index)

문자열의 각 문자는 순서를 가지고 있음. 첫 번째 문자의 인덱스는 0임.

let str = 'codestates';
console.log(str[0]); // 'c'
console.log(str[4]); // 's'

특정 문자의 인덱스를 확인하는 메서드는 indexOf()임.

let str = 'codestates';
console.log(str.indexOf('c')); // 0
console.log(str.indexOf('e')); // 3

만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회함.

b. 길이(length)

문자열의 길이는 문자열 뒤에 .length를 붙임으로써 조회할 수 있음.

let str = 'codestates';
console.log(str.length); // 10

for문의 초기화, 조건식, 증감식은 모두 숫자 타입과 관련이 있음. 만약 문자열의 첫 번째 문자부터 마지막 문자까지 모두 출력하는 코드를 구현하려면 어떻게 해야 할까?

let str = 'codestates';
for (let i = 0; i <= 9; i++) {
	console.log(str[i]);
}

위의 코드를 살펴보면, 변수 i가 0부터 9까지 1씩 증가하며 반복문이 실행됨. 변수 str에 할당된 문자열 'codestates'의 첫 번째 문자인 ‘c’의 인덱스는 0, 마지막 문자인 ‘s’의 인덱스는 9이므로, 결과적으로 이 코드는 각 문자를 하나씩 차례대로 출력하는 코드가 됨.

그런데 이렇게 코드를 구현하려면 문자열의 길이를 알고 있어야만 함. 문자열의 길이가 매우 길거나 또는 알 수 없는 상태일 때는 어떻게 해야 할까?

let str = 'codestates';
for (let i = 0; i <= str.length - 1; i++) {
	console.log(str[i]);
}

문자열 'codestates'의 길이는 10입니다. 0부터 시작하는 인덱스와는 달리, 길이는 말 그대로 문자열에 속한 문자의 개수를 나타냅. 따라서, 문자열의 마지막 문자의 인덱스는 문자열의 길이보다 1만큼 작음. 위의 예제처럼 i <= str.length - 1(또는 i < str.length)로 조건식을 작성하면, 문자열의 끝까지 순회하는 반복문을 구현할 수 있음.

c. 반복문의 중첩

반복문은 중첩이 가능함. 다시 말해 반복문 내부에 또 다른 반복문을 사용할 수 있음.

다음 예시는 정육면체 주사위 두 개를 굴려서 나올 수 있는 모든 경우의 수를 구하기 위한 코드임.

for (let i = 1; i <= 6; i++) {
	for (let j = 1; j <= 6; j++) {
		console.log(`첫번째 주사위는 ${i}, 두번째 주사위는 ${j}입니다.`);
	}
}

2) While문

이번에는 또 다른 반복문인 while문을 배움.

초기화, 조건식, 증감식이 모두 필요한 for문과 달리 while문은 조건식만 입력한 후 조건식의 평가결과가 true인 경우 코드블록 내부의 코드를 반복하여 실행함.

let num = 0;

while (num < 3) {
	console.log(num); // 0 1 2
	num++
}

위 코드를 for문으로 바꾸면 다음과 같음.

for (let num = 0; num < 3; num++) {
	console.log(num); // 0 1 2
}

while문을 사용할 때는 무한루프를 주의해야 함. 무한루프란 반복문이 종료되는 조건식이 항상 참으로 평가되어 무한히 반복되는 현상을 말함.

let num = 1;
while (num > 0) {
	console.log(num);
	num++;
}

위 코드에서 num은 항상 0보다 크므로, 무한루프가 발생함. 따라서 while문을 작성할 때는 조건식이 false로 평가되는 순간이 있는지 반드시 주의하여야 함.

3) do…while문

do…while문은 while 뒤에 오는 조건식이 true로 평가되는 동안 do 뒤에 오는 코드블록 내부의 코드를 반복하여 실행함. 단, 이 경우 do의 코드블록 내부의 코드가 최소 한 번은 실행됨.

do {
	console.log('코드블록 내부의 코드는 최소 한 번은 실행됩니다.') 
	// '코드블록 내부의 코드는 최소 한 번은 실행됩니다.'
} while (false)

4) for문과 while문

for문과 while문의 용도는 명확하게 구분되지 않지만, 주로 사용하는 상황은 있음.

 

🚀 for문을 사용하는 경우

• 반복 횟수가 비교적 명확할 때
• 배열, 문자열 내부를 순회할 때
• 반복문의 중첩이 필요할 때

🚀 while문을 사용하는 경우

• 반복 횟수가 명확하지 않을 때

6. 함수(function)

---

현실에서 발생하는 대부분의 복잡한 문제는 더 작고 간단한 문제로 나눌 수 있음. 복잡한 문제를 해결하기 위해서는 반대로 작고 간단한 문제를 하나씩 해결하고, 마지막에는 크고 복잡한 문제를 해결함. 이러한 과정을 컴퓨터는 함수라는 것을 사용해 해결함.

함수는 입력에 따라 그에 걸맞은 작업을 하는 하나의 작업 단위임. 만약 아래와 같은 형태의 계산기를 만들어야 한다면 몇 가지의 기능이 필요할까?

• 연산 기능(+, -, *, /)
• 숫자를 입력하는 기능
• 결과를 화면에 표시하는 기능
• 브라우저에 계산기를 어떻게 보여줄지 결정하는 기능

조금 더 자세히 이야기하자면, 함수는 입력(input)을 받아 출력(output)을 하는 하나의 작은 기능 단위. 즉, 입력을 받아서 코드블록 내부의 코드를 실행한 후 함수의 실행결과를 반환하는 일련의 과정의 묶음임.

[ 그림 ] 함수 정의 - 1

저, 함수 외부에서 특정한 입력값을 전달하여 호출할 수 있음. 함수가 호출되면 함수의 내부의 코드가 실행됨. 그리고 함수의 실행결과는 다시 함수 외부로 반환(return)할 수 있음. 특정한 코드실행 과정을 묶어서 함수를 생성하는 것을 ‘함수를 정의한다.’고 함.

1) 함수선언문과 함수표현식

JavaScript에서 함수를 정의하는 방법은 여러 가지가 있음. 그중에서 가장 대표적인 함수 정의 방법인 함수선언문과 함수표현식을 배움.

먼저 문자열 ‘hello world’를 출력하는 함수를 함수선언문으로 정의함.

// 함수선언문으로 정의한 함수
function greeting () { 
	console.log('hello world') 
};

변수를 선언할 때 let키워드를 사용하듯, 함수를 정의할 때는 function 키워드를 사용함. function 키워드 다음에는 함수명을 지정함. 위 예제에는 greeting이라는 함수명을 사용함. 그 뒤에는 소괄호(())를 입력해야 함. 소괄호 안에는 함수 내부에서 사용할 수 있는 매개변수를 사용할 수 있음. 다음으로, 실행할 코드를 코드블록({}) 내부에 넣음. 코드블록 안에는 문자열 ‘hello world’를 출력하는 코드를 작성함.

• 함수선언문: 변수를 선언하듯 함수 선언 키워드인 function 키워드를 사용하여 함수를 선언하는 방식
• 함수표현식: 함수 선언 키워드가 아닌 변수 선언 키워드를 사용하여 함수를 ‘표현’한 방식

[ 그림 ] 함수의 정의 - 2

2) 함수 호출

이전의 실습은 console.log()로 콘솔에 입력한 내용이 출력되는지 확인하는 방식임. 그러나 터미널에 `node index.js`를 입력해도 콘솔에 아무것도 출력되지 않음. 함수 내부에 있는 console.log()가 실행되지 않은 것임. 왜 그런 걸까?

그 이유는 바로, 함수 내부에 있는 코드는 함수를 호출했을 때만 실행되기 때문임. 함수 호출이란 함수를 실행시키는 명령을 전달하는 것과 같음. 함수선언문으로 정의한 함수를 호출해 보겠음.

function greeting () { 
  console.log('hello world')
};

greeting() // 'hello world'

이처럼 함수를 정의할 때 지정한 함수명 뒤에 소괄호(())를 붙이면 함수를 호출할 수 있음.

함수선언문이 아닌 함수표현식으로 정의한 함수는 어떻게 호출할까? 함수표현식으로 정의한 함수는 선언한 변수명에 소괄호를 붙임.

let greeting = function () {
  console.log('hello world')
};

greeting() // 'hello world'

3) 매개변수와 전달인자

매개변수는 함수를 정의할 때 선언하고, 함수 코드 블록 안에서 변수처럼 취급됨. 앞서 설명한 것처럼 함수를 정의할 때 소괄호(())에 매개변수를 추가할 수 있음. 이렇게 추가된 매개변수는 함수 내부에서 마치 변수와 같은 역할을 함.

function greeting (name) {
	console.log('hello ' + name);
}

greeting이라는 이름의 함수가 name이라는 매개변수를 가지고 있음. 현재는 아무것도 할당되어 있지 않으므로, 매개변수 name은 undefined로 초기화되어 있음. 그렇다면 이 매개변수 name에 값을 할당하기 위해서는 어떻게 하면 될까?

바로 전달인자를 사용함.

function greeting (name) {
	console.log('hello ' + name);
}

greeting('kimcoding'); // 'hello kimcoding'

함수를 호출할 때 소괄호 안에 값을 넣음으로써 매개변수에 값을 할당할 수 있음. 이것을 바로 전달인자라고 함. 호출할 때 전달한 'kimcoding'이라는 문자열이 함수 내부에서 매개변수 name에 할당된 것을 확인할 수 있음. 이처럼 매개변수와 전달인자를 활용하면 함수 외부에서 함수 내부로 값을 전달할 수 있음.

매개변수를 여러 개 사용하는 것도 가능할까? 물론 가능함. 매개변수의 개수에 맞게 전달인자를 전달하면 매개변수에 차례대로 전달됨.

function greeting (user1, user2) {
	console.log('hello ' + user1);
	console.log('hello ' + user2);
};

greeting('kimcoding', 'parkhacker');

그렇다면 만약 매개변수의 수보다 적은 전달인자가 전달되면 어떻게 될까? 또는 매개변수보다 많은 전달인자가 전달된다면 어떻게 될까?

function getUserName (user1, user2) {
	console.log(user1);
	console.log(user2);
};

getUserName('kimcoding'); // 'kimcoding' undefined

아무것도 전달되지 않은 매개변수는 undefined로 초기화되어 있음. 아무것도 할당하지 않은 변수가 undefined로 초기화되어 있는 것과 같음.

매개변수는 함수 내부에서만 사용이 가능함. 함수 내부에서 선언한 변수도 마찬가지로 함수 내부에서만 사용이 가능함.

function getUser (number) {
	let userName = 'kimcoding';
};

console.log(number); // Uncaught ReferenceError: number is not defined
console.log(userName); // Uncaught ReferenceError: userName is not defined

이처럼 매개변수와 함수 내부에서 선언한 변수는 자신이 선언된 위치에 따라 유효범위가 결정됨. 변수가 유효한 범위를 스코프라고 부름.

4) return문

외부에서 값을 전달받았듯 함수의 실행결과를 외부로 반환할 수는 없을까? 여기서 반환한다는 것은 함수 외부에서 함수의 결과값을 사용할 수 있다는 의미임.

function add (x, y) {
	return x + y; // 반환문
}

이 함수는 두 수를 입력받아 합을 리턴하는 함수임. 여기서 주목해야 할 것은 return이라는 키워드임. 지금까지 사용했던 ‘반환한다’라는 표현도 return을 번역한 표현임.

return문은 아래와 같은 중요한 역할을 함.

(1) 함수 내부의 코드가 차례대로 실행되다가 return문을 만나면 값을 반환한 후 함수는 종료됨. 다시 말해 return문 뒤에 나오는 코드는 실행되지 않.

function add (x, y) {
	return x + y; // 반환문
	console.log('실행되지 않습니다');
}

(2) return문에 작성된 코드를 실행한 후 결과를 함수 외부로 리턴함. 함수 외부에서 함수를 호출하면 함수의 실행결과를 확인할 수 있음.

function add (x, y) {
    return x + y; // 반환문
 }

 console.log(add(3, 2)); // 5

(3) 함수 호출의 결과를 변수에 할당하는 것도 가능함.

function add (x, y) {
	return x + y; // 반환문
}

let result = add(3, 2);
console.log(result); // 5

(4) 조금만 더 응용하면, 함수의 호출 결과끼리의 연산도 가능함.

function add (x, y) {
	return x + y; // 반환문
}

let result = add(3, 2) + add(5, 7);
console.log(result); // 17

 

 

⭐후기

---

• 반복문과 함수의 기본적인 사용법을 익힘. 코드의 재사용성을 높여주는 함수의 역할에 대해 이해하며, 앞으로 더 다양한 함수의 사용법을 학습하고 싶음. 반복문과 함수를 사용할 때 발생할 수 있는 에러와 예외 처리 방법에 대해 추가 공부를 해야할 것 같음. 화살표 함수, 콜백 함수, 고차 함수와 고급 함수와 큰 데이터를 처리할 때 반복문의 성능을 최적화하는 방법에 대해 추가적으로 공부해야겠음.

 

이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.