[2] Javascript 심화

Truthy & Falsy

1. Falsy한 값 : undefined, null, 0, -0, NaN, "", 0n

2.Truthy 한 값 : 7가지 Falsy 한 값들 제외한 나머지 모든 값

function printName(person) {
  //if(person === undefined || person === null)
  //복잡한 조건문대신 falsy활용
  if (!person) {
    console.log("person의 값이 없음");
    return;
  }
  console.log(person.name);
}

let person = { name: "이정환" };
printName(person);

 

단락 평가

function printName(person) {
  const name = person && person.name;
  console.log(name || "person의 값이 없음");
}

printName();
printName({ name: "이정환" });

 

구조분해 할당

let person = {
  name: "이정환",
  age: 27,
  hobby: "테니스",
};

const func = ({ name, age, hobby, extra }) => {
  console.log(name, age, hobby, extra);
};

func(person);	//이정환 27 테니스 undefined

 

Spread 연산자, Rest 매개변수

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

let arr1 = [1, 2, 3];
let arr2 = [4, ...arr1, 5, 6];

let obj1 = {
  a: 1,
  b: 2,
};
let obj2 = {
  ...obj1,
  c: 3,
  d: 4,
};

console.log(obj2);	//{a:1, b:2, c:3, d:4}

2. Rest : 나머지 매개변수

let arr1 = [1, 2, 3];
function funcB(one, ...ds) {
  console.log(ds);	//[2, 3]
}

funcB(...arr1);

 

원시타입 vs 객체타입

let a1 = {name:"홍길동"};
let a2 = a1;
let a3 = {...a1};

//얕은 비교
console.log(a1 === a2);	//true
console.log(a1 === a3);	//false

//깊은 비교
console.log(JSON.stringify(a1) === JSON.stringfy(a3);	//true

 

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

1. 배열순회

let arr = [1, 2, 3];
//for of 반복문
for (let item of arr) {
   console.log(item);	
   //1
   //2
   //3
}

2. 객체순회

let person = {
  name: "이정환",
  age: 27,
  hobby: "테니스",
};
for (let key in person) {
  const value = person[key];
  console.log(key, value);
  //name 이정환
  //age 27
  //hobby 테니스
}

 

배열메서드

1. 요소 조작 : push, pop, shift, unshoft, slice

//push : 배열의 맨 뒤에 새로운 요소를 추가하는 메서드
let arr1 = [1, 2, 3];
const newLength = arr1.push(4, 5, 6, 7);

console.log(arr1); 	//[1,2,3,4,5,6,7]
console.log(newLength);	//7, 변환된 길이의 결과값 반영


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

console.log(arr2); 	//[1,2,3] ?????????????
console.log(poppedItem);	//2


//shift : 배열의 맨 앞에 있는 요소를 제거, 반환, push보다 느림
let arr3 = [1, 2, 3];
const shiftedItem = arr3.shift();

console.log(arr3); 	//[2,3]
console.log(shiftedItem);	//1 : 제거된아이템


//unshift : 배열의 맨 앞에 새로운 요소를 추가하는 메서드, pop보다 느림
let arr4 = [1, 2, 3];
const newLength2 = arr4.unshift(0);

console.log(arr4); 	//[0,1,2,3]
console.log(newLength2);	//4


//slice : 마치 가위처럼, 배열의 특정 범위를 잘라내서 새로운 배열로 반환
let arr5 = [1, 2, 3, 4, 5];
let sliced = arr5.slice(2, 5);
console.log(sliced);	//[1,2] : 2번~ (5-1)까지 slice
console.log(arr4);	//[1, 2, 3, 4, 5] : 그대로 유지됨

let sliced2 = arr5.slice(2);	//[3,4,5]
let sliced3 = arr5.slice(-3);	//[3,4,5]


//concat : 두개의 서로 다른 배열을 이어 붙여서 새로운 배열을 반환
let arr6 = [1, 2];
let arr7 = [3, 4];

let concatedArr = arr6.concat(arr7);
console.log(concatedArr);	//[1,2,3,4]

2. 순회와 탐색 : forEach, includes, indexOf, findIndex, find

//forEach :모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드
let arr1 = [1, 2, 3];

arr1.forEach(function (item, idx, arr) {
  console.log(idx, item * 2);
  //0 2
  //1 4
  //2 6
});


//includes : 배열에 특정 요소가 있는지 확인하는 메서드
let arr2 = [1, 2, 3];
let isInclude = arr2.includes(3);	//true
let isInclude = arr2.includes(10);	//false


//indexOf : 특정 요소의 인덱스(위치)를 찾아서 반환하는 메서드, 얕은비교
let arr3 = [2, 2, 2];
let index = arr3.indexOf(2);	//0
let index = arr3.indexOf(20);	//-1


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


//find : 모든 요소를 순회하면서 콜백함수를 만족하는 요소를 찾는데, 요소를 그대로 반환
let arr5 = [
  { name: "이정환" },
  { name: "홍길동" },
];

const finded = arr5.find(
  (item) => item.name === "이정환"
);

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

3. 배열 변형

//filter : 기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환
let arr1 = [
  { name: "이정환", hobby: "테니스" },
  { name: "김효빈", hobby: "테니스" },
  { name: "홍길동", hobby: "독서" },
];

const tennisPeople = arr1.filter(
  (item) => item.hobby === "테니스"
);
//{ name: "이정환", hobby: "테니스" },
//{ name: "김효빈", hobby: "테니스" }


//map : 배열의 모든 요소를 순회하면서, 각각 콜백함수를 실행하고 그 결과값들을 모아서 새로운 배열로 반환
let names = arr1.map((item) => item.name);


//sort : 배열을 사전순으로 정렬하는 메서드
let arr3 = ["b", "a", "c"];
arr3.sort();	//['a','b','c']

let arr3 = [10, 3, 5];
arr3.sort((a, b) => {
  if (a > b) {    
    return -1;	// a가 b 앞에 와라 : b,a배치
  } else if (a < b) {    
    return 1;	// b가 a 앞에 와라 : a,b배치
  } else {    
    return 0;	// 두 값의 자리를 바꾸지 마라
  }
});


//toSorted : 정렬된 새로운 배열을 반환하는 메서드
let arr5 = ["c", "a", "b"];
const sorted = arr5.toSorted();	//['a','b','c']


//join : 배열의 모든 요소를 하나의 문자열로 합쳐서 반환하는 그런 메서드
let arr6 = ["hi", "im", "winterlood"];
const joined = arr6.join(" ");	//구분자 추가
console.log(joined);	//hi im winterlood

 

Date

//Date 객체를 생성하는 방법
let date1 = new Date(); // 생성자(new와 함께 새로운 객체 생성)
let date2 = new Date(1997, 1, 7, 23, 59, 59);	//Tue Jan 07 1997 23:59:59


//타임 스탬프 : 특정 시간이 "1970.01.01 00시 00분 00초"(UTC)로 부터 몇 ms가 지났는지를 의미하는 숫자값
let ts1 = date1.getTime();
let date4 = new Date(ts1);	//date4 = ts1


//시간 요소들을 추출하는 방법
let year = date1.getFullYear();
let month = date1.getMonth() + 1;	//js의 월은 0부터 시작
let date = date1.getDate();

let hour = date1.getHours();
let minute = date1.getMinutes();
let seconds = date1.getSeconds();


//시간 수정하기
date1.setFullYear(2023);
date1.setMonth(2);
date1.setDate(30);
date1.setHours(23);
date1.setMinutes(59);
date1.setSeconds(59);


//시간을 여러 포맷으로 출력하기
console.log(date1.toDateString());	//시간제외
console.log(date1.toLocaleString());	//현지화 형태

 

동기와 비동기

동기 : 순차적 실행, JS(단일 쓰레드)

비동기 : 동시 실행

console.log(1);

setTimeout(() => {
  console.log(2);
}, 3000);

console.log(3);

//1 3 2

: 비동기 작업은 JS엔진이 아닌 Web APIs에서 실행됨

 

비동기 작업 처리하기

1. 콜백함수

function add(a, b, callback){	//2) 여기 callback에 남김
  setTimeout(() => {
    const sum = a + b;
    callback(sum);	//1) 결과 3을 받아서
  }, 3000);
}

add(1, 2, (value) => {	//3) 그럼 여기서 받아옴
  console.log(value);	//3
});

2. Promise : 비동기 작업을 효율적으로 처리할 수 있도록 도와주는 JS 내장 객체

const promise = new Promise((resolve, reject) => {
  //비동기 작업 실행함수, executor
  setTimeout(() => {
    const num = 10;
    if(typeof num === "number"){
      resolve(num + 10);
    }else{
      reject("숫자아님");
    }
  }, 2000);
});

//then메서드
promise
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  });

3. Async&Await

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

await : async 함수 내부에서만 사용이 가능, 비동기 함수가 다 처리되기를 기다리는 역할

async function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: "이정환",
        id: "winterlood",
      });
    }, 1500);
  });
}

async function printData() {
  const data = await getData();
  console.log(data);
}

printData();

 

 

 

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 | 이정환 Winterlood - 인프런