[2023 신입부원 심화 스터디] 박지민 #2주차 - 기초문법 part. 2, 3

1.조건문: 지정된 조건이 참인지 거짓인지에 따라서 서로 다른 코드로 분기하기 위해 사용

- if문

if (조건) {
	조건이 참일 때 실행
}

if문의 조건이 거짓이면 블록 내부에 진입하지 않음

 

- if ~ else문: 조건식이 거짓일 때 실행되게 하려면 if 문 다음에 else 작성

if (조건) {
	조건이 참일 때 실행
} else {
	조건이 거짓일 때 실행
}

 

- else if문: 여러 개의 조건을 한 번에 처리 가능

• 하나의 조건문을 작성할 때 if와 else는 한 번만 사용 가능 & else if는 여러 번 사용 가능
• if로 시작, else로 끝나야 함 (else는 없어도 됨)

if (조건) {
	참일 때 실행
} else if (조건) {
	위의 거짓이고 else if 조건이 참일 때 실행
} else {
	위의 조건들이 모두 거짓일 때 실행
}

 

- switch: 동일한 조건이 주어지고 그 조건의 값에 따라 다른 명령을 실행

switch (조건) {
	case 값1 : 명령1
		break;
	case 값2 : 명령2
		break;
	default: 명령
}

• 실행할 부분이 끝나면 break 써야 함
  • 일치하는 조건을 만나면 이후에 만나는 break까지 명령을 실행
  • 더 이상 나머지 다른 조건들은 살펴 보지 않고 조건문을 빠져나옴
• default: 
  • 마지막에 위치
  • 위에 나열된 case에 참이 되는 케이스가 없다면 실행

 

- break 키워드 사용하지 않을 경우

조건이 참이 되는 케이스를 만나면 break를 만날 때까지 모든 코드를 실행하므로 의도치 않은 결과를 만들지 않기 위해 break 사용

 

- if와 switch문 비교

• 값으로 나올 수 있는 케이스가 여러 개이고 값이 딱 떨어진다면 switch문 사용 → 가독성 좋음
• 내부 블록에서 처리하는 내용이 길고 복잡하면 if문이 나음 (일반적으로 더 많이 사용)
• 상황에 따라 나은 쪽 선택하여 사용

 

2. 반복문: 반복적으로 수행해야 하는 동작을 처리하기 위해 사용하는 제어문

- for문

괄호 안에 반복을 위한 조건들을 명세 - 시작값, 반복의 조건, 증가식 작성 & 세미콜론(;)으로 구분

• 시작값: 반복문을 진입할 때 최초로 딱 한 번만 실행되는 부분
• 조건식: 코드를 반복할 때마다 부합하는지 확인 → 확인 값이 참이라면 반복문 실행, 거짓이라면 반복문 빠져나옴
• 증가식: 매회 반복을 마친 다음에 실행

for (초깃값; 조건; 증가식) {
	실행할 명령
}

 

- 시작 값을 생략하는 방법

선언하는 부분을 for문 위에 선언 → 시작 값 자리의 자리만 구분하고 ; 작성 → 자리만 명세

- 증감 식을 생략하는 방법

자리 구분을 위해 ;을 두고 출력하고 바로 증감을 하도록 작성 가능

 

- break

조건들과 무관하게 사용자가 원하는 시점에 반복문을 빠져나올 수 있음

- continue

반복문을 빠져나가는 것이 아니라 현재 반복만 종료하고 다음 반복으로 넘기는 명령어

 

- for of: 반복이 반응한 객체(배열, 문자열)에서 사용 가능한 반복문

• 주어진 객체를 차례로 순회하며 주어진 코드 실행
• 괄호 안에 사용할 변수, of 키워드, 반복이 가능한 객체를 순서대로 지정

const arr = [1, 2, 3];

for (const i of arr) {
	console.log(i)
}

조건을 만족할 때만 반복하는 것이 아니라 배열 / 문자열의 요소들을 처음부터 끝까지 순회하며 내부에 지정된 코드를 실행하는 방식으로 동작

 

- while: 조건이 참일 동안 계속 반복

while (조건) {
	실행할 명령
}

괄호 안의 조건이 참이면 계속해서 내부 코드 반복 실행

괄호 안의 조건이 거짓이라면 내부에 진입 X 반복문 종료

 

- do while: while문과 비슷하지만 조건문이 반복문의 끝 위치에서 판별

do {
	실행할 명령
} while (조건)

실행될 때 우선 집입 하면서 무조건 한 번은 실행되고 조건문으로 넘어감

 

3. 함수

- 함수란?

• 어떤 목적을 달성하거나 원하는 결과를 도출하기 위한 코드의 집합
• 반복적인 동작을 처리하기 위해 작성됨 → 재활용 가능
• 공통 부분 코드를 미리 만들어 두어 더 빠르게 사용 가능

function 함수명() { // 함수 선언
	명령
}

함수명() 또는 함수명(변수) // 함수 호출

 

- 인자와 매개변수 (Arguments vs Parameter)

• 인자 (arguments)
  • 함수를 호출할 때 전달하는 값 -> 함수의 입력 값
• 매개변수 (parameter)
  • 함수를 정의할 때 작성하는 필요 인자 -> 함수의 입력 변수

 

- 지역변수와 전역변수 (변수의 scope)

• 지역변수 (local variable)
  • 함수 내부에서 선언된 변수
  • 변수를 사용할 수 있는 범위가 함수 내부로 제한됨 → 함수 내부에서만 사용 가능
• 전역변수 (global variable)
  • 함수 외부에서 선언된 변수
  • 함수 내부에서 접근 가능

전역변수와 동일한 이름으로 함수 내부에서 재선언 된다면 함수 내부에서는 지역변수에만 접근 가능

 

- 호출된 인자의 개수가 부족할 때

• 함수를 호출할 때 더 많거나 적게 인자를 전달해도 문서 상에서 오류 발생 X → 그냥 결과 값이 나오지 않음 (NaN)
  • 기본적으로 undefined가 할당되기 때문
  • NaN = Not a Number (숫자가 아님)
    • 숫자에 undefined를 더했기 때문

 

- 매개변수 기본 값 (Default Parameter)

필요한 인자의 개수보다 적은 인자가 전달되었을 때 매개변수들의 기본 값을 지정하면 undefined로 지정되지 않음

 

- arguments 객체

• 필요한 인자의 개수보다 더 많은 인자가 전달되어도 아무 문제 X -> 정상적으로 작동
• 인자의 개수가 몇 개든 전부 받아서 배열처럼 저장되고 배열처럼 접근 가능

 

- 나머지 매개변수 (Rest Parameter)

지정한 인자를 제외한 나머지 모든 인자들을 배열로 받아서 나타냄

function print(a, b, ...rest)
	console.log(a);
	console.log(b);
	console.log(rest)
}

print(10, 20, 30, 40, 50, 60, 70);

// 10
// 20
// [30, 40, 50, 60, 70]

 

- 함수의 반환 값 (return)

• 함수는 특정 동작을 수행할 뿐 아니라 return 명령을 통해 특정 값 반환 가능
• return 사용 → 현재 함수를 종료하고 지정한 값을 함수를 호출한 지점으로 반환

 

4. 함수의 표현식과 화살표 함수

- 함수의 표현식

자바스크립트에서는 함수를 하나의 값으로 취급 → 함수를 변수의 값을 대입하듯이 표현식으로 정의

const sum = function (a, b) {
	console.log(a + b);
};

sum (10, 20); // 30

 

- 화살표 함수

• 함수 선언을 간단하게 작성 가능

(매개변수) => { 함수 내용 }

const sum = (a, b) => console.log(a + b);
// 명령이 한 줄 -> 중괄호 생략 -> return이 자동적으로 들어감
// 중괄호가 있음 -> 자동으로 return X 도로 return 작성

 

- 화살표 함수에서 괄호를 생략할 수 있는 경우

• 필요한 인자가 하나인 경우 인자를 감싸고 있는 괄호 생략 가능
• 괄호 생략 = 본인의 스타일
  • 본인의 스타일에 따라 괄호 생략 가능 / 계속 붙여도 상관 X
• 인자가 여러 개이거나 하나도 사용하지 않을 경우에는 빈 괄호 작성

 

- 일반 함수를 화살표 함수로 바꾸기

// 일반 함수
function hello() {
	consol.log('Hello!');
	console.log('World!');
}

// 화살표 함수
const hello = () => {
	consol.log('Hello!');
	console.log('World!');
};

hello(); // Hello! World!