Today's Review

1. Variables
2. Conditional Statements
3. Functions

1. Variables

var, let, const 변수의 차이점

var, let, const은 모두 변수이다.
변수는 컴퓨터 내에서 정보(값)를 담는 상자같은 것이다.
변수는 이름으로서 데이터를 설명하기 때문에 사람들은 더욱 명료하게 프로그램을 이해할 수 있다.

변수로 할 수 있는 일은 다음과 같다.

1. 설명하는 이름 붙이기
2. 변수 안에 새로운 정보를 담거나, 기존의 정보 변경하기
3. 변수 안의 정보를 참조하기(===이용하기)

var

2015년에 업데이트된 자바스크립트(ES6)가 출시 되기 전, 변수 생성 및 선언은 오직 var로만 가능했다.
ES6 출시 때 변수를 생성하는 두 가지 기능이 더 추가되었는데, 그게 let과 const이다.

var 변수는 아주 유연한 성격을 가지고 있다. 그래서 같은 이름의 변수를 한 번 더 선언하면, 후자의 값으로 변수가 변경된다.

var myDog = '여울'
console.log(myDog) // Output: '여울'

var myDog = '가을'
console.log(myDog) // Output: '가을'

변수 재선언이 가능하다.
변수 재할당이 가능하다.
호이스팅이 가능하다.

let

let은 var와 다르게, 같은 이름의 변수를 다른 값으로 재선언하면 SyntaxError가 뜬다.

let myDog = '여울'
console.log(myDog) // Output: '여울'

var myDog = '가을'
console.log(myDog) // Output: SyntaxError: ...

변수 재선언이 불가능하다.
변수 재할당이 가능하다.
호이스팅이 불가능하다.

const

const는 constant의 축약어로 변수 재할당이 불가능하다.
따라서 처음 변수를 선언할 때, 필수적으로 값을 포함하고 있어야 한다.

재할당이 필요한 변수가 필요할 때는 let, 재할당이 필요하지 않을 때는 const를 사용한다.

변수 재선언이 불가능하다.
변수 재할당이 불가능하다.
호이스팅이 불가능하다.

따라서 const를 주로 사용하되, 변수 재할당이 필요한 경우에 한하여 let을 사용하는 것이 좋다.

Mathematical Assignment Operators

사칙연산

let w = 4;
w = w + 1; // w는 1씩 증가한다. 이는 w += 1; 와 동일하다. 

console.log(w); // Output: 5

let x = 20;
x -= 5; // Can be written as x = x - 5
console.log(x); // Output: 15

let y = 50;
y *= 2; // Can be written as y = y * 2
console.log(y); // Output: 100

let z = 8;
z /= 2; // Can be written as z = z / 2
console.log(z); // Output: 4

typeof operator

아래의 코드를 통해 변수 값의 타입을 알 수 있다.

const unknown1 = 'foo';
console.log(typeof unknown1); // Output: string

const unknown2 = 10;
console.log(typeof unknown2); // Output: number

const unknown3 = true; 
console.log(typeof unknown3); // Output: boolean

참고 1
변수 이름은 키워드와 같으면 안된다. 이 사이트에서 키워드 종류를 확인할 수 있다.

참고 2
var 선언문과 관련한 정보는 이 사이트에서 볼 수 있다.

2. Conditional Statements

if ... else if ... else 선언문과 관련한 내용이다.

1. if가 true일 경우, if는 동작하고 이하 코드는 무시된다.
2. if가 false일 경우, if는 무시되고 다음 코드(else if 혹은 else)로 넘어간다.
3. else if가 true일 경우, else if는 동작하고 이하 코드는 무시된다.
4. else if가 false일 경우, else if는 무시되고 else가 동작한다.

Comparison Operators

• Less than: <
• Greater than: >
• Less than or equal to: <=
• Greater than or equal to: >=
• Is equal to: ===
• Is not equal to: !==

Logical Operators

• the and operator (&&)
  : 두 개 모두 True여야 한다.
• the or operator (||)
  : 둘 중 하나가 True여야 한다.
• the not operator, otherwise known as the bang operator (!)
  : True는 False로서, False는 True로서 작용한다.

Truthy and Falsy

Boolean이 아닌 String이나 Number 데이터 타입의 경우, 참과 거짓을 정확하게 구분하기는 까다롭다.
따라서, 이런 경우 변수 값이 다음과 같으면 False라고 처리한다.

• 0
• Empty strings like "" or ''
• null which represent when there is no value at all
• undefined which represent when a declared variable lacks a value
• NaN, or Not a Number

The switch statement

case가 여러개인 경우에 The switch statement를 사용한다. (else if를 계속 사용하면 너무 피곤하니까.)

let groceryItem = 'papaya';

switch (groceryItem) {
  case 'tomato':
    console.log('Tomatoes are $0.49');
    break;
  case 'lime':
    console.log('Limes are $1.49');
    break;
  case 'papaya':
    console.log('Papayas are $1.29');
    break;
  default:
    console.log('Invalid item');
    break;
}

// Prints 'Papayas are $1.29'

3. Functions

함수 생성

function sayThanks() {
  console.log('Thank you for your purchase! We appreciate your business.')
}

함수 요청

sayThanks();

Parameters and Arguments

다음 예에서 첫째 줄의 width, height는 Parameters이다.
둘째 줄에서 width * height가 함수 속에서 변수처럼 취급된다. (그러나 여전히 parameters이다.)

function calculateArea(width, height) {
    console.log(width * height) ;
}

아래의 rectWidth, rectHeight은 (값으로서의)Arguments이다.

const rectWidth = 10;
const rectHeight = 6;

calculateArea(rectWidth, rectHeight);

Default Parameters

ES6 이후부터 Default Parameters를 사용할 수 있게 되었다.

아래의 예에서 stranger는 디폴트 값이다.
그러나 함수를 불러낼 때 다른 단어를 입력한다면, 그에 맞추어 console.log가 출력된다.

function greeting (name = 'stranger') {
  console.log(`Hello, ${name}!`)
}

greeting('Nick') // Output: Hello, Nick!
greeting() // Output: Hello, stranger!

Return

return 키워드는 함수가 아웃풋을 내주게 하기 때문에 강력하다.

function monitorCount(rows, columns) {
  return rows * columns;
};

const numOfMonitors = monitorCount(5,4);

console.log(numOfMonitors)

return을 통해서는 다음과 같이 함수를 쌓아 더 복잡한 계산을 할 수 있다.

function multiplyByNineFifths(number) {
  return number * (9/5);
};

function getFahrenheit(celsius) {
  return multiplyByNineFifths(celsius) + 32;
};

getFahrenheit(15); // Returns 59

Function Expressions

함수를 통해서 다음과 같이 일상생활에 필요한 (일종의) 프로그램을 만들 수 있다.
다음 프로그램은 매주 수요일마다 물을 줘야 하는 식물을 위해 요일을 확인해주는 프로그램이다.

const plantNeedsWater = function(day){
  if(day === 'Wednesday'){
    return true;
  } else {
    return false;
  }
};

console.log(plantNeedsWater('Tuesday'))

Arrow Functions

나는 기존의 함수보다 이 Arrow Function이 더 간편하고 직관적으로 느껴져서 자주 이용한다.

(함수이름) => 로 쓴다.

위의 plantNeedsWater 함수를 아래와 같이 표현할 수 있다.

const plantNeedsWater = (day) => {
  if (day === 'Wednesday') {
    return true;
  } else {
    return false;
  }
};

Concise Body Arrow Functions

위의 Arrow Functions 함수를 더 간결하게 쓸 수도 있다.
소괄호, 중괄호, return 키워드를 없애고 => 만 사용하는 것이다.

따라서, plantNeedsWater 함수를 아래처럼 작성할 수도 있다.

const plantNeedsWater = day => day === 'Wednesday' ? true : false;
;

참고 1
호이스팅에 대해서는 이 사이트에서 자세히 알 수 있다.