Week 2 - JavaScript 함수 & 변수, 호이스팅에 대해

1. 함수가 필요한 이유

함수는 프로그래밍에서의 가장 중요한 뼈대 역할. 웹 브라우저에서는 함수를 사용해서 명령을 내림. 자바스크립트에서는 여러가지 동작이 연결된다. 이렇게 동작해야 할 목적대로 묶은 명령을 함수라고 한다. 함수를 사용하면 각 명령의 시작과 끝을 명확하게 구분할 수 있고, 묶은 기능에 이름을 붙여서 어디서든 같은 이름으로 명령을 실행할 수 있습니다.

---

2. 함수의 정의와 호출의 차이점

함수가 어떤 명령을 처리할지 미리 알려 주는 것을 함수를 선언한다 또는 함수를 정의한다고 합니다. 함수를 선언할 때는 함수마다 서로 다른 이름을 붙여 나중에 사용할 때 알아보기 쉽도록 합니다. 함수를 선언할 떄는 다음과 같이 예약어 function을 사용하고, 중괄호 ({}) 안에 실행할 여러 명령을 넣습니다.

function 함수명() {
	명령 
}

하지만 함수를 선언하는 것만으로는 함수가 실행되지 않습니다. 함수를 선언한 후에 따로 실행하는 코드를 작성해야 합니다. 함수를 실행하려면 다음과 같이 미리 선언한 함수명을 써서 사용합니다. 이렇게 선언한 함수를 사용하는 것을 함수를 호출한다 또는 함수를 실행한다고 합니다.

---

3. 자바스크립트 데이터 타입의 종류

1) primitive, single item: number, string, boolean, null, undefined, symbol
• 더 이상 작은 단위로 나누어 질 수 없는 한 가지의 아이템

2) object, box container: array
• single items 여러개를 묶어서 한 박스로 관리

3) function, first-class function
• 변수에 할당이 가능, 함수의 parameter로 전달이 가능
• 함수에서 return type으로 return 가능

number 숫자형
• 정수와 실수로 나누어 구분
• 정수와 실수를 함께 묶어 숫자형이라고 한다

string 문자열
• '' 또는 ""로 묶은 데이터
• '1234', "goodbye world", '!' 모두 문자열

boolean 논리형
• 참이나 거짓으로 표현
• 100 < 10 => false, 100 > 10 => true

undefined & null
• undefined: 자료형이 정의되지 않음
자바스크립트에서는 변수를 선언할 때 자료형을 미리 지정하지 않고 값을 할당할 때 결정한다. 그래서 변수 선언만 하고 값이 할당되지 않은 자료형을 undefined라고 한다. 즉, undefined는 단순히 '변수에 값이 할당되지 않았다'는 의미
• null: 변수에 할당된 값이 유효하지 않음

예시:
let name; //undefined
let name = null; //null
console.log(null == undefined) //true
console.log(null === undefined) //false
**엄격일치연산 (===)은 value뿐만 아니라 type도 같아야 true가 나온다

array 배열
• 하나의 변수에 값을 여러 개 저장
• let spring = '봄';
let summer = '여름';
let fall = '가을';
let winter = '겨울';
이렇게 사용하면 매우 번거롭고 반복적인 코드가 사용 됨

let season = ['봄', '여름', '가을', '겨울'];
한 줄로 요약 가능

---

4. 변수가 필요한 이유

변수란?
가변적인 데이터를 담을 수 있는 대상 혹은 공간

한 함수 안에서만 사용할 수 있는 변수 = 지역변수 / 로컬변수
스크립트 소스 전체에서 사용할 수 있는 변수 = 전역변수 / 글로벌변수

지역변수 / 로컬변수
함수 안에서만 선언하고 함수 안에서만 쓸 수 있는 변수
{}이라는 지역 안에서만 쓸 수 있는 변수

전역변수 / 글로벌변수
{} block 밖에서 선언을 한 어디서든 쓰일 수 있는 변수
스크립트 안에서라면 자유롭게 쓸 수 있는 변수 (적용 범위를 제한하지 않음)

변수가 필요한 이유?
가독성을 높여주고 유지보수에 좋다
복잡한 코드를 변수 안에 저장하고 필요할 때 변수명을 불러서 데이터 값을 수정할 수 있다. 예) 변수가 포함 된 코드 10,000줄을 수정해야 할 때 유용

변수 이름 정하기
• 대소문자 구분 예) myName과 MyName은 다른 변수명
• 변수 이름을 정할 떄, 첫 번쨰 문자는 반드시 글자나 underscore '_', dollar sign '$' 중 하나
• 두 번째 문자부터는 글자, 밑줄, 달러, 숫자 중 자유롭게 사용 가능
• 변수 혹은 함수 이름을 camelCase 방식으로 쓸 것
• snake_case 표현법도 있지만 잘 사용하지 않음

---

5. 변수를 선언하는 방법 & var, let, const에 대해서

✍ 변수란? 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터

✍ 변수를 사용하려면 변수를 구별할 수 있도록 이름을 붙여 주어야 하는데 이것을 ‘변수 선언’이라고 한다. 변수 선언은 값을 저장할 컴퓨터 메모리 공간에 문패를 붙이는 것과 같다.

✍ 변수의 종류: var, let, const가 있다

선언하는 방법

let currentYear;
let birthYear;
let age;

한꺼번에 선언도 가능

let currentYear, birthyear, age;

변수를 선언했으면

• '=' 기호를 사용해서 변수에 값을 저장할 수 있다. 이것을 값 할당이라고 한다
• 값 할당은 변수를 선언한 후에 따로 할 수도 있고, 변수를 선언하면서 동시에 할 수도 있다

//변수를 선언한 후, 값 할당
let gender; // 변수 선언

gender = female; //변수 값 할당

//변수를 선언하면서 동시에 값 할당
let gender = female;

if (true) {
	var varVariable = 'This is true'
}
console.log(varVariable)

//This is True

if (true) {
	let letVariable = 'This is true'
}
console.log(letVariable)

//Uncaught ReferenceError: letVariable is not defined at script.js:11

if (true) {
	let letVariable = 'This is true'
	console.log(letVariable)
}

//This is true

if (true) {
	const letVariable = 'This is true'
	console.log(letVariable)
}

//This is true

if (true) {
	var varVariable = 'This is true'
}
var varVariable = 'This is false'

console.log(varVariable)

//This is false

👉 Var
• JavaScript ES6 부터는 var를 보완한 let, const가 등장한다
• Var는 더 이상 사용하지 않을 것을 권장

• Var는 function scoped 변수

👉 Var hoisting

var hoisting이란?
어디에 선언했는지 상관없이 항상 제일 위로 선언을 끌어올리는 것

var a = "First";
var b = "Second";
var c = "Third";

console.log(a + " " + b + " " + c);

//First Second Third

console.log(d);

var d;

// undefined
// 의미: a variable has been declared but there's no value assigned to it

// 원래라면:
// ReferenceError: 

d = "Fourth";

console.log(d);

var d;

// Fourth
// 매우 잘 출력됨

---

function example() {
	var a = 10;
	return a;
}

console.log(example());

// 10 ("NORMAL")

console.log(example());

function example() {
	var a = 10;
	return a;
}

// 10 (?)

👉 var를 사용하면 안되는 이유

1. 대부분의 프로그래밍 언어는 변수를 선언 후, 값을 할당하는데, Var는 선언하기도 전에 값을 할당하고 값을 할당 하기 전에 출력도 가능하다.
2. var는 block scope을 철저히 무시한다. 변수를 block {} 안에 선언했음에도 불구하고 block{} 밖에서 console.log를 실행했을 시, 작동한다.
3. overwrite이 가능하기 때문에 의도하지 않게 자신 또는 다른 사람이 변수를 바꿀 수 있다.

var fruit = 'mango'
console.log(fruit) //mango

var fruit = 'coconut'
console.log(fruit) //coconut

위와 같이, 변수를 한 번 더 선언해도 에러 없이 잘 출력된다.

👉 let
• let은 변수 재선언이 불가하다

• let은 block scoped의 변수

let fruit = 'mango'
console.log(fruit) //mango

let fruit = 'coconut'
console.log(fruit)
//SyntaxError: Identifier 'fruit' has already been declared

fruit이라는 변수는 이미 '선언'되었다고 에러가 뜬다.
그럼 재할당은 가능할까?

let fruit = 'mango'
console.log(fruit) //mango

fruit = 'peach'
console.log(fruit) //peach

peach라고 잘 출력된다

let은 변수 '재선언'은 불가하지만 '재할당'은 가능하다
같은 방법으로 다음 변수인 const를 보자

👉 const
• 값을 한번 지정하면 바뀌지 않는 데이터 = 상수

• const는 변수 '재선언', '재할당' 모두 불가능하다

• let은 block scoped의 변수

const fruit = 'mango'
console.log(fruit) // mango

const fruit = 'peach'
console.log(fruit)
//SyntaxError: Identifier 'fruit' has already been declared

fruit = 'coconut'
console.log(fruit)
//TypeError: Assignment to constant variable

재선언을 하니 이미 'fruit'은 '선언'됐다고 나오고 재할당을 하니 상수 변수에 할당하는 것의 에러가 뜬다

let과 const의 차이점은 'mutability(변하기 쉬움)'에 있다.
let은 재할당이 가능하기 때문에 mutable 변수이고 const는 어떤 변화도 적용되지 않기에 immutable 변수이다.

const의 immutable한 특성의 장점:
1) security: 한 번 작성한 코드는 바꿀수 없기에 해커들이 조작 불가
2) thread safety: threads가 동시에 값 변경 할 수 없음
3) reduce human errors: 나중에 다른 개발자가 실수로라도 값을 변경 할 수 없어 에러를 줄일 수 있다

7. number와 string의 메서드 각각 3개와 사용 방법

8. 조건문이 필요한 이유

출처: HTML+CSS+자바스크립트 웹 표준의 정석, 드림코딩, 위코드 replit