JavaScript 기본 복습

Udemy - 한입크기로 잘라 먹는 리액트

패스트캠퍼스 리액트 강의가 다소 어렵게 느껴져서 3주 전에 Udemy에서 리액트 강의를 신청했다.

실전 프로젝트를 하기 전 자바스크립트 개념을 약 4시간 반 정도 강의로 요약해주는데
오히려 이 강의를 보고 책이나 블로그보다 더 자바스크립트에 대해 이해한 부분이 많아 복습에 도움이 됐다!
원시타입/비원시타입, 콜백함수, 호이스팅, 함수선언식/표현식, 객체, 배열 등등 헥갈린 기본 개념들을 쉽게 이해할 수 있었다. (특히 지난 자바스크립트 퀴즈를 풀 수 있었던 것도 이 강의를 돌려보고 MDN 등 활용했기에.)

💬 강사 이력을 보니 정말 우연하게도 나와 같은 학교의 컴퓨터공학과 학생인 주니어 개발자였는데 내가 동년배가 아니라서(...) 같이 학교를 다닌 건 아니나 이 자리를 빌어서 후배님에게 고맙다고 전하고 싶다. 좋은 강의 & 명쾌한 설명 👍 (찾아보니 같은 과 학생들끼리 랩실 창업을 한거 같다.. 젊음이 부럽다)
GitHub https://github.com/winterlood

💬 생각해보면 예전 직장에서도 프로젝트로 온 개발자 중 친해졌던 여자개발자분이 있었는데
대화하다보니 같은 학교였던 걸 알게되었고 그분도 개발 프로젝트라든가 흐름을 많이 설명해줬던 기억😃
💬 원래 인프런에서도 팔던 강의인데 사실 Udemy가 조금 더 쌌다. 그리고 교육플랫폼끼리 비교해서 들어보려고 한번 Udemy 수강도 첨으로 도전! (근데 Udemy 잘되있긴 한데 가끔 속도가 너무 끊김..)

JavaScript 기본

📌 변수와 상수

✔️ 핵심 Point

변수 let
변하는 것, 값이 계속 바뀌는 이름붙은 저장소라고 생각하기

• 규칙1 : _와 $ 제외하고 기호 사용X
• 규칙2 : 변수명은 숫자가 아닌 문자로 시작해야한다
• 규칙3 : 예약어는 사용하지 않는다

상수 const
변하지 않는 것, 선언 이후에 값을 바꿀 수 없다

📌 자료형과 형 변환

✔️ 원시타입/비원시타입 Point

원시타입 (Primitive Data Type) = 내장형 타입, 기본형 타입

• Number, String, Boolean, Undefined, Null
• 한번에 하나의 값만 가질 수 있음
• 하나의 고정된 저장 공간 이용

비원시타입 (Non-Primitive Data Type)

• Object, Array, Function
• 한번에 여러 개의 값을 가질 수 있음
• 여러 개의 고정되지 않은 동적 공간 사용

📝 Number

let age = 25;
let tall = 175.9;
let inf = Infinity; // 양의 무한대
let minusInf = -Infinity; // 음의 무한대
let nan = NaN; // 수학적 연산 실패의 결과값 

console.log(age * tall);

📝 String

let name = "winterlood";
let name2 = "이정환";
let name3 = `winterlood ${name2}`; // ``(벡틱) 안에 문자열 집어넣는 문법 > 템플릿 리터럴

console.log(name3);

📝 Boolean

let isSwitchOff = false; // 거짓
let isSwitchOn = True; // 참

📝 Null

let a = null; // 의도적으로 이 변수는 아무것도 안 담고 있다를 가리킬 때 사용
console.log(a);

📝 Undefined

let variable; // 값을 아무것도 할당하지 않으면 undefined를 자동으로 할당
console.log(variable);

✔️ 형 변환 Point

• 값은 유지하면서 자료형은 변경할 수 있음.
• 자바스크립트 엔진은 다른 자료형 간의 연산 수행할 때 적절하게 자료형을 자동으로 변환해 결과를 돌려주는 기능을 가지고 있음. (= Casting)
• 묵시적 형변환 : 암묵적으로 형 변환
• 명시적 형변환 : 프로그래마가 의도적으로 형 변환 (ex. parseInt)

let numberA = 12;
let numberB = 2; // Number
console.log(numberA * numberB) // 24

let numberA = 12;
let numberB = "2"; // String
console.log(numberA * numberB) // 24 (형변환)

let numberA = 12;
let numberB = "2"; // String
console.log(numberA + numberB) // 122 (더하면 12에 2를 더한 문자형으로 출력)

let numberA = 12;
let numberB = "2"; // String
console.log(numberA + parseInt(numberB)) // 14 (parseInt 문자>숫자로 돌려줌)

📌 연산자

✔️ 핵심 Point

// 📝 대입연산자
let a = 1; 
let b = 2;

// 📝 산술연산자 (사칙연산)
console.log(a + b); // 3
console.log(a * b); // 2
console.log(a - b); // -1
console.log(a / b); // 0.5 
console.log(a % b); // 1

// 📝 연결연산자
let a = "1";
let b = "2";
// let b = 2여도 동일한 결과가 나옴 (묵시적형변환 개념)
console.log(a + b); // 12

// 📝 복합연산자
let a = 5;
a += 10; // a = a + 10; 근데 a가 두번나오게 하고 싶지 않다
console.log(a); // 15;

a -= 10; // a = a - 10;
console.log(a); // -5

// 📝 증감연산자 (원시타입 중 숫자에만 사용할 수 있다)
let a = 10;
a++; //  a += 1;
console.log(a); // 11

a--; //  a -= 1;
console.log(a); // 9

// 증감연산자는 ++a와 a++의 결과값이 다름

console.log(a++); // 10 
console.log(a); // 11 (증감연산자 뒤에 쓰는 방식 : 후희연산)

console.log(--a); // 9 (증감연산자 앞에 쓰는 방식 : 전희연산)

// 📝 논리연산자 (참/거짓 boolean)
console.log(!true); // false (!는 not을 의미)
console.log(!false); // true

// AND : true(피연산자) AND(연산자,shift+숫자7) true(피연산자)
console.log(true && true); // true
console.log(true && false); // false

// OR : true OR false
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

// 📝 비교연산자1

// =는 대입, ==는 비교연산자
// compareA 변수에 == "1"이 저장된거라고 보면 됨
let compareA = 1 == "1";
console.log(compareA); // true

// 왜 true냐면 자바스크립트에서 == 두번 쓰면 이 비교 연산이 값만 비교하게 됨
// 설령 타입이 다르더라도 값이 똑같기 때문에 true라고 출력하게 됨

// 값뿐만 아니라 자료형까지 똑같은 걸 비교하고 싶을 때는
let compareA = 1 === "1";
console.log(compareA); // false

// 값뿐만 아니라 타입까지 비교해서 false 출력

// 값만 비교할 때는
let compareA = 1 != "1"; // 같지않다
console.log(compareA); // false

// 값과 타입까지 비교할 때는
let compareA = 1 !== "1";
console.log(compareA); // true

• 더 안전한 비교를 위해서 === 이용, 타입까지 비교하기 위해 !== 이용하는 게 안전

📝 비교연산자2

let compareA = 1 > 2;
console.log(compareA); // false

let compareA = 1 <= 2;
console.log(compareA); // true

📝 자료형 확인 연산자

let compareA = 1;
console.log(typeof compareA); // number

compareA = "1";
console.log(typeof compareA); // string

📝 null 병합 연산자

let a; // 자동으로 undefined 할당
a = a ?? 10; // ?? 양쪽의 피연산자 중 null이나 undefined가 아닌 값을 선택함

console.log(a); // 10

📌 조건문

✔️ 핵심 Point

조건문이란 어떤 연산의 결과의 참거짓에 따라서 다른 명령을 각각 실행할 수 있도록 도와주는 문법

if문

let a = 3;

if(a >= 5){ // 조건식이 일치할 때는 이 곳이 실행
	console.log("5 이상입니다.");
}
else{ // 일치하지 않으면 이 곳이 실행
	console.log("5 이하입니다.");
}
// 5 이하입니다.

let a = 5;

if(a >= 7){ // 이 조건 먼저 검사
	console.log("7 이상입니다.");
}
else if(a >= 5){ // if 조건이 거짓일 때 한번 더 비교할 때 (여러 개 넣을 수 있음)
	console.log("5 이상입니다.");
}
else{ // 위에 조건 모두가 아니면
	console.log("5 미만입니다.");
}
// 5 이상입니다.

let country = "ko";

if(country == "ko"){
	console.log("한국");
}
else if(country === "cn"){
	console.log("중국");
} else if(country === "jp"){
	console.log("일본");
} else {
	console.log("미 분류");
}

// 한국

그런데 지구상에 존재하는 국가가 200개가 넘는데 모두 else if를 걸어줄 수 없으므로 다른 조건문 사용

Switch문

let country = "ko";

switch(country){ // country를 case들과 비교하는 조건문
	case "ko":
    	console.log("한국");
        break; // 적절한 타이밍에 조건들이 다 실행되지 않게 끊어줌
    case "cn":
    	console.log("중국");
        break;
    case "jp":
    	console.log("일본");
        break;
    case "uk":
    	console.log("영국");
        break;
    default: // else if 개념이라고 보면 됨
     	console.log("미 분류");
        break;   
}

// 한국

📌 함수

✔️ 핵심 Point

프로그래밍을 하다보면 똑같은 동작을 하는 코드들이 여러 곳에 존재하는데
이럴 때 함수라는 것을 만들어서 중복되는 동일한 코드를 하나로 묶어서 재사용할 수 있음

함수 선언 매개변수 반환 전역변수 지역변수

// 직사각형의 면적 계산하기

let width1 = 10;
let height1 = 20;
let area1 = width1 * height1;

console.log(area1); // 200

// 너비가 다른 직사각형 두 개를 만든다면?

let width2 = 30;
let height2 = 15;
let area2 = width2 * height2;

console.log(area2); // 450

// 그런데 너비와 높이의 값만 달라지고 수식은 같고 똑같은 동작인데..?
// 만약 너비와 높이에 주어지는 값이 10개 넘으면 중복해서 일일이 코드를 써야할까..?

// 함수를 만들 때는 function을 쓴다 (기능)
// 함수 선언식 , 함수 선언 방식의 함수 생성 
function getArea(){
	let width = 10;
    let height = 20;
    let area width * height;
    console.log(area);
}

// 📝 함수 호출
getArea(); // 200
console.log("함수 실행 완료"); // 함수 실행 완료

// 📝 동작 순서
// 1. 함수 생성
// 2. 함수 호출
// 3. 함수 중괄호 안으로 제어가 넘어와서 실행해서 내부 코드 실행
// 4. "함수 실행 완료" 실행 

// 그런데 너비와 높이 값을 함수 호출 할 때 던져서 실행하면?
// 📝 매개변수(인자)
function getArea(width, height){
	let area = width * height;
    console.log(area);
}

getArea(100,200); // 20000
getArea(10,200); // 2000
getArea(1,200); // 200
getArea(100,200); // 20000
getArea(10,200); // 2000
console.log("함수 실행 완료"); // 함수 실행 완료


// 📝 함수의 결과값을 변수에 받아보고 싶다면?
function getArea(width, height){
	let area = width * height;
    return area; // 어떤 값을 리턴
}

let area1 = getArea(100,200); // 여기에 반환하여 변수에 대입
console.log("area1 : ", area1); // area1 : 20000 
console.log("함수 실행 완료"); // 함수 실행 완료

let count = 1; // 📝 전역변수(global)

function getArea(width, height) {
	// 📝 지역변수
	let area = width * height; // 함수 내부에서 선언된 변수
    console.log(count); 
    return area;
}

let area1 = getArea(100, 200);
console.log(area); // 바깥에서 이용하려고 하면 error

📌 함수 표현식 & 화살표 함수

✔️ 핵심 Point

• 함수를 값처럼 취급해서 변수에 담을 수 있게 하는 것을 함수 표현식이라 함
• 비원시타입(Non-Primitive Data Type)이지만 변수나 상수에 값을 담아서 사용 가능

함수 표현식

함수 표현식 함수 선언식 호이스팅

// 📝 함수 표현식 
let hello = function() { // 이름을 명시(지정)하지 않아도 됨 (무명함수)
	return "안녕하세요 여러분";
}

// 📝 함수 선언식
function helloFunc() {
	return "안녕하세요 여러분";
}

const helloText = hello();
console.log(helloText); // 안녕하세요 여러분

// 📝 함수 표현식과 선언식은 어떤 차이가 있을까?

// 📝 hoisting(호이스팅)
// "함수 선언식"으로 만들어진 함수들은 코드의 최상단으로 끌어올려진다
// 가장 밑바닥에 선언을 해도 정상적으로 위에서 호출해서 사용할 수 있다.
// "함수 표현식"은 호이스팅 대상에 해당되지 않음 (직접적으로 선언되기 전에는 접근 불가)

console.log(helloB()); // 안녕하세요 여러분
console.log(helloA()); // TypeError:helloA is not a function

let helloA = function() {
	return "안녕하세요 여러분";
} // helloA는 함수 표현식

function helloB() {
	return "안녕하세요 여러분";
} // helloB는 함수 선언식

화살표 함수 (Arrow Function)

• 함수(표현식)을 더 간결하게 쓰는 방법
• 화살표 함수 역시 호이스팅의 대상이 아님

let helloA = function() {
	return "안녕하세요 여러분";
} 

let helloA = () => {
	return "안녕하세요 여러분";
} 

// 만약 리턴 밖에 안하는 함수라면?
let helloA = () => { };

// 또는 구현하는 게 "안녕하세요 여러분"만 있으면
let helloA = () => "안녕하세요 여러분";

📌 콜백함수

✔️ 핵심 Point

콜백함수는 어떤 다른 함수에 매개변수로 함수를 넘겨준 것을 의미

// 기분에 따라 다른 동작을 하게 하는 함수를 만들어보자

function checkMood(mood) {
	if(mood === "good"){
    	// 기분이 좋을 때 하는 동작
        sing();
    }
    else {
    	// 기분이 안 좋을 때 하는 동작
        cry();
    }
}

// 우는 동작
function cry(){
	console.log("ACTION :: CRY😂");
}

// 노래하는 동작
function sing() {
	console.log("ACTION :: SING🎤 ");
}

// 춤추는 동작
function dance() {
	console.log("ACTION :: DANCE🤩");
}

checkMood("good"); // ACTION :: SING🎤
checkMood("sad"); // ACTION :: CRY😂

// 그런데 위의 코드대로면 고정된 동작만 할 수 밖에 없음 (다른 동작을 하려면 일일이 바꿔줘야 함)
// 더 융통성있게 코드화한다면?

// 기분이 좋을 때 하는 동작(goodCallback) 파라미터
// 기분이 안 좋을 때 하는 동작(badCallback) 파라미터 받아서 수행하도록 변경
// 📝 콜백 함수 : 함수표현식의 개념 이용해서 함수 자체를 매개변수에 값을 담아서 호출

function checkMood(mood, goodCallback, badCallback) {
	if(mood === "good"){
    	// 기분이 좋을 때 하는 동작
        goodCallback();
    }
    else {
    	// 기분이 안 좋을 때 하는 동작
        badCallback();
    }
}

// 우는 동작
function cry(){
	console.log("ACTION :: CRY😂");
}

// 노래하는 동작
function sing() {
	console.log("ACTION :: SING🎤 ");
}

// 춤추는 동작
function dance() {
	console.log("ACTION :: DANCE🤩");
}

checkMood("sad", sing, cry); // ACTION :: CRY😂
checkMood("good", sing, cry); // ACTION :: SING🎤

• 콜백함수의 경우, 뒤에 배울 배열에서 많이 활용함

📌 객체

✔️ 핵심 Point

• 비원시타입(Non-Primitive Type)
• 한번에 여러 개의 값을 가질 수 있음
• 여러 개의 고정되지 않은 동적 공간 사용

// 📝 객체 생성자
let person = new Object();

// 📝 객체 리터럴 방식
// 많은 프로그래머들이 코드 작성 시에는 리터럴 방식으로 다루기 때문에 익숙해지는 것이 좋음

let person = {

	// key와 value를 쌍으로 갖는 것을 "(객체) 프로퍼티"라 함
    // 객체가 가지고 있는 속성 = 데이터라고 이해해도 좋음
    // key는 문자형만, value는 어떤 형이 와도 상관없음
    // key를 중복해서 사용하는 것은 권장하지 않음
    
    key: "value",
    key0 : 123,
    key1 : "value2"
    key2: true,
    key3: undefined,
    key4 [1,2],
    key5: function(){}

};

console.log(person); // {key:"value", key1:"value2", ...}로 중괄호에 묶어서 출력(펴서 볼 수 있음)

// 📝 객체의 프로퍼티를 사용하는 방법

let person = {
    key: "value",
    key0 : 123,
    key1 : "value2"
    key2: true,
    key3: undefined,
    key4 [1,2],
    key5: function(){}
};

// 📝 점표기법
console.log(person.key0); // 123
console.log(person.key2); // true

let person = {
	name: "이정환",
    age: 25
}

console.log(person.name); // 이정환
console.log(person.age); // 25

// 📝 괄호표기법 [""] <- 문자형 형태로 넣기
console.log(person["name"]); // 이정환

// 그런데 만약 ""을 안 쓸거라면 상수에 받아서
const name = "name";
console.log(person[name]); // 이정환

// 📝 괄호표기법을 이용하면 좋은 상황은 동적은 파라미터를 전달받는 이런 상황 또는
// 지금 현재 key를 꺼내야하는데 그 key가 고정되어 있지 않은 상황에는 유용하다!

// 2) 여기에 호이스팅해서
console.log(getPropertyValue("name")); // 이정환

function getPropertyValue(key){
	return person[key];
} // 1) 이 함수는 함수 선언식이니까 호이스팅이 가능하니까..

// 📝 객체 생성 이후 프로퍼티를 추가/수정/삭제하는 방법

let person = {
	name: "이정환",
	age: 25
}

// 📝 프로퍼티 추가
person.location = "한국";
person["gender"] = "남성";
console.log(person); // {name: "이정환", age: 25, location: "한국", gender: "남성"}

person.name = "이정환 A";
person["age"] = 40;
console.log(person); // {name: "이정환 A", age: 40, location: "한국", gender: "남성"}

// 📝 객체를 변수(let)으로 만들었는데 상수(const)로 바꾸면 어떻게 될까?

const person = {
	name: "이정환",
	age: 25
}
person.name = "이정환 A";
person["age"] = 40;
console.log(person); // {name: "이정환 A", age: 40"}

// 프로퍼티를 수정하는 행위는 상수 자체를 수정하는 행위가 아니기 때문에 에러가 일어나지 않음
// 객체를 수정하는 것이지 person이라는 상수 자체를 수정하는 게 아님
// person = {age: 20} 이렇게 대입 연산자로 할당하는 게 아니므로 (상수 훼손)

// 📝 프로퍼티 삭제

const person = {
	name: "이정환",
    age: 25
}

delete person.age;
// 또는 delete person["age"];
// 그런데 이렇게 삭제해도 메모리에서 실제 프로퍼티가 지워지는 것은 아님

// person.age = null;
// 📝 이런 경우도 삭제한 것과 똑같고 delete와 달리 null을 쓰게되면
// 기존 메모리에서 value를 날릴 수 있음 (실제 삭제해야 할 경우에는 이런 방향을 추천)

console.log(person); // {name: "이정환"}

// 📝 객체 프로퍼티에 함수 할당된 경우
const person = {
	name: "이정환", // 멤버
    age: 25, // 멤버
    say: function() {
    	console.log("안녕");
    } // 객체의 프로퍼티로 함수를 담는 것을 메서드라고 함 (함수인 프로퍼티들)
    
    // 📝 지칭할 때 name 멤버는, age 멤버는~
    // 📝 say 메서드에서~
}

// 📝 함수인 경우 점표기법으로 접근해 사용
person.say(); // 안녕 
person["say"]; // 안녕

// 📝 name의 value를 say 메서드에 넣기
const person = {
	name : "이정환",
    age: 25,
    say: function() {
    	console.log(`안녕 나는 ${this.name}`);
        // console.log(`안녕 나는 ${this["name"]}`);
        // 여기서 쓰인 this는 자기 자신 객체임 = ${person["name"]}라고 쓴 것과 같음
    }
}

person["say"]; // 안녕 나는 이정환

// 📝 존재하지 않는 프로퍼티에 접근해서 오류 발생
console.log(person.gender); // undefined

// 📝 프로퍼티 존재 여부를 확인하는 방법 (in 연산자)

const person = {
	name: "이정환",
    age: 25,
    say: function(){
    	console.log(`안녕 나는 ${person["name"]}`);
    }
}

console.log(`name : ${"name"} in person`); // name : true
console.log(`age : ${"age" in person}`); // age : true
console.log(`gender : ${"gender" in person}`); // gender : false

📌 배열

✔️ 핵심 Point

• 비원시타입
• 여러 개의 데이터를 가질 수 있음

// 📝 배열 생성자

let arr = new Array();

// 📝 배열 리터럴

let arr = []; // 객체는 {} 중괄호, 배열은 [] 대괄호

console.log(arr); // []

// 📝 배열을 생성하면서 동시에 값 넣기

let arr = [1,2,3,4];
console.log(arr); // (4) [1,2,3,4]

// 📝 배열에는 객체와 마찬가지로 다양한 자료형이 올 수 있다

let arr = [1, "2", true, null, undefined, {}, [], function(){} ];

// 📝 배열 요소에 접근하기
// 배열은 객체와 다르게 value만 나열되 있음
// 배열이 위치한 순서는 index라고 부름. 이 index를 통해 각각의 값에 접근할 수 있음

let arr = [1,2,3,4,5]

console.log(arr); // (5) [1,2,3,4,5]
console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3

// 📝 배열 추가하기 (push)

let arr = [1, 2, 3, 4, 5]; 

arr.push(6); // 배열의 가장 마지막에 추가
// arr.push({key: "value"});

console.log(arr); // (6) [1,2,3,4,5,6]
// console.log(arr); // (6) [1,2,3,4,5,Object]

// 📝 배열의 길이를 변수로 받아오기 (length)

let arr = [1, 2, 3, 4, 5]; 

arr.push("6");
console.log(arr.length); // 6

• 배열은 자바스크립트에서 객체와 더불어서 가장 많이 사용되는 자료형

📌 반복문

✔️ 핵심 Point

• 프로그래밍이라는 것은 조건과 반복에 의해 완성된다라는 말이 있을 정도로
  반복문은 프로그래밍에 있어서 굉장히 중요함.
• 반복문을 이용하면 배열의 원소를 한번씩 다 접근하는 등에 매우 여러가지의 효율적인 작업을 할 수 있음.
• 반복문은 말 그대로 특정 명령은 반복해서 수행할 수 있도록 도와주는 명령

// 📝 내 이름 5번 출력하기
console.log("winterlood"); 
console.log("winterlood"); 
console.log("winterlood");
console.log("winterlood"); 
console.log("winterlood"); // (5) winterlood

// 그런데 이걸 100번이나 출력해야 한다면 어떨까?
// 100줄 코드를 써야할까?

// 📝 반복문을 통해 중복되는 코드를 줄이자

// 📝 for문
// for (변수 i 선언 후 값 할당; 조건식; 증감연산자(후희연산자) ) 

for (let i = 1; i <= 100; i++ ) {
	// 반복 수행할 명령
    console.log("winterlood"); // (100) winterlood
}

// 📝 for 문 뜯어보기 : 이 3개가 합쳐져서 동작한다
// 초기식 : let i = 1;
// 반복의 주체가 되는 부분을 선언할 수 있음
// 조건식 : i <= 100;
// 반복이 이 조건을 만족할 때만 돌아가게 하라는 뜻으로 명시 (초기식에서 선언한 변수 i)
// 연산식 : i++
// 반복할 때마다 할 연산을 적어주기


// 초기식으로 반복문이 수행이 시작되면서 i라는 변수에 1이라는 값을 할당해서 초기화를 한다.
// 이 i는 반복문은 연산식에 의해서 반복문을 수행할 때마다 1씩 증가한다.
// 그리고 이 반복문은 100 이하일 때는 계속해서 수행한다.
// 1,2,3, ... 100번의 코드가 반복수행

// 📝 배열 순회
// 이 for문은 배열을 순회할 때 매우 유용하게 사용할 수 있음
// 순회라는 것은 배열 내의 모든 요소를 한번씩 접근하는 것을 의미

const arr = ["a", "b", "c"];

for (let i = 0; i <= arr.length; i++){
	console.log(arr[i]); // a b c
}

 // 📝 객체 순회 Object.keys
 
 let person = {
 	name: "이정환",
    age: 25,
    tall: 175
 }
 
 const personKeys = Object.keys(person);
 console.log(personKeys); // (3) ["name", "age", "tall"]
 
 
 //  📝 이런 식으로 객체로 반환해서 돌려준 이 객체를 순회하면 됨
 
 for (let i=0; i < personKeys.length; i++){
 	console.log(personKeys[i]); // name age tall
 }
 
 //  📝 key 값 말고 value를 순회하면
 
  for (let i=0; i < personKeys.length; i++){
 	const curKey = personKeys[i];
    const curValue = person[curKey];
    
    console.log(`${curKey} : ${curValue}`); // name : 이정환 age : 25 tall : 175
 }

//  📝 key를 뽑지않고 value들만 순회한다면 Object.valus
// 객체의 value들을 for문을 이용해서 순회

let person = {
	name: "이정환",
   age: 25,
   tall: 175
}

const personValues = Object.valus(person);

for (let i=0; i<personValues.length; i++){
	console.log(personValues[i]); // 이정환 25 175
}

📌 배열 내장 함수

✔️ 핵심 Point

• 배열은 굉장히 많은 여러가지 내장 함수를 가지고 있음
• 이런 내장함수는 활용하면 이전에 배울 for문이나 if문에 대한 의존성을 줄여서 더 유연하고 멋있고 짧은 코드를 완성할 수 있음

// 📝 for문 복습

const arr = [1,2,3,4];

for (let i=0; i<arr.length; i++) {
	console.log(arr[i];)
}

// 자바스크립트의 자료형은 모두 객체로 이루어져있다
// 객체의 메서드를 쓰는 것처럼 배열 내장 함수 사용

// 📝 forEach
// 마치 for문을 작성한 것처럼 배열의 요소를 하나하나씩 출력 가능

arr.forEach((elm) => console.log(elm)); // 1 2 3 4
// 이거슨 어디서 본거냐 바로 콜백함수임

// 이렇게 쓴 것과 같은 것임 (elm 파라미터로 전달해주면서 원하는 작업을 하게 해줌)
arr.forEach(function(elm){
	console.log(elm); // 1 2 3 4
    console.log(elm*2); // 2 4 6 8
});


// 📝 주어진 arr 상수 배열에 모든 요소에 x 2를 해서 새로운 배열로 만들기
const arr = [1,2,3,4];
const newArr = [];

arr.forEach(function(elm){
	newArr.push(elm * 2);
});

console.log(newArr); // (4) [2,4,6,8]

// 위의 코드를 더 짧게 줄이는 방법

// 📝 Map
// 동일하게 콜백함수를 수행한다고 보면 됨 그런데 한번씩 리턴을 받음
// 원본배열에 모든 요소를 순회하면서 어떤 연산을 하여
// 리턴된 이 값들만 따로 배열로 추려내서 반환할 수 있게 해주는 내장함수 

const arr = [1,2,3,4];
const newArr = arr.map((elm) => {
	return elm * 2;
});

console.log(newArr); // (4) [2,4,6,8]


// 📝 배열에 값이 존재하는지 확인

const arr = [1,2,3,4];
let number = 3;

arr.forEach((elm) => {
	if (elm === number) { // elm이 3이 될 경우
    	console.log(true); // true
    }
})

// 📝 includes
// 주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는지 boolean식으로 확인하는 내장함수

const arr = [1,2,3,4];
let number = 3; // "3"; 이면(문자형)
console.log(arr.includes(number)); // true (문자형이면 false)


// 📝 indexOf
// 주어진 요소가 존재하는지 안하는지 뿐만 아니라 존재하면 몇번째에 있는지 인덱스를 출력하는 내장함수
// 전달받은 인자와 일치하는 값의 인덱스를 반환
// 일치하는 게 하나도 없을 경우 -1 반환
// 존재하는 값을 인자로 전달하면 위치하는 순서를 반환 

const arr = [1,2,3,4];
let number = "3";
console.log(arr.indexOf(number)); // -1


// 📝 findIndex
// 복잡한 객체들도 포함하는 배열일 경우에는 원하는 속성을 갖는 배열의 요소의 인덱스를 갖다주는 내장함수
// findIndex를 이용하면 콜백함수를 사용해서 해당 함수가 true를 반환하는
// 첫번째 요소를 반환하는 로직을 작성할 수 있음

const arr = [
	{ color: "red" },
    { color: "black" },
    { color: "blue" },
    { color: "green" }
];

console.log(arr.findIndex((elm)=>elm.color === "green")); // 3
console.log(arr.findIndex((elm)=>elm.color === "red")); // 0

// 📝 화살표 함수가 익숙하지 않다면..?

console.log(
	arr.findIndex((elm) => {
    	return elm.color === "red";
    })
); // 0

// 주의할 점
// findIndex의 경우 일치하는 조건의 요소가 2개있을 경우 가장 먼저 만나는 인덱스를 반환함
// (처음부터 끝까지 순회하면서 조건에 일치하는 첫번째 인덱스를 반환하므로)


// 📝 찾고자하는 요소에 직접 접근하고 싶다 배열의 인덱스 활용

const arr = [
	{ color: "red" },
    { color: "black" },
    { color: "blue" },
    { color: "green" },
    { color: "blue" }
];

const idx = arr.findIndex((elm)=>elm.color === "green");

console.log(arr[idx]); // {color:"green"};


// 📝 find
// 이 조건을 만족하는 요소 자체를 반환받음

const element = arr.find((elm)=>elm.color === "blue");

console.log(element); // {color:"blue"};

// 📝 filter
배열을 필터링하기

const arr = [
	{ num: 1, color: "red" },
    { num: 2, color: "black" },
    { num: 3, color: "blue" },
    { num: 4, color: "green" },
    { num: 5, color: "blue" }
];

console.log(arr.filter((elm)=>elm.color === "blue"));
// (2) [Object, Object] (0: Object 1: Object) ㄴ num: 3 color: "blue"

// 2개의 객체가 출력되었는데 이런 식으로 filter라는 메서드는
// 전달한 콜백함수가 true를 반환하는 모든 요소를 배열로 반환하는 내장함수임 



// 📝 slice
// 배열을 싹뚝 자르기

const arr = [
	{ num: 1, color: "red" },
    { num: 2, color: "black" },
    { num: 3, color: "blue" },
    { num: 4, color: "green" },
    { num: 5, color: "blue" }
];

console.log(arr.slice((0,2)); // 첫번째 인자 begin, 두번째 인자 end라고 함

// (2) [Object, Object]
// slice 메서드는 end에서 1개를 뺀거까지 반환함. end에 명시된 것은 반환하지 않음
// 따라서 새로운 배열로 0~1까지만 반환 



// 📝 concat
// 배열을 붙이기

const arr1 = [
	{ num: 1, color: "red" },
    { num: 2, color: "black" },
    { num: 3, color: "blue" }
];

const arr2 = [
    { num: 4, color: "green" },
    { num: 5, color: "blue" }
];

console.log(arr1.concat(arr2));
// (5) [Object, Object, Object, Object, Object]
// arr1과 arr2를 붙여서 새로운 하나의 배열로 반환



// 📝 sort
// 문자형 배열을 정렬하기

let chars = ["나", "다", "가"];

chars.sort(); // 사전 순으로 원본 배열을 정렬함

console.log(chars); // (3) ["가", "나", "다"] 



// 📝 비교함수
// 숫자 배열을 정렬하기

let numbers = [0,1,3,2,10,30,20];

// sort는 문자열을 기준으로 정렬함
// 숫자 배열도 정렬하려면 비교함수를 만들어서 넣어준다
// 비교함수는 기본적으로 두개의 값을 비교해서 3가지 중 하나의 값을 내놓아야 함

const compaer = (a,b) => { // a,b를 받았을 때
	// 1. 같다
    // 2. 크다
    // 3. 작다
    
    if (a > b) {
    	// 2번인 크다 (a가 b보다, 큰 값이 뒤에 있어야 함)
    	return 1;
    }
    if (a < b) {
    	// 3번인 작다 (a가 b보다, 작은 값이 앞에 있어야 함)
        return -1;
    }
    
    // 1번인 같다 (같을 때는 자리를 안 바꾼다)
    return 0;
   
    // 오름차순으로 정렬하게 됨
    // 음수와 양수를 바꿔주면 내림차순 가능
}

numbers.sort(compare); // 파라미터로 넣어주고

console.log(numbers);
// (7) [0,1,2,3,10,20,30] 으로 숫자형태로 정렬되어 출력

// 📝 비교함수를 직접 제작해서 sort 메서드에 전달하면
// 객체 배열, 함수 배열, 배열들의 배열도 원하는 대로 정렬할 수 있게 됨

// 📝 join
// 배열 내의 모든 요소를 문자형 형태로 합치기

const arr = ["이정환", "님", "안녕하세요", "또오셨군요"];

console.log(arr[0], arr[1], arr[2], arr[3]); // 이정환 님 안녕하세요 또오셨군요

// 합쳐서 ,로 구분하여 합쳐서 출력
console.log(arr.join()); // 이정환,님,안녕하세요,또오셨군요

// join() 안에 넣는 것으로 구분하여 합쳐서 출력
console.log(arr.join(" ")); // 이정환 님 안녕하세요 또오셨군요
console.log(arr.join("바보");) // 이정환바보님바보안녕하세요바보또오셨군요