TIL 016 | JavaScript Control Statement & Function

dhforb123·2021년 12월 3일
0

JavaScript TIL

목록 보기
2/4
post-thumbnail

Today, I Learned.
[멋쟁이 사자처럼 프론트엔드 스쿨]에서 배운 내용 정리.
- Control Statement.
- Function.

✏️ Control Statement ✏️

1. 조건문

1-1. if ()

- 사용법

if (조건-1) {
    console.log("조건-1이 true일 때");
}
else if (조건-2) {
    console.log("조건-2이 true일 때");
}
else if (조건-3) {
    console.log("조건-3이 true일 때");
}
else {
    console.log("예외일 때");
}

if ()문은 괄호 안에 들어가는 조건이 true이면 코드 블록이 실행된다.
else if ()문으로 복수 조건, else문으로 예외 조건까지 사용 가능하다.

1-2. 조건부 연산자

let 변수 = 조건 ? 조건이 true일 때 대입값 : 조건이 false일 때 대입값;

조건부 연산자는 조건에 따라 다른 값을 변수에 할당해줘야 할 때 주로 사용한다.

1-3. switch ()

- 사용법

switch (expression) {
    case 사례-1:
        console.log("expression가 사례-1와 일치할 때");
        break;
    case 사례-2:
        console.log("expression가 사례-2와 일치할 때");
        break;
    case 사례-3:
        console.log("expression가 사례-3와 일치할 때");
        break;
    default:
        console.log("예외일 때");
        break;
}

switch ()문은 expression과 사례가 일치하면 break;문을 만날 때까지 실행된다.

2. 반복문

2-1. while ()

// while (조건) {
// 	조건이 true인 동안 실행
// }

// do {
//	조건이 true인 동안 실행
// } while (조건);

let x = 1;
while (x <= 10) {
	console.log(`조건이 true인 동안 ${x}번 반복`);
	x++;
}

while ()문은 괄호 안에 들어가는 조건이 true인 동안 코드 블록이 반복된다.
do while ()문은 본문을 최소 1회라도 실행하고자 할 때 사용한다.

2-2. for ()

- 사용법

for (begin; condition; step) {
	조건이 true인 동안 실행
}

- 예시

// 0 부터 4까지 console에 출력하기
for (let i = 0; i < 5; i++){
    console.log(i);
}

- 사용법

for infor (let 인덱스 in 배열) {
	배열의 0 번째부터 배열의 끝까지 반복
}
for offor (letof 배열) {
	배열의 0 번째부터 배열의 끝까지 반복
}

- 예시

let array = [10, 20, 30, 40, 50];
for (let index in array) {
    console.log(index);
}
for (let variable of array) {
    console.log(variable);
}

for ()문은 while 반복문보다는 복잡하지만 가장 많이 쓰이는 반복문으로
조건이 true인 동안 코드 블록이 반복된다.
for in문은 배열의 0 번째부터 배열의 끝까지 반복하며 index 값을 반환한다.
for of문은 배열의 0 번째부터 배열의 끝까지 반복하며 value 값을 반환한다.

✏️ Function ✏️

함수 란?

함수(function)란 특별한 작업을 수행하기 위해 독립적으로 설계된 코드의 집합으로
특정 작업을 여러 번 반복해야 할 때 해당 작업을 함수로 작성하여 필요할 때마다 함수를 호출하여 사용하면 반복적인 코드를 피할 수 있으며 프로그램을 여러 개의 함수로 나누어 모듈화하여 전체적인 코드의 가독성은 물론 유지보수도 용이하다.

1. 함수 선언

1-1. 함수 선언문

- 사용법

function 함수명 (매개변수) {
	함수내용;
	return 반환 값;
}

- 예시

function sum(a, b) {
	return a + b;
}

함수 선언문은 미리 선언해 놓은 함수를 호출하여 사용하는 방법으로 일반적으로 사용하는 방법이다.

1-2. 함수 표현식

- 사용법

let 함수명 = function(매개변수) {
	함수내용;
	return 반환 값;
};

- 예시

let sum = function(a, b) {
    return a + b;
};

함수 표현식은 함수를 따로 선언하지 않고 변수에 대입과 동시에 정의하는 방법이다.

1-3. 화살표 함수

- 사용법

let 함수명 = (매개변수) => 함수내용;

- 예시

let sum = (a, b) => a + b;

화살표 함수는 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이다.

2. 변수

2-1. 전역변수

let sumNum = 0; // 전역변수 sumNum
function sum(a, b) {
    sumNum = a + b;
}
sum(10, 20);
console.log(sumNum);

함수 내부에서 함수 외부의 변수인 전역변수(global variable)에 접근할 수 있다.

2-2. 지역변수

function sum(a, b) {
	let sum = 0; // 지역변수 sum
	sum = a + b;
	return console.log(sum);
}
sum(10, 20);
// sum = 0; // error

함수 내에서 선언한 변수인 지역변수(local variable)는 함수 안에서만 접근할 수 있다.

2-3. 매개변수

let x = 10;
function increase(a) { // 매개변수 a
    console.log(++a);
}
increase(x);
console.log(x);

매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있으며
매개변수로 전달된 데이터는 인자(argument)라고 부른다.
전달된 인자는 함수의 지역변수로서 처리된다. (call by value)
하지만, Array와 Object의 경우 예외로 메모리 주소를 통해 값을 처리하기 때문에
call by reference 처럼 처리된다.

3. 함수 이름 짓기

함수는 어떤 동작을 수행하기 위한 코드를 모아놓은 것으로 함수의 이름은 대개 동사이다. 함수 이름은 가능한 간결하고 명확해야 하며 코드를 읽는 사람이 함수 이름만 보고도 함수가 어떤 기능을 하는지 힌트를 얻을 수 있어야 한다.

함수가 어떤 동작을 하는지 축약해서 설명해주는 동사를 접두어로 붙여 함수 이름을 만든다. 예를 들면 get…, show…, create…, check… 등과 같은 접두어를 사용하면 함수 이름만 보고도 해당 함수가 어떤 동작을 하는지 파악할 수 있다.
(팀 내에서 그 뜻이 반드시 합의된 접두어만 사용해야 한다.)

0개의 댓글