[💻 코드스테이츠 FE 44기] 부트캠프 - Javascript 조건문, 반복문, 함수

✔️ 시작

이번 학습은 페어활동, ZOOM수업 없이 개인 학습으로 진행했다.
Javascript 조건문(if, else, else if), 반복문(for, while), 함수(function), 매개변수, 전달인자, return 등을 배웠다.

---

📍 조건문 (if,else,else if)

✔️ if문

주어진 조건식의 참/거짓 여부에 따라 실행이 결정 된다.
if뒤 (,)에 조건식(논리 연산자 등)을 넣으면 조건식이 참으로 평가된 경우 코드가 실행된다.

if(조건){
	코드   
}

✔️ else문

true일 때 false일 때 각각 다른 조건을 걸 수 있다.

if(조건){
   // true일 때
}else{
  //flase일 때
}

✔️ else if문

여러 조건을 작성하고 싶을 경우 else if을 사용한다.
if,else문은 두번 이상 사용할 수 없지만 else if문은 여러번 사용이 가능하다.

//else if는 여러번 사용이 가능하다.
if(조건){
   코드
}else if(조건){
  코드
}else if(조건){
  코드
}
//if, else는 한 번만 사용가능하다.
if(조건){
   코드
}else if(조건){
  코드
}else(조건){
  코드
}

✔️ 삼항 조건 연산자

if, else문을 삼항 조건 연산자로 변경할 수 있다.

//if, else문으로 작성했으 경우
let age = 28;
if(age < 28){
	console.log("저보다 나이가 어립니다.");
}else{
	console.log("저보다 나이가 많습니다.");
}

//해당 if문을 삼항 조건 연산자로 작성했을 경우
조건식 ? 참일 경우 : 거짓일 경우; // 예시

let age = 28;
age < 28 ? console.log("저보다 나이가 어립니다.") : console.log("저보다 나이가 많습니다.");

조건식을 먼저 작성 후 ?를 입력한다.
? 뒤로 참/거짓일 때 실행될 코드를 작성해 준다.

참/거짓 일 때 실행할 코드는 :로 구분한다.

❗️ point

간단한 코드일 경우 삼항 조건 연산자를 활용하는게 좋지만 복잡한 코드일 경우 if, else을 이용하는게 좋다.

📍 반복문 (for, while)

반복되는 코드를 간결하게 코드를 작성할 수 있다.

✔️ for문

for 뒤 (,)에 초기값, 조건식, 증감식 순으로 들어간다.

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

• 초기값 : 증감식 반복횟수를 카운트하는 역할을 하는 변수(변수는 정수를 의미하는 integer의 약자 i를 주로 사용한다.)
• 조건식 : 코드 블럭 내부의 코드 실행 여부를 결정한다. (true일 경우 코드 실행, false일 경우 반복문 종료)
• 증감식 : 코드 블럭 내부의 코드를 실행한 후 초기값으로 선언된 변수를 증가 또는 감소시키기 위한 표현식

for(let i = 0; i <= 10; i++){
	console.log(i);
} // 0 1 2 ... 8 9 10

1. i에 0을 할당해 준다.
2. i가 10보다 작거나 동일한지 확인 한다.
3. true일 경우 console.log(i)를 실행한다.
4. 실행 후 i++일 실행 돼 i에 1이 할당 된다.
5. i <= 10 조건이 충족 될 때 까지 반복 된다.

❗️pont

i++은 1씩 증가 한다는 뜻을 가지고 있다.

✔️ 반복문 활용

for문, if문을 같이 사용할 수도 있다.

let num = 2;
if(num >= 2 && num <= 9){
	for(let i = 1; i <= 9; i++){
    	console.log(num * 1);
    }
}

✔️ 반복문 중첩

for문 내부에 for문을 추가할 수 있다.

for(let i = 0; i < 10; i++){ // 1
	for(let j = 0; j < 10; j++){ // 2
    	console.log(`${i}${j}`); // 3
    }
} // 00 01 02 ... 97 98 99

1. i에 0을 할당 후 조건이 맞는지 확인한다.
2. 1번의 조건이 맞을 경우 2번 j에 1을 할당 후 조건이 맞는지 확인한다.
3. 2번 조건이 맞을 경우 console.log('${i} ${j}') 가 실행된다.
4. 2번 조건이 0~9번까지 실행 될 때 1번이 다시 1번 반복된다.

• 즉 1 > 2 > 3번 순으로 한 번 반복 후 2번의 조건이 모두 마쳐야 1번이 다시 실행되고 다시 2번의 조건이 모두 마쳐야 1번이 다시 실행된다.

생활코딩 님의 반복문의 중첩을 확인하면 좀 더 이해하기 수월하다.
🔗 생활코딩 반복문의 중첩

✔️ while문

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

//while로 작성했을 경우
let num = 0;
while(num < 3){
	console.log(num); // 0 1 2
  	num++;
}
//for로 작성했을 경우
for(let num = 0; num < 3; num++){
	console.log(num);
}

while문을 for문으로 작성할 수 있고 반대로 작성할 수 있다.

❗️point

• while문의 경우 '무한 루프(반복문이 종료되는 조건식이 항상 참으로 평가되어 무한 반복되는 현상)'를 주의해야 한다.
• while문을 작성할 땐 조건식이 false가 되는 부분이 있는지 확인해 봐야한다.

✔️ do...while문

while뒤에 오는 조건식이 true로 형가 되는 동안 do 뒤에 오는 코드블럭 내부의 코드를 반복해 실행한다. (이 경우 do의 코드블록 내부의 코드가 최소 한 번은 실행된다.)

do{
	console.log("Hi");
}while(false)

📍 함수(함수 선언문, 함수 표현식)

입력을 받아 코드블록 내부의 코드를 실행한 후 함수의 실행결과를 반환하는 일련의 과정 묶음

1. 입력받기
2. 코드블럭 내부의 코드 실행
3. 함수 실행 결과 반환
4. 통 틀어서 일련의 과정 묶음

❗️ point

함수를 사용한다는 것은 특정한 코드 실행 과정을 하나로 묶어
필요할 때 마다 호출하여 실행 할 수 있다. (재사용에 용이하다.)

✔️ 함수 선언문

함수를 정의 할 때는 function키워드를 사용한다.
function 뒤에 오는 (,)내부엔 매개변수를 넣어준다.
매개변수는 상황에 따라 작성하기도 하고 작성하지 않기도 한다.

function 함수명(){
	코드
}
함수명(); // 함수 호출

// 함수 선언문 예시
function userName(){
	console.log("JiEun");
}
userName();

✔️ 함수 표현식

변수 선언 후 함수를 할당하는 형태로 코드를 작성한다.
함수 선언문과 달리 표현식 함수에는 특별한 식별자를 지정할 필요가 없다.
(변수에 함수를 할당하는 방식)

let 변수명 function(){
	코드
}
변수명();// 함수 호출

// 함수 표현식 예시
let userName function(){
	console.log("JiEun");
}
userName();

❗️ point

함수 내부에 있는 코드는 함수를 호출 했을 경우에만 실행되기 때문에 함수를 사용하고 싶은 경우 호출해야한다.

//함수 선언문
function 함수명(){
  코드
}
//함수 표현식
let 변수명 function(){
  코드
}
// 함수 호출
함수명(); 
변수명();

📍 매개변수와 전달 인자

✔️ 매개변수

함수를 정의할 때 선언하고 함수 코드 블록 안에서 변수 처럼 취급

function 함수명(매개변수){
	코드
}

// 매개 변수 예시
function greeting(age){
	console.log(`My age ${age}`);
}

✔️ 전달인자

함수를 호출할 때 소괄호 안에 값을 넣음으로써 매개변수에 값을 할당할 수 있다.

function 함수명(매개변수){
	코드
}
함수명(전달인자); // 함수 호출

// 전달인자 예시
function greeting(age){
	console.log(`My age ${age}`);
}
greeting(28);

// My age 28이 나옴

✔️ 여러개의 매개변수

매개변수에 여러 개 사용하는 것도 가능한다.
매개변수의 개수에 맞게 전달인자를 순서대로 입력한다.

function userInfo(name, age){
	console.log(`Hi! ${name}, my age ${age}`)
}
userInfo("jieun",28);

매개변수 갯수 보다 전달인자 갯수가 적은 경우 undefined

function userInfo(name, age){
	console.log(`Hi! ${name}, my age ${age}`)
}
userInfo("jieun"); // "jieun" undefined

✔️ return

return은 "반환하다" 하는 뜻이기도 하다. 여러번 호출 해야하는 함수를 return을 통해 함수를 효율있게 사용할 수 있다.

생활코딩 님의 return을 확인하면 좀 더 이해하기 수월하다.
🔗 생활코딩 함수(리턴)

1. 위에서 아래로 실행되다 return문을 만나면 값을 반환한 후 함수가 종료한다. (return문 뒤에 나오는 코드는 실행되지 않는다.)

function userInfo(name, age){
	return console.log(`Hi! ${name}, my age ${age}`); // 반환문
  	console.log(`Hi ${name}!`) // 실행되지 않는다.
}

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

function userInfo(name, age){
	return `Hi! ${name}, my age ${age}`; // 반환문
}
console.log(userInfo("jieun", 28)); // Hi! jieun, my age 28

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

function userInfo(name, age){
	return `Hi! ${name}, my age ${age}`; // 반환문
}
let userInfo2 = userInfo("jieun", 28);
console.log(userInfo2); // Hi! jieun, my age 28

4. 함수의 호출 결과끼리의 연산도 가능하다.

function add(x, y){
	return x + y; // 반환문
}
let result = add(3, 2) + add(5, 7);
console.log(result);

---

✏️ 마치며

조건문(if)에 반복문(for)을 넣을 수 있고 반복문(for)안에 반복문(for)을 넣어 중첩할 수 있다.

함수(function)를 통해 재사용이 유용해 지고,
매개변수, 전달인자가 헷갈렸는데 이번 학습을 통해 이해하게 되었다.

return이라는 개념도 잘 가지 않았는데 이번 학습을 통해 어느 정도 이해할 수 있었다.

내일 부터 다시 페어 활동이 시작된다. 저번 처럼 어리바리하지 않도록
이번에 꼭 페어분께 도움이 되었으면 좋겠다.