9. 반복문과 함수

Lia·2023년 4월 19일

JavaScript

취취취 이것은 취업에서 나오는 소리야

목록 보기

9/48

반복문

하~ ㅋㅋㅋㅋㅋㅋ

for문

for문은 아래와 같은 형식으로 이루어져 있음.

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

1부터 5까지의 수를 모두 더하는 코드를 for문으로 구현한다면 ?

let result = 0;

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

console.log(result); // 15

for문 내부에 num변수를 할당하고
변수 num이 5보다 작거나같은지 확인
2의 결과가 true면 코드를 실행!(result = result + num;)
변수 num을 1증가시킴
2번부터4번까지 반복 후 2의 결과가 false가 되는 순간 반복문은 종료

반복문과 조건문

아래와 같이 구구단을 조건문과 반복문을 같이 사용하여 출력할 수 있음.

let num = 3;
if (num >= 2 && num <= 9) {
	for (let i = 1; i <= 9; i++) {
		console.log(num * i);
	}
} else {
	console.log('2와 9사이의 수를 입력하세요.');
}

순서는
1. if 문의 조건식을 평가하여 해당 조건식이 참인지 거짓인지 판별
2. 만약 조건식이 거짓이라면 else 블록이 실행
3. 조건식이 참인 경우에는 if 블록 안에 있는 for 문이 실행되고 루프되다가 i의 값이 9를 초과하면 for문은 종료

또 다른 예제는

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 1) {
    console.log(`${i}는 홀수입니다.`);
  } else {
    console.log(`${i}는 짝수입니다`);
  }
}

순서는
1. for문 안에 조건들을 충족하면 무한루프하다가 i의 값이 10초과시 for문 빠져나옴
2. if문 조건식에서 홀수인 경우만 console.log를 통해 출력
3. if문 조건식에서 홀수가 아닌경우 즉 짝수인 경우 else문 으로 빠짐

for문 내부에 i라는 변수를 할당해주고 그곳에 값을주고 조건들을 작성하는것에 대해 음..어떻게 써야하는지 익숙해지는데 시간이 조금 걸렸다.

반복문과 문자열

인덱스(index)
문자열의 각 문자들은 순서를 가지고 있는데 첫번째 문제의 인덱스는 1이 아닌 0이다! 컴퓨터는 0부터 시작~
삐리삐리~ 형태는 변수명[인덱스 숫자입력]
```
예) let str = 'hello';
    console.log(str[0]); // 'h'가 출력됨
```
인덱스 중에 특정 문자의 인덱스를 확인하는 메서드는 indexOf()이다.
```
예) let str = 'hello'
    console.log(str.indexOf('e')); // 1이 출력됨
```
길이(length)
문자열의 첫번째 문자부터 마지막 문자까지 모두 출력하고 싶다면?
```
let str = 'abcde';
for (let i = 0; i <= 4; i++) {
    console.log(str[i]);
}
```
첫번째 문자 'a'의 인덱스는 0, 마지막 문자인 'e'의 인덱스는 4이므로, 결과적으로 각 문자를 하나씩 차례대로 출력하는 코드임.

만약 문자열의 길이가 길거나 알수없다면?
```
let str = 'codestates';
for (let i = 0; i <= str.length - 1; i++) {
	console.log(str[i]);
}
```
다시복습하다보니 또 헷갈려
str[i]는 문자열 str에서 i번째 인덱스에 해당하는 문자를 나타내는 것, console.log(str[i]) 구문은 문자열 str에서 i번째 인덱스에 해당하는 문자를 콘솔에 출력하는 역할. i의 값이 0, 1, 2, 3, 4일 때, str[i]는 각각 문자열 'abcde'에서 'a', 'b', 'c', 'd', 'e'에 해당하는 값을 갖게 됨 for문이니까 하나씩 출력되는거임.

문자열의 길이는 10, 인덱스의 길이는 9
따라서 문자열의길이에서 -1을한다면? 인덱스의 길이가 나오게됨
그리하여~ 문자열의 길이인 length 객체를 사용하여 해결할 수 있음.

length는 문자열에 포함된 문자갯수임 그리고 문자열의 속성(property)임 문자열이란 하나 이상의 문자들이 나열된, 자바스크립트 타입 중 문자열이라는 데이터타입 인것이고~~~ 사소하지만 확실한 개념을 가지고 있어야할듯 메소드와 속성 차이를알자.!!

반복문의 중첩 (야. 중첩하지마..)

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

코드의 순서는 바깥쪽 for문이 먼저 실행되고
안쪽 for문이 6번 반복되며 바깥쪽 for문이 두번째로 실행되고 안쪽 for문이 6번 반복되며 바깥쪽 for문의 i 값이 7이 될때 for문은 종료됨

Template literal을 사용하여 i 변수의 값을 문자열내에 포함시킴 그냥 i와j를 console.log에 썼다면 그냥 첫번째 주사위는 ${i}, 두번째 주사위는 ${j}입니다. 이것만 36번 반복될거임.

for (let i = 2; i <= 9; i++) {
  console.log(`${i}단`);
  for (let j = 1; j <= 9; j++) {
    console.log(`${i} x ${j} = ${i * j}`);
  }
}

이중문으로 구구단 만들기. 얼추 이해가 간다. .
반복문은 정말.. 계속반복해야 개념이 잡혀서 반복문인가? ㅎ;;

While문 (반복문 그만!!!!!!!!!!!!)

for문과 달리 while문은 조건식만 입력한 후 조건식의 평가결과가 true인 경우 코드블록 내부의 코드를 반복하여 실행 아래 while문, for문은 같다!

while (i < 3) {
  console.log(i);
  ++i;
}

for (let i = 1; i < 3; ++i) {
    console.log(i)
}

do…while문 (넌 또 뭐냐고...;;)

조건을 먼저 검사하지 않고 일단 코드 블록을 한 번 실행한 후에 조건을 검사하고, 조건이 참(true)인 경우 다시 코드 블록을 실행합니다.

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

for문과 while문의 용도는 명확하게 구분되지 않음 서로 대체가능해서.

for문을 사용하는 경우

1.반복 횟수가 비교적 명확할 때
2.배열, 문자열 내부를 순회할 때
2.반복문의 중첩이 필요할 때
while문을 사용하는 경우

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

함수

함수는 입력값을 받아 내부 코드를 실행하고 결과값을 반환하는 블록
function 키워드를 사용하여 선언하며, 함수명, 매개변수 리스트, 함수 본문으로 구성. 함수를 호출하기 전까지 코드블록 내부의 코드는 실행되지 않음

함수선언문과 함수표현식

대표적인 함수 정의 방법

함수선언문
```
function greeting () { 
    console.log('hello world') 
};
```
변수를 선언할 때 let키워드를 사용하듯, 함수를 정의할 때는
1. function 키워드를 사용함
2. greeting라는 함수명입력
3. ()소괄호 입력
4. 소괄호안에 함수 내부에서 사용할 수 있는 매개변수 입력
5. 실행할 코드블럭 {} 넣어주면 됨

함수표현식
```
let greeting = function () {
    console.log('hello world')
}; 
```
let 키워드를 사용해서 변수를 선언하고 함수를 할당해줌
함수선언문과는 달리, 식별자를 지정할 필요가 없음 함수 명 같은 것 필요없음. greeting을 호출하면 함수가 실행되는 거임

함수 호출 (함수정의 했으니 이젠 호출해보잣!)

함수 호출이란 함수를 실행시키는 명령을 전달하는 것!
함수선언문으로 정의한 함수를 호출해보잣!

//함수선언문
function greeting () { 
 console.log('hello world')
};

//함수선언문의 함수 호출
greeting() // 'hello world'

지정한 함수명 뒤에 소괄호()를 붙이면 함수를 호출함! 오호~
그렇다면!!
함수표현식으로 정의한 함수는 어떻게 호출하나욧?

//함수표현식
let greeting = function () {
  console.log('hello world')
};

//함수 표현식의 함수 호출
greeting() // 'hello world'

선언한 변수명 뒤에 소괄호()를 붙이면 함수를 호출함! 오호호~

매개변수와 전달인자 (거의 다왔다!! 아자아자 화이팅!)

매개변수는 함수를 정의할 때 선언하고, 함수 코드 블록 안에서 변수처럼 취급됨
소괄호()에 매개변수 추가함

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

greeting이라는 이름의 함수가 name이라는 매개변수를 가지고 있다.
매개변수 name에 값을 할당하기 위해서는 어떻게하나?
현재는 undefined로 초기화되어 있음.

전달인자를 사용해줌

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

함수를 호출할 때 소괄호 안에 값을 넣어서 매개변수에 값을 할당할 수 있음.
즉, name이라는 매개변수는 'kimcoding'이라는 값을 할당받음.
매개변수와 전달인자를 사용하면 함수외부에서 내부로 값을 전달할수있음

Lia

https://lia-portfolio.vercel.app/

이전 포스트

8. 변수와 조건문 복습 문제풀이

다음 포스트