JAVASCRIPT [기본 ~ 심화 문법]

변수(변하는 수)와 상수(변하지 않는 수)

• let (변수) - 값을 변할 수 있음

let age = 27; age는 변수 선언, 27은 변수의 값을 초기화
age = 30; 
//변수는 언제든 선언하여 값을 재할당할 수 있기에, 초기화
하지 않고 선언하여도 상관없습니다.
let age; // undefined로 값이 초기화된 상태
age = 30;

let age = 25; // 중복된 이름으로 사용 불가능! [오류]

• const (상수) - 초기화하고 값을 변화 시킬 수 없음

const birth; // 상수는 초기화 없이 작성할 수 없음 [오류]

 💡 [변수 명명 규칙(= 네이밍 규칙) ]
$ , _ 제외한 기호는 사용 불가능 (위치 상관없음)
ex) let $_name (가능)
변수의 이름은 숫자로 시작할 수 없음 (위치 중요!)
ex) let name1 ( 가능) / let 2name (불가능)
변수명에는 예약어를 사용할 수 없음
예약어란? 자바스크립트에서 이미 사용하는 이름
ex) let,const,if,while,do~while,string 등등

[원시 타입]

• number 타입 : 숫자 전부를 지원(실수,정수,음수…)

사칙 연산 : +(덧셈) , -(뺄셈) , (곱셈) , /(나눗셈) , % (나머지 연산)
Infinity (양의 무한대) , -Infinity(음의 무한대), NaN(정수값이 아님)

let inf = Infinity;
let minf = -Infinity;
let nan = NaN;

console.log(1 *"hello") // NaN (Not a number)

• String 타입 : 문자열 값 - 반드시 ‘ ’(작은따옴표) or “ “(큰 따옴표) 내부에 작성해야 함

let myName = "전용학
let myLocation = "목동
let introduce = myName + myLocation
// 문자열에서 + 기호는 문자열을 연결하는 역할을 함!

let introduceText = `${myName}은 ${myLocation}에 거주`
// 전용학은 목동에 거주

• 템플릿 리터럴 : (백틱) 내부에 ${ 함수(객체)명 } 으로 사용
• Boolean 타입 : true or false 값을 저장하는 타입
• Null 타입 : 아무것도 없다! / (사용자가 의도적으로 값을 설정하지 않는 타입)
• undefined 타입 : undefined 값만 존재 ( 자바스크립트 엔진이 암묵적으로 설정하는 타입)

let none;
console.log(none) // undefined 으로 출력됨

---

형 변환 - 어떤 값의 타입을 다른 타입으로 변경하는 것

묵시적 형변환 - string 타입과 number 타입일 때, string 타입이 1개라도 존재하면 암묵적으로 string 타입으로 변환 가능합니다.

let num = 10;
let str = "20";

const result = num + str;
console.log(result)

명시적 형변환 - 프로그래머 내장함수(임의로 변경) 등을 이용해서 직접 형 변환을 명시

• 문자열 → 숫자 변경할때,/ Number() 라는 내장함수로 변경

let str1 = "10";
let strToNum1 = Number(str1); // 내장함수로 인해서 10을 문자 타입에서 숫자 타입으로 변경
console.log(10 + strToNum1); // 20 이 출력됨

 
단, 문자열 “ “ 내부에 숫자 이외에 다른 타입 ex) 10개 이렇게 나와있으면 다른 방법을 사용

let str2 = "10개" // 숫자 10 이외의 문자인 개가 같이 들어있는 상황
let strToNum2 = parseInt(str2);
console.log(strToNum2);
이때, parseInt를 쓸때에는 as10 이렇게 문자가 앞에 오는 게 아닌, 10개 이렇게 숫자가 앞에
있어야 변환이 잘 된다는 점을 알아두기!

• 숫자 → 문자열

let num1 = 20;
let numToStr1 = String(num1);
console.log(numToStr1 + "입니다."); // 20입니다. 라고 출력됨

---

연산자

• 대입 연산자 = : 오른쪽의 값을 왼쪽의 변수 및 상수에 저장

let var = 1;

• 산술 연산자 (+,-,*,/,%) : 산술 연산을 수행 (우선순위는 수학의 우선순위와 동일하게 적용됨!)

let num = 3 + 2;

이때, 우선순위가 낮은 연산자를 먼저 계산할려고 할 때에는, 소괄호 ( ) 로 묶어서 계산

• 복합 대입 연산자 : 산술 연산자 + 대입연산자 동시에 존재

let num = 10;
num += 20; // num = num + 20 의미와 동일

+= , -= , = , /= , %= : 이렇게 모든 산술 연산자 기호가 가능함

• 증감 연산자 : 1씩 산술 연산을 할 때 사용

let num = 10
num++;
console.log(num); // 11로 출력됨

 

📍위치가 중요, ++num 이면 11로 증가시키고 출력 or num++은 10을 출력하고 11로 증가시킴
따라서, 콘솔에는 ++num(전위 연산)은 11로 num++(후위 연산)은 10으로 각각 출력

• 논리 연산자 : ||(or) , &&(and) , !(부정)
• || - 둘 중 하나의 값이 참이면 참, && : 두 개의 값 모두 참이여야 참 , ! - 값을 반대로 해석

let or = true || false;
let and = true && false;
let not = !true;

console.log(or,and,not); // true, false, false

• 비교 연산자

== : 을 사용하면 값은 비교하지만 값의 자료형까지 같은 지는 비교하지 않음 (동등 비교연산자)
=== : 을 사용하면 값과 값의 자료형까지 동일하게 비교함
따라서, === 을 이용하여 비교하는 것을 권장함!
! == : (비동등 비교 연산자) / 값의 반대값을 의미
>= 또는 <= 로 비교할 수 있음! (이상과 이하)

let comp1 = 1 === 2 ;
let comp2 = 1 !== 2 ;
console.log(comp1, comp2) false, true 출력됨!

let comp3 = 2 > 1;
let comp4 = 2 < 1;
console.log(comp3, comp4); true, false가 출력됨

let comp5 = 2 >= 2;
let comp6 = 2 <= 2;
console.log(comp5, comp6); true, true가 출력됨

[특수 연산자]

• null 병합 연산자 ( ?? ) - 존재하는 값을 추려내는 기능 (null, undefined가 아닌 값을 찾아내는 연산자)

let var1;
let var2 = 10;
let var3 = 20;

let var4 = var1 ?? var2; null 및 undefined가 아닌 값을
찾아서 저장하는 기능
let var5 = var2 ?? var3; // 만약, 둘 다 null 및 undefined
값이 아닌 경우 처음의 값을 출력함

let userName = "전용학"
let userNickName = "FrontEnd Developer"

let displayName = userName ?? userNickName;
// 만약, userName이 있으면 userName으로 저장하고 userName
이 없으면(null or undefined) userNickName으로 저장하라는 의미

• typeof 연산자 : 값의 type을 문자열로 반환하는 기능

let var7 = 1;
var7 = "hello"
// 자바스크립트는 동적으로 값을 할당하여 값의 타입을 할당
할때, 계속 타입이 바뀔 수 있음

let t1 = typeof var7; // string이 출력됨!

• 삼항 연산자 : (조건문? 참 조건 : 거짓 조건)

let var8 = 10;

let res = var8 % 2 === 0 ? '짝수' : '홀수'
console.log(res);  짝수가 출력됨!

---

조건문

• if 조건문 - if(조건식) { 조건이 참일 때 실행되는 코드 }

⛳else if (여러 번 사용가능) / if & else 문 only 1번만 사용가능
📍if로 시작해서 else로 끝나야 됨

let num = 10;

if(num >= 10) {
  console.log("num은 10입니다.")
  console.log("조건이 참입니다.")
} else if (num >=5) {
  console.log("num은 5이상입니다.")
} else {
  console.log("조건이 거짓입니다.")
}

• switch 조건문 - 다수의 조건을 처리할 때, if보다 더 직관적

📍모든 경우의 case에 반드시 break문을 작성해야 됨!
🎈default문을 사용하여 나머지의 경우를 작성 - if문의 else와 동일

let animal = "cat"; // case가 "cat"인 경우 실행되는 조건

switch(animal) {
 case "dog":
   console.log("강아지");
   break;
 case "cat":
   console.log("고양이");
   break;
 case "bear":
   console.log("곰");
   break;
 case "snake":
   console.log("뱀");
   break;
 case "tiger":
  console.log("호랑이");
  default:
    console.log("그런 동물은 전 모릅니다.")
}반복문 - 어떠한 동작을 반복해서 수행할 수 있도록 만들어 주는 문법

---

반복문 - 어떠한 동작을 반복해서 수행할 수 있도록 만들어 주는 문법

• for 문 - for(초기식; 조건식; 증감식) { 반복할 코드}

초기식 : 반복문 내에서 사용할 count 되는 변수
조건식 : 반복문이 언제까지 반복될 건지 정하는 식
증감식 : 증감연산자를 이용하여 초기식을 증감시키는 식

for (let idx = 0; idx <= 10; idx++ ) {
  // idx 값이 2로 나눈 나머지가 0인 짝수일 경우 조건을
  반복하지 않고 조건 표현식으로 올라가서 수행함
  if(idx % 2 === 0) {
    continue;
  }
  console.log("반복")
  // 조건식이 거짓이지 않아도 중간에 종료하는 방법
  if( idx >=5 ) {
   break;
  }

📌 반복문 내부에서 if 조건문 추가하여 거짓이 아니더라도 중간에 반복을 중단할 수 있음 & break문과 같이 사용
📌 continue문을 사용하면 조건을 만족할 때, 아래의 반복문을 실행하지 않고 바로 조건표현식으로 올라가서 수행합니다.

---

함수 선언

• function 함수명(or 익명) () {}

📌함수를 선언하고 나서 반드시 함수를 “함수()” 이렇게 호출해야 함수가 실행됨!

function greeting() {
  console.log("안녕하세요");
}

greeting(); 함수를 호출해야 함수가 실행됨 - 원칙!

📌함수가 호출되면 순차적으로 코드가 실행되다가 함수 내부로 들어가서 실행되고 나서 다음 코드로 순차적으로 실행됨

function getArea () {
  let width = 10;
  let height = 20;
  let area = width * height; // 정해진 값만 사용 가능
  console.log(area);
}

getArea(); // 함수를 호출해야 함수가 실행됨 - 📌필수조건

// 이렇게 width, height로 작성하면 됨
// 전달된 인수를 전달받아 값을 저장하는 📌"매개변수"라고 함
function getArea (width,height) {
  let area = width * height;
  console.log(area);
}

getArea(10,20); // 사용자가 동적으로 자유롭게 할당 가능
여기서, 함수에게 전달한 값을 📌"인수"라고 합니다.

function getArea(width, height) {

  function another () {
   console.log("another"); // 함수 내부에는 함수를 작성 가능
  }
 let area = width * height;
 return area;
 console.log("hello"); // return문 하위에 존재하므로 실
 행되지 않음
}
let area1 = getArea(10,20); // 10과 20을 반환한 값인 200
임 저장되기에 
console.log(area1);을 실행하면 200이 출력됩니다.

📌return을 작성하게 되면 값을 반환하고 바로 함수를 종료하기에 return문 아래에 작성된 코드는 실행되지 않습니다.
또한, 함수 내부에 또다른 함수를 작성할 수 있음 - 중첩 함수

호이스팅 : “끌어올리다” 라는 뜻 / 순차적으로 실행되는 함수 내부에서 밑에서 작성한 함수를 끌어올려 호출하는 것

---

함수 표현식과 화살표 함수

• 함수 표현식 - 변수에 바로 함수를 선언 / 호이스팅 (X)

// 함수 선언문으로 함수를 생성
// 호이스팅이 대상이 됨
function funcA() {
  console.log("funcA");
}
let varA = funcA;
varA();
// varA - 함수 자체를 호출 , varA() - 함수 반환 값을 호출

// 함수 표현식 - 아래와 같이 변수의 값으로써 함수를 생성
// 함수 표현식은 호이스팅이 되지 않음
let varB = function funcB() {
  console.log("funcB");
}
// 변수에서 바로 함수를 선언할 수 있음

• 화살표 함수 - (매개변수 - 동적으로 할당) ⇒ { 실행할 코드 }

// 함수 표현식으로 함수를 생성
let varC = function () {
  return 1;
}
// 함수를 화살표 함수로 작성 가능
let varC = () => {
  return 1;
}
// 코드가 1줄일 경우 아래와 같이 작성 가능
let varC = () => 1;
console.log(varC()); // 반환 값 1을 반환

// 매개변수와 인수를 이용하여 동적으로 할당 가능
let varC = (value) => value + 1;
console.log(varC(10));

---

콜백 함수 - 다른 함수에 인수로 전달되어 특정 작업이 완료된 후 호출되는 함수입니다. 주로 비동기 작업에서 사용되며, 어떤 일이 끝난 후 그 결과를 처리하거나 후속 작업을 실행할 때 유용합니다.

function main (value) {
console.log(1);
console.log(2);
 value(); // value 매개변수에 sub 함수가 저장됨 & 호출
console.log("end");
}
// 함수 자체도 값으로 취급 가능함
function sub() {
 console.log("I am sub");
}

main(sub); // 또는 아래와 같이 함수 표현식으로 사용 가능
main(function () {
 console.log("I am sub");
})
or main(() => {console.log("I am sub"};)

// 콜백함수의 활용 - 중복 동일한 코드의 반복을 방지함!
function repeat(count) {
  for(let idx = 1; idx <=count; idx++) {
    console.log(idx);
  }
}

function repeatDouble(count) {
  for(let idx = 1; idx <=count; idx++) {
    console.log(idx * 2);
  }
}

function repeatThree(count) {
  for(let idx = 1; idx <=count; idx++) {
    console.log(idx * 3);
  }
}

repeat(5); // 1,2,3,4,5 출력
repeatDouble(5); // 2,4,6,8,10 출력
repeatThree(5);  // 3,6,9,12,15 출력

function repeat(count, callback) {
 for(let idx = 1; idx <=count; idx++) {
   callback(idx);
 }
}

repeat(5, function (idx) {console.log(idx)});
repeat(5, function (idx) {console.log(idx * 2)}};
repeat(5, function (idx) {console.log(idx * 3)}};
// 동일한 결과가 실행됨
// 화살표 함수로 나타내면 아래와 같이 변경 가능
repeat(5, (idx) => {console.log(idx);};

---

스코프

스코프 - 전역(전체 영역) 스코프 or 지역(특정 영역) 스코프
전역 스코프 : 전체 영역에서 접근 가능
지역 스코프 : 특정 영역에서만 접근 가능

let a = 1; //전역 스코프

function funcA() {
  let b = 2; //지역 스코프
  console.log(a);
}
funcA();
console.log(b); // 지역 스코프이므로 함수 외부에서 호출 불가능

if(true) {
  let c = 1; // 지역 스코프
}
console.log(c); // 지역 스코프여서 함수 외부에서 호출 불가능

• 객체 생성 ⇒ 방법 2가지 존재

let obj1 = new Object() // 객체 생성자
let obj2 = {}  //객체 리터럴

// 객체 프로퍼티 (객체 속성) - key(키): value(값)
let person = {
  name: "전용학",
  age : 23,
  hobby: "coding",
  job: "FullStack Developer",
  extra: {},
  "like cat": true
}
객체 내부에는 자유롭게 타입을 추가할 수 있음

객체 프로퍼티를 다루는 방법 - 위 코드랑 연결됨!

• 특정 프로퍼티에 접근 (점 표기법, 괄호 표기법)

{점 표기법}
let name = persone.name2;
console.log(name);
// 존재하지 않는 값에 접근 하면 undefined가 반환됨

{괄호 표기법}
let age = persone["age"]; 
// 대괄호 내부에 ""(쌍따옴표)로 같이 접근
console.log(age); 
동일하게, 존재하지 않는 값에 접근 하면 undefined가 반환됨

let property = "hobby";
let hobby = person[property];
// 변수에 특정 프로퍼티를 값을 저장해 호출 가능
console.log(hobby);

• 새로운 프로퍼티를 추가하는 방법

person.job = "fullstack developer";
person["favoriteFood"] = "떡볶이";

console.log(person); // 새로운 프로퍼티가 추가됨

• 프로퍼티를 수정하는 방법

person.job = "developer";
person["favoriteFood"] = "라면";

console.log(person); // 기존 저장 값이 수정됨

• 프로퍼티를 삭제하는 방법

delete person.job; 
or
delete person["favoriteFood"];
// job 프로퍼티 person 객체에서 삭제됨

• 프로퍼티의 존재 유무를 확인하는 방법 (in 연산자)

let result1 = "name" in person;
// person 객체에 name이라는 객체가 있는지 존재 유무 확인
console.log(result1); // true가 출력
let result2 = "cat" in person;
console.log(result2); // false가 출력

• 상수 객체 - 상수에 저장해 놓은 객체

const animal = {
  type: "고양이",
  name: "나비",
  color: "black"
}

animal = { a: 1}
// 상수 객체는 또 다른 객체를 생성해서 할당하는 것은 불가

animal.age = 2; // 추가
animal.name = "까망이"; // 수정
delete animal.color; // 삭제
추가, 수정 및 삭제는 가능함

• 메서드 - 값이 함수인 프로퍼티를 말함

const person {
  name: "전용학"
  // 메서드
  sayHi: function () {
    console.log("안녕":
  }
  or
  sayHi () {
    console.log("안녕"); // 메서드 선언으로 가능!
  }
}

person.sayHi(); // 안녕이라는 문자열이 출력됨
person["sayHi"](); // 괄호 표기법 or 점 표기법으로 호출
가능

---

배열 - 여러 개의 값을 순차적으로 담을 수 있는 자료형

• 배열 생성 - 2가지 방법으로 가능

let arrA = new Array(); // 배열 생성자
let arrB = []; // 배열 리터럴 (대부분 사용)

let arrC = [1,2,3]; ,(콤마)로 여러 개의 값 저장
배열 내부에 모든 타입의 값 저장 가능 & 길이의 한계 (x)

• 배열 요소 접근

let item1 = arrC[0]; // 0번 인덱스
let item2 = arrC[1]; // 1번 인덱스
console.log(item1, item2); 
// ZeroBased Numbering의 순서로 0부터 시작함

arrC[0] = "hello";  값을 변경 가능함
console.log(arrC);

Truthy & Falthy

• 참이나 거짓을 의미하지 않는 값도, 조건문 내에서 참이나 거짓으로 평가하는 특성

Falthy 값
let f1 = undefined;
let f2 = null;
let f3 = 0;
let f4 = -0;
let f5 = NaN;
let f6 = "";
let f7 = 0n; Bigently 값... 아주 큰 값 사용x

• Truthy 값 - Falthy 7가지 값을 제외한 모든 값

**let f1 = "hello"
let f2 = 123;
let f3 = [];
let f4 = {};
let f5 = () => {};**

function print Name (person) {
   if(person === undefined || person === null) {
   console.log("person 값이 없음"}
   return;
   }
     console.log("person.name")
     }
     let person = null;
     printName(person);
     
     // 조건분에 ||안 or 연산자를 추가하여 조건문을 작성해야 오류가 나지 않음
     // 이렇게 작성하게 되면 코드를 간단하게 줄일 수 있음!
     if(!person) {
       console.log("person값이 없음")
       return;
     }
       console.log(person.name);
       }
       let person = {name" "전용학"};
       printName(person);

• 단락 평가 : 첫 번째 피연산자로 true가 되어 뒤를 판단하지 않는 것

function returnFalse() {
	console.log("False 함수");
  return false;
}
function returnTrue() {
	console.log("True 함수")
  return true;
}
// 무조건 false 이므로 2번째 함수를 호출하지 않음
console.log(returnFalse() && returnTrue());
만약, returnTrue() && returnFalse() -> 2개 전부 실행됨

console.log(returnTrue() || returnFalse());
// or연산자로 작성하면 True함수 true로 출력함

true || true -> 1 번째 true값 반환
true && true -> 2 번째 true값 반환

---

• 구조 분해 할당

// 1. 배열의 구조 분해 할당
let arr = [1,2,3];

let [one, two, three] = arr;
console.log(one, two, three); // 1, 2, 3으로 출력

let [one, two, three, four = 4] = arr; //기본값 설정!
console.log(one, two, three, four);

// 2. 객체의 구조 분해 할당 {} 사용
let person = {
	name: "전용학",
	age: 23,
	hobby: "코딩"
};
let {name, age, hobby, extra} = person;
console.log(name,age,hobby, extra); 
// 전용학 23 코딩 undefined
객체에 존재하지 않는 값을 할당하면 undefined가 출력 됨

// 3. 객체 구조 분해 할당을 이용하여 함수의 매개변수를 받는 법
only 객체를 넘겼을 때만 가능!
const func = ({name, age, hobby, extra}) {
	console.log(name, age, hobby, extra);
}

func(person);

• Spread 연산자 & Rest 매개변수

// 1. Spread 연산자 
객체나 배열에 저장된 여러 개의 값을 개별로 흩뿌려주는 역할

let arr1 = [1,2,3];
let arr2 = [4,...arr1,5,6];
console.log(arr2); // [4,1,2,3,5,6]

{객체}
let obj1 = {
	a:1,
	b:2,
};
let obj2 = {
	...obj1,
	c:3,
	d:4
}
function funcA(p1,p2,p3) {
	console.log(p1,p2,p3);
}

// 2. Rest 매개변수
Rest는 나머지, 나머지 매개변수
주의 - rest 매개변수 뒤에는 추가적으로 변수를 선언 불가능!
function funcB(1, ...rest , four) {
	console.log(1, rest) // 1 / 2,3 이렇게 저장됨
}
funcB(...arr1)

• 원시 타입 vs 객체 타입

📍구분하는 이유 : 원시타입과 객체타입은 값이 저장되거나 복사되는 과정이 서로 다르기 때문

• 원시 타입 (불변값 - 메모리 값 수정 x) - 값 자체로써 변수에 저장되고 복사됨

• 객체 타입 (가변값 - 메모리 값 수정 o) : 참조값을 통해 변수에 저장되고 복사됨

• 1번 째 콘솔 : true / 2번째 콘솔 : false

• 객체의 참조 값 비교 - 얕은 비교 사용
• 객체의 property(내부 데이터) 값 비교 - 깊은 비교 사용

---

반복문으로 배열과 객체 순환하기

// 1. 배열 순회
let arr = [1,2,3];

// 1-1. 배열 인덱스 - .length 기본 객체 내장 함수
for(let i=0; i < arr.length i++){
	console.log(arr[i]);
}

// 1-2. for of 반복문 - 오직 배열을 순회할 때만 사용(배열에만 사용가능)
for(let item of arr) {
	console.log(item);
}
of 뒤 배열(arr)의 값을 1개씩 꺼내어 item으로 전달함

// 2. 객체 순회
let person = {
	name: "전용학:<
	age: 23,
	hobby: "coding"
}
// 2-1. Object.keys 사용
객체에서 key 값들만 뽑아서 새로운 배열로 반환
let keys - Object.keys(person);
for( let i = 0; i < keys.length; i++) {
	console.log(keys[i]);
}

for (let key of keys) {
	const value = person[key];  // key의 value값 적용
	console.log(key, value);  // name 전용학, age 23, hobby 코딩
}

// 2.2 Object.values
-> 객체에서 value 값들만 뽑아서 새로운 배열로 반환

let values = Object.values(person);
console.log(values); // 객체의 데이터 전부 출력(person)

for (let value of values) {
	console.log(value);
}

// 2.3 for in - 객체만을 위한 특수한 반복문(객체에만 사용가능)
for(let key in person) {
	console.log(key); // 전용학, 23, 코딩 이렇게 출력
}

---

배열 메서드

• 6가지 요소 조작 메서드

1. push - 배열의 맨 뒤에 새로운 요소를 추가하는 메서드
또한 변경된 배열의 길이를 자동 반환
let arr1 = [1,2,3];
arr1.push(4,5,6,7); // 배열에 인수 4,5,6,7을 추가

console.log(arr1); // 1,2,3,4,5,6,7이 출력!

2. pop - 배열의 맨 뒤에 있는 요소를 제거하고, 반환
let arr2 = [1,2,3];
arr2.pop();

console.log(arr2); // 1,2과 출력

3. shift 메서드 - 배열의 맨 앞에 있는 요소를 제거 및 반환
let arr3 = [1,2,3];
arr2.shift();

console.log(arr3); // 2,3 출력

4. unshift - 배열의 맨 앞에 새로운 요소를 추가하는 메서드
또한 변경된 배열의 길이를 자동 반환
let arr4 = [1,2,3];
arr4.unshift(0);

console.log(arr4); // 0,1,2,3 출력

// push와 pop 보다는 shift와 unshift가 더 느리게 동작함

5. slice - 마치 가위처럼, 배열의 특정 범위를 잘라내서 새로운
배열로 반환

let arr5 = [1,2,3,4,5];
arr5.slice(2,5) // 3,4,5를 잘라야 하므로 ZeroBasedNumbering에
의해서 2번 인덱스부터 시작하므로 2로 작성 
2번째 인수로는 4로 작성해야 할 것 같지만 마지막에는 항상 +1을
하여 5로 작성해야 함!
But, 원본 배열을 수정 x / 새롭게 배열을 생성 o
arr5.slice(2)로 작성하며 2부터 끝까지 잘라서 배열을 생성
arr5.slice(-3)로 작성하면 뒤에서 부터 3개를 자르므로 
3,4,5가 출력됨

6. concat - 2개의 서로 다른 배열을 이어 붙여 새로운 배열
을 반환

let arr6 = [1,2];
let arr7 = [3,4];

let concatedArr = arr6.concat(arr7);
console.log(concatedArr); // 1,2,3,4 배열이 붙어져 생성

• 순회와 탐색 - 5가지 요소 순회 및 탐색 메서드

1. forEach - 배열의 모든 요소를 순회하면서, 각각의 요소에
특정 동작을 수행시키는 메서드
let arr1 = [1,2,3];
arr1.forEach(function (item,idx,arr) {
  console.log(idx, item * 2);
});
// item은 배열의 요소, idx는 ZeroBasedNumbering
arr은 배열의 데이터

arr1.forEach((item) => {
 doubledArr.push(item * 2)
 }); // 2,4,6이 반환됨
 
2. includes - 배열에 특정 요소가 있는 확인하는 메서드
let arr2  = [1,2,3];
let isInclude = arr2.include(3);
console.log(isInclude); // true

3. indexOf - 특정 요소의 인덱스(위치)를 찾아서 반환하는
메서드(얕은 비교로 동작!, 객체 찾지 못함)
let arr3 = [1,2,3];
let index = arr3.indexOf(2);
console.log(index); // 1이 출력됨 -ZeroBasedNumbering

4. findIndex - 모든 요소를 순회하면서, 콜백함수를 만족
하는 특정 요소의 인덱스(위치)를 반환하는 메서드(깊은 비교
로 동작!)
let arr4 = [1,2,3];
arr4.findIndex((item)=>{
  if(item % 2 !== 0) return true;
});

5. find - 모든 요소를 순회하면서 콜백함수를 만족하는 요소
를 찾는데, 요소를 그대로 반환

let arr5 = [
{name: "전용학"},
{name: "리액트"}
]

arr5.find((item) => item.name === "전용학")
console.log(finded);
객체 자체가 반환됨 - {name: "전용학"}

• 배열 메서드 - 5가지 배열 변형 메서드

1. filter - 기존 배열에서 조건을 만족하는 요소들만 필터
링하여 새로운 배열로 반환

let arr1 = [
  {name: "전용학", hobby: "코딩"},
  {name: "홍길동", hobby: "헬스"}
]

const tennisPeople = arr1.filter((item) => {
if(item.hobby === "테니스"} {return true})

console.log(tennisPeople); // true

2. map - 배열의 모든 요소를 순회하면서, 각각 콜백함수를 
실행하고 그 결과값들을 모아서 새로운 배열로 반환

let arr2 = [1,2,3];
const MapResult = arr2.map((item, idx, arr) => {
  console.log(idx,item);
  return item * 2;
})
// 배열에서 이름만 배열로 추출하는 법
let names = arr1.map((item) => item.name);
console.log(names); // 전용학, 홍길동 반환

3. sort - 배열을 사전순으로 정렬하는 메서드(원본 배열을
변경)
let arr3 = ["b","a", "c"];
arr3.sort();
console.log(arr3); // a,b,c 로 정렬되어 출력
// 만약, arr3 = [1,6,4] 이면 sort가 정렬되지 않음!

{거의 사용 x, just 참고}
arr3.sort((a,b) => {
  if(a > b) {
    // b가 a 앞에 와라
    return 1; // 양수를 반환
  } else if(a < b){
    return -1; // a가 b앞에 와라
  } else {
    return 0; // 두 값의 자리를 바꾸지 마라
  }
})

4. toSorted - 정렬된 새로운 배열을 반환하는 메서드(원본은
그대로 두고)

let arr5 = ["c","a","b"];
const sorted = arr5.toSorted();

console.log(arr5);
console.log(sorted);

5. join - 배열의 모든 요소르 하나의 문자열로 합쳐서 반환
하는 메서드

let arr6 = ["hi","i'm","winterhood"]
const joined = arr6.join();

console.log(joined); // hi, i'm winterhood 하나의 문장
으로 출력

---

• Date 객체와 날짜

1. Date 객체를 생성하는 방법

let date1 = new Date(); // 생성자 - new로 내장 함수 사용
console.log(date1); // 현재 시간 출력

let date2 = new Date("1997-01-07") // 특정 날짜 생성
/ or . or - or ,(콤마)로 날짜를 ""안에 작성할 수 있음
console.log(date2); // 설정한 날짜가 생성됨

2. 타임 스탬프 - 특정 시간이 "1970.01.01 00시 00분 00초
"로 부터 몇 ms가 지났는지를 의미하는 숫자 값

let ts1 = date1.getTime();
console.log(ts1); 134613748921 지난 시간이 나옴

let date4 = new Date(ts1);
// 이렇게 작성하면 타임 스탬프의 시간값으로 나오게 됨

3. 시간 요소들을 추출하는 방법

let year = date1.getFullYear(); // 년도
let month = date1.getMonth(); // 월
let date = date1.getDate(); // 일
let hour = date1.getHours(); // 시간
let minute = date1.getMinutes(); // 분
let minute = date1.getSeconds(); // 초

자바스크립트의 월은 0부터 시작 2월은 1로 출력됨!

4. 시간 수정하기

date1.setFullYear(2023); // 2023년으로 수정
date1.setMonth(2); // 실제로는 3월이 반영됨
date1.setDate(30); // 30일로 수정
date1.setMinutes(59); // 59분으로 수정
date1.setSeconds(59); // 59초로 수정

5. 시간을 여러 포맷으로 출력하기

console.log(date1.toDateString()); // 시간을 제외하고
날짜만 출력 Thu Mar 30 2023
console.log(date1.toLocalString()); // 우리나라 시간
으로 출력

---

동기와 비동기

• 동기 : 여러 개의 작업을 순서대로 하나씩 처리하는 방법(1개의 작업이 종료되어야 다음 작업으로 넘어감)

JAVASCRIPT는 “동기적으로” 코드를 실행한다. 자바스크립트 엔진진은 스레드가 1개임!

• 비동기 : 작업을 순서대로 처리하지 않음

console.log(1);
setTimeout(() => {
	console.log(2)
	},3000); // 3초(3000ms)만큼 대기하고 콜백함수를 실행
console.log(3); // 1, 3, 2 이렇게 출력됨(비동기적 실행)

Web API란? 비동기 작업들은 자바스크립트 엔진이 아닌 Web APIs에서 실행 됨

• 비동기 setTimeout을 Web API로 요청하면 시간이 지나면 다시 자바스크립트에게 돌려줘 콜백 함수가 실행됨

비동기 작업 처리하기 - 콜백함수

function add(a,b, callback) {
	setTimeout(() => {
	  const sum = a + b;
	  console.log(sum);
	},3000);
}
add(1,2,(value) => {
  console.log(value);
}); // 3초 뒤에 3이 출력됨!

실행 로직: add 함수 호출되며 setTimeout함수가 호출되면서
setTimeout이 호출되고 이 setTimeout은 3초 뒤에 실행되고
3을 계산하고 콜백함수에 다시 3을 전달하여 출력되고 
console.log(value);로 전달하여 3을 출력

{음식을 주문하는 상황}
function orderFood(callback) {
  setTimeout(() => {
    const food = "엽기 떡볶이";
  },3000);
}  

{음식을 식히는 상황}
function cooldownFood(food) {
  setTimeout(() => {
  const cooldownedFood = `식은 ${food}`;
  callback(cooldownedFood);
  ),2000}
  
 {음식을 냉동하는 상황}
 function freezeFood() {
  setTimeout(() => {
    const freezedFood = `냉동된 ${food}`;
    callback(freezedFood)
  },1500); 
 } 
 
orderFood((food) => {
  console.log(food);
  
  cooldownFood(food, (cooldownedFood) => {
    console.log(cooldownedFood);
    
    freezeFood(cooldownedFood, (freezedFood) => {
      console.log(freezedFood);
    })
  });
});

• 비동기 작업 처리하기 - Promise

비동기 작업을 효율적으로 처리할 수 있도록 도와주는 자바스크립트의 내장 객체

const promise = new Promise((resolve, reject) => {
 // 비동기 작업 실행하는 함수 (executor)
 
 setTimeout(()=>{
   const num = 10;
   
   if(typeof num === "number") {
     resolve(num + 10);
   } else {
     reject("num이 숫자가 아닙니다.")
   }
  },2000);
});
console.log(promise); // pending(대기 상태)

// then 메서드 -> 그 후에

promise.then((value) => {
  console.log(value);
})

// catch 메서드 -> promise가 실패했을때 실행
promise.catch((error)=>{
  console.log(error);
});

// promise 체이닝 (가독성 높임)
promise
 .then((value) => {
   console.log(value);
 })
 .catch((error) => {
   console.log(error);
 })

• 비동기 작업 처리하기 - async/await

async - 어떤 함수를 비동기 함수로 만들어주는 키워드(함수
가 프로미스를 반환하도록 변환해주는 그런 키워드)

async function getData() {
  return {
    name: "전용학",
    id: "younghak",
  }
}

console.log(getData()); // promise 객체가 반환됨
(fulfilled 상태)

async function getData() {
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve({
       name: "전용학",
       id: "younghak"
      });
    }, 1500);
  })
}

await - async 함수 내부에서만 사용이 가능한 키워드
비동기 함수가 다 처리되기를 기다리는 역할

async function printData() {
  const data = await getData();
  console.log(data);
}
// 비동기 작업을 동기 작업처럼 간결하게 작성 가능
printData();