🚀 What I Will Learn

1. 변수를 선언하는 방법과 차이점에 대해 설명할 수 있다.
2. 다양한 자바스크립트 데이터 타입의 종류와 활용법에 대해 익힌다.
3. 함수의 정의할 수 있고 정의와 호출의 차이점을 이해할 수 있다.
4. boolean 타입과 함께 조건문을 사용할 수 있다.

1. 변수를 선언하는 방법과 차이점에 대해 설명할 수 있다.

🍋변수가 필요한 이유

변수를 사용하면 코드의 재활용성과 가독성을 높여주고, 중복을 제거하여 유지보수를 쉽게 해준다는 장점이 있습니다.

🍋변수 선언 방법

변수는 변수명 앞에 let 또는 const를 붙여서 사용합니다.

• let은 변할 수 있는 값을 선언할 때 사용합니다.

  let age = 28;

• const는 절대로 바뀌지 않는 상수입니다. 바뀌지 않는 값을 선언할 때 사용합니다.

  const BIRTH_DAY = '1995-06-08';

• var은 초기버전에서 사용하던 선언 방식 입니다. ES6 이전에 나온 방식으로 여러 문제점들이 있어서 최근에는 사용하지않습니다.

2. 다양한 자바스크립트 데이터 타입의 종류와 활용법에 대해 익힌다.

🍋문자열(String)

const name1 = "Lemon"
const name2 = 'Lemon**'
const name3 = `Lemon`

‘’(작은 따옴표) / ””(큰 따옴표) 차이는 없다. 그러나 작은 따옴표를 사용할 일이 있으면 큰 따옴표를 쓰는게 좋습니다.

const helloMessage = "Hello! I'm Lemon";

작은 따옴표만 사용하고 싶다면 문자로 나타낼 ‘(작은따옴표)앞에 백슬래시를 넣으면 특수문자로 인식하게 만들 수 있습니다.

const helloMessage = 'Hello! I\'m Lemon';

변수를 사용할 문자열에는 ``(백틱)을 사용한다. ``(백틱)안에서 변수를 사용할 때는 ${ }안에 변수명을 넣으면 됩니다.

const name = "Lemon";
const message3 = `My name is${name}`;
console.log(message3) // "My name is Lemon"

표현식도 가능합니다.
자바스크립트에서 표현식이란 값을 반환하는 식 또는 코드입니다.

const message4 = `나는 ${20+8}살 입니다.`;
console.log(message4) // "나는 28살 입니다."

⚠️ 실수로 일반 따옴표에 변수를 넣으면 ${}까지 그대로 출력되니 주의해야 합니다.

const name = "Lemon";
const message = 'My name is ${name}';
console.log(message); // "My name is ${name}"

두 문자열을 + 연산자로 합칠 수 있습니다.

console.log("Hello, " + "World") // Hello, World

🍋숫자형(Number)

const age = 28;
const PI = 3.14;

사칙연산이 가능합니다.

console.log(1 + 2); // 더하기
console.log(2 - 1); // 뻬기 
console.log(3 * 2); // * 곱하기
console.log(4 / 2); // / 나누기
console.log(5 % 2); // % 나머지 값

0으로 나눈다면 무한대를 얻을 수 있습니다.

const x = 1/0; 
console.log(x); // Infinity

숫자가 아닌 타입으로 사직연산을 한다 NaN(Not a Number)가 나타납니다.

const name = "Lemon"
console.log(name/2) // NaN(Not a Number)

🍋Boolean(true & false)

표현이 참인지 거짓인지를 알리는 것입니다.

console.log("code kim" === "CODE KIM") // false 

위의 예제는 자바스크립트는 대소문자를 구분하기 때문에 false입니다.

const name = "Lemon";
const age = 28;

console.log(name === "Lemon"); // true
console.log(age > 30); // false

🍋unll 과 undefined

undefined는 선언은 됐지만 아직 value가 할당되지 않은 경우를 의미합니다.

null은 '빈 값(blank)'을 의미하는데 사용자가 준 value입니다.

let age; // 할당된 값이 없다.
console.log(age); //undefined

let user = null; // 존재하지않는다
console.log(user); // null

그래서 undefined와 다르게 자바스크립트가 자동적으로 null 이란 값을 줄 수는 없습니다.

null과 undefined가 비슷한 것 같지만 둘은 엄격하게는 같지 않습니다.

let name;            // undefined
let name = null;     // null

console.log(null == undefined);   // true
console.log(null === undefined);  // false

🍋typeof 연산자

변수의 자료형이 어떤 타입인지 알아볼 수 있습니다.
다른 개발자가 작성한 변수의 타입을 알아야할 경우나 API 통신등을 통해 받아온 데이터를 타입에 따라 다른 방식으로 처리해야할 때 많이 사용합니다.

const name = "Lemon";

console.log(typeof 3); // number
console.log(typeof name); // string
console.log(typeof true); // boolean
console.log(typeof "Good"); // string
console.log(typeof null); // object
console.log(typeof undefined); // undefined

null의 type이 object가 나왔습니다. null은 '값이 없음(blank)'을 의미하는 '할당된' value이기 때문입니다.

3. 함수의 정의할 수 있고 정의와 호출의 차이점을 이해할 수 있다.

🍋선언 (정의)

function sayHello() {
	console.log('Hello! code Kim! 😊')
}

1. function 함수를 선언할 것임을 알립니다.
2. sayHello 함수의 이름을 정합니다.
3. 함수명 뒤에 ( )괄호 안에 인수(input)를 받을 것인지 안받을 것인지 정합니다. 없을수도있고 한개일수도있고 두개 이상일 수도 있습니다. 여러개일 경우 , (쉼표)로 구분합니다.
   (input 은 인자(parameter) 또는 매개변수라고도 합니다)
   
4. { } 중괄호 안에 실행할 함수식을 넣습니다.

함수안에서도 변수를 선언하고 할당하는게 가능합니다.

function sayHello() {
	let friend = "code kim" // 변수 선언
	console.log('Hello! ' + friend) // 변수 할당
}

🍋실행 (호출)

함수를 정의했으면 이제 호출을 해야합니다.
함수명 뒤에 () 를 붙여서 호출할 수 있습니다.
🌟함수를 정의만하고 호출하지 않으면 아무 일도 일어나지 않습니다.

sayHello();

🍋input(parameter=매개변수=인수=인자)의 사용

sayHello('주영');

매개변수가 필요하다면 호출할 때 괄호안에 값을 넣으면됩니다.

🍋함수가 필요한 이유

서비스를 만들다보면 같거나 비슷한 동작들이 생기기 마련입니다. 예를들어 팝업을 띄운다던지, 결제를 하는 등의 동작입니다. 이럴 경우 하나로 만든다음 재활용해야 중복코드도 줄이고 유지보수도 편해져서 좋을 것입니다. 함수가 이런것을 가능하게 해줍니다.

예를 들어 에러메세지를 보여주는 함수를 만들었다면,

function showError(){
	alert('에러가 발생했습니다. 다시 시도해주세요.')
}

showError();

이걸 100군데에 보여준다고 가정했을 때, showError() 로 호출만 해주면 되니 편리하고, 기획자가 메세지의 내용을 수정해달라고 요청이 들어왔을 때 함수안에 있는 한줄만 수정하면 되니 유지보수가 편리해집니다.

4. boolean 타입과 함께 조건문을 사용할 수 있다.

🍋조건문이 필요한 이유

조건문은 프로그램이 어떤 조건에 따라 참일 때와 거짓일 때 다른 행동을 취해야 할 경우에 사용합니다.

🍋if ... else

1. if(조건)이 참인지 거짓인지를 알려면 비교를 해야하기 때문에 비교연산자를 사용합니다.
2. boolean 타입은 true 와 false를 의미합니다. 비교 후 true 또는 false로 변환 후 판단합니다.

if (1+1 === 2) { // true 
	console.log('1더하기 1은 2입니다.')
}

if(age > 19) {
	// 조건이 true일 경우에만 실행됩니다. 
	console.log('환영합니다');
} else {
	// 조건이 false일 경우에 실행됩니다.
	console.log('돌아가세요');
}