22.12.19 - 조건문 / 반복문 / 함수

1. 조건문

1) if문

주어진 조건식의 true / false 여부에 따라 실행을 결정한다. 따라서 조건식의 결과는 boolean 타입이 되도록 작성해야 한다. 

 

 

2) else문

조건이 true일때와 false일때 각각 다른 코드가 실행되도록 해준다. else문은 독립적으로 사용할 수 없으며 if문 바로 뒤에 작성해야 한다. 조건을 더 추가해야할 경우에는 else if문을 사용한다. 

if, else문은 두번 이상 사용할 수 없지만 else if문은 여러번 사용이 가능하다. 

 

 

3) 삼항 조건 연산자

조건문 ? 참일때 실행할 코드 : 거짓일때 실행할 코드 

if문과 else문은 삼항 조건 연산자로 바꿔쓸수있다. 

 

조건에 따라 실행할 코드가 간단할 경우 - 삼항 조건 연산자 사용(간단함. 가독성👍)

조건에 따라 실행할 코드가 복잡한 경우 - if / else문 사용

 

let city = '서울'; 

// if문
if (city === '서울') {
	console.log('여기는 서울입니다.');
}

// else문
if (city === '서울') {
	console.log('여기는 서울입니다.');
} else {
	console.log('여기는 서울이 아닙니다.')
}

// if...else if...else
let name = '김서울';
let add = '서울'

if(name === '김서울' && add === '서울') {
	console.log('정보가 일치합니다.')
} else if (name === '김서울' && course !== '서울') {
	console.log('주소를 확인하세요.')
} else {
	console.log('일치하지 않는 정보입니다.')
}

// 삼항조건연산자
let num = 21;
num % 2 === 1 ? '홀수' : '짝수';

 

 

 

2. 반복문

반복문을 사용하면 불필요한 코드를 반복적으로 사용하지 않고 간결하게 코드를 작성할 수 있다. 

 

1) for문

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

• 초기값 : 증감식 반복 횟수를 카운트하는 역할을 하는 변수. 반복문의 코드블록 내에서만 유효함
• 조건식 : 코드블록 내부의 코드 실행 여부를 결정. 참이면 실행, 거짓이면 반복문 종료.
• 증감식 : 코드블록 내부의 코드를 실행한 후 초기값으로 선언된 변수를 증가 또는 감소시키기 위한 표현식

 

✅ for문이 실행되는 순서

let num = 2;

for (let i = 1; i <= 9; i++) {
	console.log(`${num} * ${i} = ${num * i}`);
}

1. for문 내부에서 유효한 변수(초기값)이 선언되고 값이 할당됨 (let i = 1)

2. 초기값을 조건식에 따라 평가함 ( i <= 9 → 1 <= 9 → 결과 : true)

3. 참일 경우 코드블록 실행. 거짓이면 반복문 종료 (콘솔에 2 * 1 = 2 출력됨)

4. 코드블록이 실행된 후 증감식에 따라 초기값 변화 (i++ → i 는 2가 됨)

5. 변화된 초기값을 다시 조건식에 따라 평가하고 참이라면 코드블록을 실행, 거짓이라면 반복문을 종료한다. (2 <= 9 가 됨으로 코드블록 실행. i가 10이 될때까지 코드블록이 반복됨)

 

 

2) 문자열과 반복문

let str = 'winter';

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

// 결과
// w
// i
// n
// t
// e
// r

str의 길이는 5

반복문으로 i는 0부터 4까지  5회 반복(0, 1, 2, 3, 4 => 5회)

str 문자의 각 인덱스는 w(0) i(1) n(2) t(3) e(4) r(5)

=> 콘솔로 한글자씩 모든 글자를 출력할 수 있음

 

 

3) 반복문과 조건문

// 구구단 5단에서 짝수를 곱했을때만 출력하기

let num = 5;

for (let i = 0; i <= 9; i++) {
  if (i % 2 === 0) {
    console.log(`${num} * ${i} = ${num * i}`);
  }
}

// 결과
// 5 * 0 = 0
// 5 * 2 = 10
// 5 * 4 = 20
// 5 * 6 = 30
// 5 * 8 = 40

 

 

4) 반복문의 중첩

// 2단부터 9단까지 구구단 출력하기

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

 

 

5) while문

while (조건식) {
    // 실행할 코드
}

조건식만 입력한 후, 조건식의 평가결과가 true일 경우 코드블록 내부의 코드를 반복해서 실행한다. 

단, 사용시에는 무한 루프가 되지 않게 주의해야하는데, 조건식이 항상 참일경우 반복문이 무한히 반복되기 때문이다. 

따라서 while문 사용시에는 거짓으로 평가되는 순간이 있는지 확인해야 한다. 

 

let num = 1;

// 조건이 항상 참이면 무한반복 된다
while (num < 5) {
	console.log('무한반복!!');
}

// 조건식이 거짓으로 평가되는 순간이 있는지 확인해야 한다
while (num < 5) {
	console.log('4번 실행!');
    num++;
}

 

 

6) do...while문

do {
	console.log('do while은 최소 한번은 실행!') 
} while (false)

// 결과
// do while은 최소 한번은 실행!

while 뒤에 오는 조건식이 true로 평가되는 동안 do 뒤에 오는 코드블록 내부의 코드가 반복하여 실행된다. 

단, 이 경우 do의 코드블록 내부의 코드가 최소 한 번은 실행된다! 

 

 

✅ for / while을 사용해야 하는 경우

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

 

3. 함수

1) 함수의 정의

입력을 받아서 코드블록 내부의 코드를 실행한 후 함수의 실행결과를 반환하는 일련의 과정의 묶음. 함수 외부에서 특정한 입력값을 전달하여 호출하고, 함수 내부의 코드가 실행되고 함수의 실행결과는 다시 함수 외부로 반환됨. 

따라서 함수를 사용한다는 것은 특정한 코드 실행과정을 하나의 묶음으로 묶어서 필요할 때마다 호출하여 실행한다는 것을 의미한다. 

=> 함수 생성 = 함수를 정의한다. 

 

 

2) 함수 선언문 / 함수 표현식

✅ 함수 선언문

function 함수명 (매개변수…) {
    // 실행할 코드 
}

function 키워드와 함께 함수명 지정

 

✅ 함수 표현식

let 변수명 = function() {
    // 실행할 코드
}

변수를 선언하고 함수를 할당하는 형태

 

 

3) 함수 호출

function myFn1() {
	console.log('함수 선언문으로 정의된 함수 호출');
}

let myFn2 = function() {
	console.log('함수 표현식으로 정의된 함수 호출');
}

// 함수 호출하기
myFn1();
myFn2();

함수 내부의 코드는 함수를 호출했을때만 실행된다. 함수 호출은 함수를 실행시키는 명령을 전달하는 것이다. 

지정한 함수명 뒤에 소괄호()를 붙이면 호출이 되고, 함수 표현식으로 정의된 함수는 변수명에 소괄호를 붙여 호출한다. 

 

 

4) 매개변수와 전달인자

function introduce(name, add) {
	console.log(`내 이름은 ${name}이고 ${add}에 살고 있습니다.`);
}

introduce('김서울', '서울');

// 매개변수 => name, add
// 전달인자 => 김서울, 서울

• 매개변수 : 함수를 정의할때 선언하고 함수 코드 블록 안에서 변수처럼 취급됨. 
• 전달인자 : 함수를 호출할때 소괄호 안에 값을 넣음으로서 매개변수에 값 할당

 

✅ 매개변수의 수보다 적은 / 많은 전달인자가 전달 된 경우

: 아무것도 전달되지 않은 매개변수는 undefined로 초기화 되어 있다. 아무것도 할당되지 않은 변수가 undefined로 초기화 된 것처럼! 

 

매개변수는 함수 내부에서만 사용가능 하다. 함수 내부에서 선언한 변수도 함수 내부에서만 사용 가능하다. 

이렇듯 매개변수와 함수 내부에서 선언한 변수는 자신이 선언된 위치에 따라 유효범위가 결정된다. 

변수가 유효한 범위를 스코프 라고 한다.

 

5) return문

✅ return문의 역할

• 함수 내부의 코드가 차례대로 실행되다가 리턴문을 만나면 값을 반환한 후 함수는 종료된다. 즉 리턴문 뒤에 나오는 코드는 실행되지 않는다.
• 리턴문에 작성된 코드를 실행한 후 결과를 함수 외부로 리턴한다. 함수 외부에서 함수를 호출하면 실행결과를 확인할 수 있다. 
• 함수 호출의 결과를 변수에 할당할 수 있다.
• 함수 호출 결과끼리의 연산도 가능하다.