[JS] 함수선언

querySelector

엘리먼트를 선택하는 방법에는 여러가지가 있다.

뭐.. document.getElementById 도 있고, document.getElementsByClassName 등등등 많은 방법이 있지만

그냥 하나만 쓰라하면 쿼리셀렉터를 사용하는 방법이 있다

document.getElementById 를 쓰면 ID만 선택하고,

document.getElementsByClassName 를 쓰면 classname을 선택하지만,

querySelector 를 쓰면 id든 class든 그냥 쓸 수 있다. 대신 아이디(#) 인지 클래스(.) 인지는 명시해주어야 함

//html
<input type="text" id="today">
<input type="text" class="todayClass">


//js
document.querySelector('#today')
document.querySelector('.todayClass')

new Date()

타이머 만들기

//html
<input type="text" id="year">
<input type="text" id="month">
<input type="text" id="day">


//js
const dateFormMaker = () => {
	const inputYear = document.querySelector('#year');
 	const inputMonth = document.querySelector('#month');
 	const inputDay = document.querySelector('#day');
  
  const dateFormat = `${inputYear}-${inputMonth}-${inputDay}`;
  return dateFormat;
}

const counterMaker = () => {
  const targetDateInput = dateFormMaker();
	const nowDate = new Date();
	const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0);
	const remaining = (targetDate - nowDate) / 1000;
	
	const remainingDate = Math.floor(remaining / 3600 / 24);
	const remainingHour = Math.floor(remaining / 3600) % 24;
	const remainingMin = Math.floor(remaining / 60) % 60;
	const remainingSec = Math.floor(remaining) % 60;
}

함수표현식 : 변수에 함수를 할당해주는 형식

const sum = function(){
	let result = 10 + 10;
}

함수선언문 : 선언키워드가 동반되지 않음. 호이스팅의 영향 받음

호이스팅이란 => https://soraji.github.io/js/2021/01/06/es6/ 여기 예전에 적어놓음

function sum(){
	let result = 10 + 10;
}

선언문의 경우 호이스팅이 되므로 예측하기 어려울 수 있음.

화살표함수

const sum = () => {
	let result = 10 + 10;
}

비교연산자

=== : 동일한지 비교

논리연산자

&& : AND 연산자 => 양쪽에 위치한 조건을 모두 만족하는 경우 true

|| : OR 연산자 => 양쪽에 위치한 조건 중, 하나라도 만족하는 경우 true

자바스크립트의 데이터 타입

원시타입(primitive type)
- 원시타입에는 String, Number, Boolean, Bigint, undefined, Symbol, Null 이 존재한다
- 데이터가 변하지 않는 불변성을 지닌다
```
let box = 'abc';
box = 'def';
```
  헷갈리니까 주의☝🏻
  데이터가 변하지 않는다는 의미는 뭘까?
  분명 box라는 변수를 선언해서 abc라는 데이터를 할당해주고 (= let box = 'abc';)
  다시 재할당해서 box안의 내용이 def 가 되었는데 (= box = 'def';)
  abc가 def가 되었으니 데이터가 변한게 분명한데, 데이터가 변하지 않았다고 한다. (（ •́ㅿ•̀ ）뭔말이야)
  
  이 말은,
  변수의 개념을 잘 생각해야 이해가 가는데,
  처음 box라는 변수를 선언해줄때, 변수는 작은영역(a.k.a 메모리)을 부여받게된다.
  예를 들어보자.
  (실제로 변수는 박스라는 개념에 많이 비유하니까)
  ‘1번박스’라고 포장된 택배박스가 있다고 치자.
  내가 let box = 'abc' 라고 선언하는 순간 ‘1번박스’ 안에 abc라는 내용물이 저장된다.
  그런데 만약 재할당을 하고 싶어서 box = 'def'라고 재할당을 한다면
  abc가 들어있는 ‘1번박스’의 내용을 지고 def를 새로 넣는게 아니라,
  1번박스(=주소값)는 그대로 두고, 2번박스(=주소값)를 새로 가지고 와서 새로운 내용물(=def)을 담아주는 것이다.
  만약 누군가가 ‘box에 뭐가 들어있어?’ 라고 묻는다면
  재할당을 하기전이라면 1번박스를 가리키면서 ‘abc가 들어있어’ 라고 할것이고,
  재할당을 하고 난 이후라면 2번박스를 가리키면서 ‘def가 들어있어’ 라고 설명할거다.
  1번박스는 사라지지도 않고, abc도 그대로 그 안에 있으니 데이터의 불변성이 지켜지게 되는것이다.
참조타입(reference type)
- 원시타입을 제외한 모든것이 참조타입이다.
- 참조타입은 원시타입에서 한 단계 더 들어간다고 생각하면 된다 (그만큼 더 복잡쓰 ( ༎ຶŎ༎ຶ ))
```
let arr = [1,2,3];
console.log(arr === [1,2,3])	//false
```
  위 코드를 보게 되면 ◴_◶????? 하겠지만(내가 그랬음)
  간단하게 설명하자면 비교연산자 ===를 사용했을때는 엄격한비교를 사용하게 되므로 주소값도 비교를 하게 된다.
  그런데 console.log(arr === [1,2,3]) 코드를 실행하자마자 새로운 배열이 생성되면서 새로운 주소값이 생성되게되고
  그걸 엄격한 비교를 통해 비교하게 되니 당연히 주소값이 달라 ‘야 니들 주소값 다름’ 이라면서 false를 내뱉는것.

이러한 기가막히고 코가막힌 차이점으로 값을 복사할때 차이가 생기는데……ヘ（。□°）ヘ

(어후 진짜 js는 처음부터 단단하게 정립해야지…)

원시타입에서의 복사는 원본값에 영향을 주지 않는다 (넘나리 당연한 개념)

let origin = 'hi';
let copy = origin;
origin = 'bye';

console.log(copy);	//'hi'

근데 참조타입에서의 값의 복사는 아주 웃긴다 그냥

let origin = [1,2,3];
let copy = origin;
origin.pop();

console.log(copy);		////[1,2]
console.log(origin);	//[1,2]

아니 나는 복사본을 수정했는데 왜 원본이 바껴? 웃겨증말 (이거 예전에 알고리즘에서 본적있다. 그때 seperator가지고 문제 풀었음)

참조타입의 값 복사는 아까 말했던것처럼 한단계 더 들어가서 하기때문에

원본의 값을 참조해서 참조타입이라고 부르는데,

원본값의 주소값을 참조하는 데이터의 주소값을 원본과 복사본이 똑같이 공유를 하기 떄문에 복사를 한다고 해도

원본에 영향을 미치게된다

(더 설명할수있지만 이쯤에서 마무리하는걸로…)