[JavaScript]문법정리(2) - 조건문, 반복문, 함수

1. 조건문

📌 if

const name = 'df';
if (name === 'suah') {
  console.log('Welcome, Suah!');
} else if (name === 'coder') {
  console.log('You are amazing coder');
} else {
  console.log('unknown');
}

📌 ?

condition ? value1 : value2

• 조건이 참이면 value1 출력
• 조건이 거짓이면 value2 출력

console.log(name === 'suah' ? 'yes' : 'no');   //no

📌 switch

• 여러개의 if문이 사용될 때 쓴다
• enum-like value 체크할 때 쓴다
• typescript에서 여러 타입을 체크할 때 쓴다

const browser = 'IE';
switch (browser) {
  case 'IE':
    console.log('go away!');
    break;
  case 'Chrome':
  case 'Firefox':   //return이 같은 경우 case 연달아서 쓸 수 있음 
    console.log('love you!');
    break;
  default:
    console.log('same all!');
    break;
}

2. 반복문

📌 while

조건이 참이면 body 부분이 반복해서 실행된다

let i = 3;
while (i > 0) {
  console.log(`while: ${i}`);
  i--;
}

📌 do while

body 부분이 한 번 실행되고, 조건문이 참이면 계속 body가 실행된다

let i = 3; 
do {
  console.log(`do while: ${i}`);
  i--;
} while (i > 0); 

📌 for

for (시작문; 조건문; 단계)

• for문 안에서 변수 선언 가능
• 중첩문 가능

for (i = 3; i > 0; i--) {
  console.log(`for: ${i}`);
}

for (let i = 3; i > 0; i = i - 2) {
  // inline variable declaration
  console.log(`inline variable for: ${i}`);
}

// nested loops
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    console.log(`i: ${i}, j:${j}`);
  }
}

3. 함수

• 함수는 프로그램의 기본적인 building block이다
• subprogram의 역할을 하고 여러 번 사용할 수 있다
• task를 하거나 값을 계산한다

📌 함수 선언 (function declaration)

function name(param1, param2) {
    body...
    return; 
}

• one function === one thing
  (하나의 함수는 하나의 일만 하도록 만든다)
• 동사 형태로 이름을 지어야 함
  (ex. doSomething, sayHello)
• 나눌 수 있지 않을까 고민해보기
  (ex. createCardAndPoint → createCard, createPoint)
• JS에서 함수는 하나의 object

function printHello() {
  console.log('Hello');
}
printHello();     //Hello

//function with a parameter
function log(message) {
  console.log(message);
}
log('Hello@');   //Hello@
log(1234);       //1234

📌 Parameters

• primitive : passed by value (값 전달)
• object : passed by reference (참조 전달)

function changeName(obj) {
  obj.name = 'coder';   
  //ellie가 가르키고 있는 곳의 name 
}
const ellie = { name: 'ellie' };

changeName(ellie);
console.log(ellie);     //{name: "coder"}

💡 Default Parameters (added in ES6)

값이 전달되지 않았거나 undefined가 전달된 경우 변수를 defult parameter로 초기화할 수 있다

function showMessage(message, from = 'unknown') {
  console.log(`${message} by ${from}`);   
}
showMessage('Hi!');   
//Hi! by unknown 

위의 예시에서 from 매개변수가 전달되지 않아서 from의 default parameter인 unknown이 출력된다

💡 Rest Parameters (added in ES6)

... → rest parameters
배열의 형태로 전달된다

function printAll(...args) {
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
}
printAll('suah', 'kang', 'awesome');

위의 예시에서 3개의 매개변수느 'suah', 'kang', 'awesome'이 배열로 함수에 전달된다

//배열은 이렇게 출력해도 좋음   
for (const arg of args) {
    console.log(arg);
  }

  args.forEach((arg) => console.log(arg));

args라는 배열에 있는 모든 원소 arg에 대해 하나씩 console로 출력한다

📌 Local Scope

밖에서는 안을 보거나 안에 접근할 수 없지만 안에서만 밖을 볼 수 있다

let globalMessage = 'global';   // global variable

function printMessage() {
  let message = 'hello';
  console.log(message);    // local variable 
  console.log(globalMessage);   
  //안에서는 global 보고 쓸 수 있음 

  function printAnother() {
    console.log(message);   
    //자식은 부모의 메시지 확인할 수 있음 
    let childMessage = 'hello';
  }
  // console.log(childMessage); //error
}
// console.log(message); //error
printMessage();

• global : 전역
  (block 내에서는 전역 변수 쓸 수 있음)
• local : 지역
  (지역 변수이어도 같은 block내에 child가 있다면 그 child는 부모의 지역 변수 사용할 수 있음)

📌 Return

function sum(a, b) {
  return a + b;
}
const result = sum(1, 2);   // 3
console.log(`sum: ${sum(1, 2)}`);

위의 sum() 함수는 a+b의 값을 return한다
return type이 명시되지 않은 함수는 default로 undefined를 리턴한다

📌 Early return, Early exit

블록 안에서 logic을 많이 작성하면 가독성이 떨어지기 때문에 조건에 맞지 않은 경우 빨리 exit하는 것이 효율적이다

// bad
function upgradeUser(user) {
  if (user.point > 10) {
    // long upgrade logic...
  }
}

// good
function upgradeUser(user) {
  if (user.point <= 10) {   
    return;  
  }
  // long upgrade logic...
}

4. 함수 표현식 (function expression)

First-class function : 함수는 다른 변수들과 동일하게 취급된다

• 변수에 값으로 assign 될 수 있음
• 다른 함수들에 매개변수로 전달될 수 있음
• 다른 함수들에 의해 return 될 수 있음

📌 기본적인 표현식

• 함수는 정의되기 전에 호출될 수 있다 (hoisting)
• 함수 표현식은 함수가 실행될 때 생성된다
  (그래서 정의되기 전에 호출해서 사용할 수 있는것)

// anonymous function 
const print = function () {
  console.log('print');
};
print();        // 함수 호출하듯이 변수 호출
const printAgain = print;
printAgain();   // 함수 호출하듯이 변수 호출

anonymous function : 이름없는 함수. 필요한 부분만 작성해서 변수에 할당

// named function 
const print = function print() {
  console.log('print');
};

📌 Callback function

function randomQuiz(answer, printYes, printNo) {   
  if (answer === 'love you') {
    printYes();   //callback 함수 
  } else {
    printNo();   //callback 함수
  }
};

//anonymous funtion 
const printYes = function () {
  console.log('yes!');
};

//named function 
const printNo = function print() {
  console.log('no!');
};

randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

Callback Funtion : 나중에 호출되는 함수. callback함수가 다른 함수에 parameter로 전달되고 해당 함수 내에서 실행된다.

📌 Arrow function

//일반 함수 
const simplePrint = function(){
    console.log('simple print!');
}

//arrow function 
const simplePrint = () => console.log('simplePrint!');

const add = (a, b) => a + b;

항상 anonymous. 함수를 간단하게 표현할 수 있다