[JS] JS 변수의 특징과 템플릿 리터럴

✔ 원시 타입

Number
String
Boolean
Null
undefined

✔ NaN (Not a Number) - Number type

ex) 1. 작동이 잘 될 거라 생각했는데 알고 보니 0으로 나누려는 걸 몰랐던 경우
2.숫자여야 하는데 알고 보니 단어 같은 텍스트를 입력해서 단어로 연산을 하는 경우
NaN이 나온다.
등등
결국 NaN은 JavaScript에선 숫자 타입이 맞다 다만 숫자가 아니란 뜻일 뿐이다.

✔ JS Basic Syntax

let Name = Value;

🔎 변수의 특징

a와 b를 바꾸어도 c는 바뀌지 않는다. 이유는 본질적으로 연결된 게 아니라 그 순간을 스냅샷으로 찍은 것이라고 생각하면 쉽다.

let a= 5;
let b = 5;
c = a+b;
a = 4;
window.alert(c) // 10

JS에서 변수의 타입은 자유롭게 변경할 수 있다.

let a = 5;
a = false;
a = 24.44

✔ 호이스팅

자바스크립트가 인터프리터 언어라고 해서 아무 준비없이 코드를 바로 실행하는 건 아니다.
컴파일 언어가 컴파일 과정을 거치듯 인터프리터 언어도 인터프리테이션 단계를 거친다.
이 인터프리테이션 과정 중, 변수나 함수 선언을 찾아 메모리에 할당하는 과정이 있는데 이를 변수 & 함수 바인딩이라고 한다.

이렇게 코드가 실행되기 전에 변수나 함수 선언을 미리 할당하는 과정이 있기에
실제로 변수나 함수 선언이 되기 이전에 그 변수나 함수에 접근이 가능한데,

이때 변수와 함수 선언이 코드 가장 위로 끌어올려지는 것 같이 느껴지는 현상을 호이스팅(hoisting)이라고 한다.

🔎 호이스팅의 종류

호이스팅의 종류에는 변수 호이스팅과 함수 호이스팅이 있다.
변수 호이스팅 발생시 변수에 undefined가 할당되고.
함수 호이스팅 발생시 함수 객체가 할당된다.

//변수 호이스팅//
console.log(a) //undefined
var a = 2;

//함수 호이스팅//
console.log(typeof functionDeclaration); //함수 선언문, 결과 : function
console.dir(typeof functionVar); //함수 표현식, 결과 : undefined

console.log(functionDeclaration()); //함수 선언문, 결과 : functionDeclaration
console.log(functionVar()); //함수 표현식, 결과 : type error

//함수 선언문
function functionDeclaration(){
	return "functionDeclaration";
}
//함수 표현식
var functionVar = function(){
	return "functionVar";
}

✔ var vs let vs const

① var 선언은 전역 범위 또는 함수 범위이며, let과 const는 블록 범위이다.

② var 변수는 범위 내에서 업데이트 및 재선언할 수 있다. let 변수는 업데이트할 수 있지만, 재선언은 할 수 없다. const 변수는 업데이트와 재선언 둘 다 불가능하다.

③ 세 가지 모두 최상위로 호이스팅된다. 하지만 var 변수만 undefined(정의되지 않음)으로 초기화되고 let과 const 변수는 초기화되지 않는다.

④ var와 let은 초기화하지 않은 상태에서 선언할 수 있지만, const는 선언 중에 초기화해야한다.

✔ 전위 연산자와 후위 연산자(n++ vs --n)

🔎 전위 (++n)

연산자 ++가 피연산자 n보다 앞에 위치할 때를 전위라 하고 1 증가된 값이 연산결과값이다.

let n = 5;
result = ++n
window.alert(result) // 6
window.alert(n) // 6

🔎 후위 (n++)

반대로 연산자 ++가 피연산자 n보다 뒤에 위치할 때를 후위라 하고 1 증가하기 전 값이 연산결과값이다.

let n = 5;
result = n++
window.alert(result) // 5
window.alert(n) // 6

✔ 카멜케이스 (Camel Case)

단어 연결 시 첫 글자(소문자)를 제외한 각 단어의 첫 글자를 대문자로 표기하는 명명 규칙.
카멜케이스는 주로 변수나 함수의 이름을 지을 때 사용한다.
ex) myVariableName, calculateDiscountAmount

카멜케이스는 여러 단어를 조합하는 경우 읽기 쉽고 명확한 식별자를 만들어 주기 때문에
단어 간 구분이 명확해지고, 식별자의 길이가 길어져도 가독성이 좋아진다.

예를 들어, "calculateDiscountAmount"는 "calculate", "discount", "amount"라는 세 개의 단어로 이루어져 있으며,
각 단어가 어떤 의미를 가지는지 명확히 알 수 있다.
출처: https://ccomccomhan.tistory.com/185 [[꼼꼼한 개발자] 꼼코더:티스토리]

✔ 문자열

"와 '를 사용하여 문자열을 선언한다.

let userName = "하루"
let userName2 = '브리'
let example = "I told her 'go away'" // 안에서 쓰는 경우 '와 "를 섞어 쓰는 것이 가능하다 
//하지만 섞어쓰는 것이 아닌 "나 '만을 이용해 인용구를 표현하는 것은 안 된다.  

🔎 문자열의 index

let firstName = "River"
firstName[2] //v
let lastName = "Phoenix"
firstName + lastName //RiverPhoenix
firstName[0] = r // 불가 문자열을 교체는 할 수 있지만 문자열 중 한 문자만을 교체할 수는 없다.
1+"hi" //"1hi"

🔎 문자열의 method

let firstName = "River"
firstName.toUpperCase() //RIVER
'    omg  '.trim(); // "omg" trim = 문자열 앞뒤 공백을 없애줌
let tvShow = 'catdog'
tvShow.indexOf('cat') // 0
tvShow.indexOf('dog') // 3

JS에서의 String 메서드 문서
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

✔ template literal(템플릿 리터럴)

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자인 `를 사용한다.

`I counted ${3 + 4} sheep` //"I counted 7 sheep

const qty = '5'
const product = 'pencil'
const price = 2.25

`You bought ${qty} ${product}. Total is: $${price * qty}`

✔ NULL과 Undefined

let x;
//undefined
'hello'[99]
//undefined

null은 일부로 값을 지정하지 않는 것이고, undefined는 아무것도 정의된 것이 없다는 개념이다.

✔ JS의 true와 false

모든 값은 true나 false 값을 가진다.
false 값을 가지는 것은 false, 0, ""(empty string), null, undefined, NaN이다.
그 외에는 다 true 값을 가진다.