🔍 JavaScript 심화

한 입 크기로 잘라 먹는 리액트 섹션 3 - JavaScript 심화

Truthy & Falsy

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

1. Falsy한 값

let f1 = undefined;
let f2 = null;
let f3 = 0;
let f4 = -0;
let f5 = NaN;
let f6 = "";
let f7 = 0n; //큰 숫자를 저장하는 값

2. Truthy한 값

Falsy한 값을 제외한 모든 값

단락 평가

첫번쨰 피연산자에서 값을 구할 수 있으면 다음의 피연산자에 접근하지 않는 것

console.log (returnTrue() && returnFalse());

returnTrue에서 값을 구할 수 없는 경우는 returnFalse까지 접근하여 결과를 출력한다.

단락 평가 활용 사례

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

printName(); //person의 값이 없음
printName({ name: "이정환" }); //이정환

printName() 에서는 person은 undefined 값이 할당 되었기에 따라서 name도 undefined값이다. console.log에서는 name 값이 undefined이기 때문에 다음 값에 접근하여, "person의 값이 없음" 이 출력된다.

printName({ name: "개굴히" }) 에서는 name의 값이 개굴히이기 떄문에 console.log에서는 name만 고려하여 게굴히가 출력된다.

구조분해할당

배열이나 객체에서 할당된 값들을 모두 분해하여 변수에 할당하는 값이다.

1. 배열의 구조 분해 할당

let arr = [1, 2, 3];

let [one, two, three, four = 4] = arr;

2. 객체의 구조 분해 할당

let person = {
  name: "김수진",
  age: 22,
  hobby: "야구",
};

let { name, age, hobby} = person;
console.log {name, age, hobby};

3. 객체 구조 분해 할당을 이용해서 함수의 매개변수를 받는 방법

구조 분해 할당 ❌

const func = (person)=>{
	person.name;
    person.age;
    .
    .
    .
}

func(person)

구조 분해 할당을 이용하지 않았을 때는 이런식으로 일일이 person.객체에 접근했어야했다.

구조 분해 할당 ⭕

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

func(person);

구조 분해 할당을 이용하면 간편하게 접근 가능하다.

Spread 연산자와 Rest 매개변수

1. Spread 연산자

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

Spread 연산자 사용 ❌

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

배열이 바뀌면 유지보수가 어려워지게 된다.

Spread 연산자 사용 ⭕

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

spread 연산자 ...를 사용하는 것이 좋다.

2. Rest 매개변수

...rest 매개변수에 함수를 호출하면 나머지 모든 인수들이 다 배열 형태로 저장된다.

function funcB(...rest) {
	console.log(rest);
}

funcB(...arr1); // [1,2,3]

function funcB(...rest) 에서 추가적인 매개변수를 받고 싶다면 function funcB(one, two, ...rest) 로 작성하되, ...rest 가 가장 뒤에 와야한다.

원시타입 vs 객체타입

1. 원시타입

Numver, String, Boolean 등 값 자체로써 변수에 저장되고 복사된다.
가르키는 값이 달리지는 것
불변값이다.

2. 객체타입

Object, Array, Function 등 참조값을 통해 변수에 저장되고 복사된다.
메모리 상에서 값이 아예 달라지는 것
가변값이다.

주의사항
1. 의도치 않게 값이 수정될 수 있다.
얕은 복사 : 객체의 참조값을 복사한다. 원본 객체가 수정될 수 있어서 위험하다.
깊은 복사 : 새로운 객체를 생성하면서 프로퍼티만 따로 복사한다. 원본 객체가 수정될 일이 없어서 안전하다.

2. 객체간의 비교는 기본적으로 참조값을 기준으로 이루어진다.
프로퍼티가 같다고 같은 값이 아니라 참조값을 기준으로 같은 값인지 아닌지 판단하기 때문에, 프로퍼티가 같아도 다른 메모리 상에서 참조한다면 같지 않은 값이다. 참조값이 아닌 프로퍼티를 기준으로 두 객체를 비교하고 싶다면 객체를 문자열로 형변환하는 jsonStringify 내장함수를 이용해서 참조값이 아닌 프로퍼티를 기준으로 비교하게 만들 수 있다.

3. 배열과 함수도 사실 객체이다.
배열&함수 모두 프로퍼티와 메서드를 가질 수 있다.

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

순회란?
배열, 객체에 저장된 여러개의 값에 순서대로 하나씩 접근하는 것을 말함

1. 배열 순회

for of 반복문

let arr = [1,2,3];

for(let item of arr) {
	console.log(item);
}

2. 객체 순회

2.1 Object.keys 사용 -> 객체에서 key 값들만 뽑아서 새로운 배열로 반환

let person = {
  name: "김수진",
  age: 22,
  hobby: "야구",
};

let keys = Object.keys(person);
console.log(keys); // name, age, hobby

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

let values = Object.values(person);
console.log(value); // 김수진, 22, 야구

2.3 for in

for(let key in person) {
	const value = person[key];
	console.log(key, value);  // name 김수진 , age 22, hobby 야구
    
}

배열 메서드 1. 요소 조작

6가지의 요소 조작 메서드

1.1 push

배열의 맨 뒤에 새로운 요소를 추가하는 메서드

배열이름.push(추가하고 싶은 요소들);

1.2 pop

배여릐 맨 뒤에 있는 요소를 제거하고 반환

배열이름.pop();

1.3 shift

배열의 맨 앞에 있는 요소를 제거하고 반환

배열이름.shift();

1.4 unshift

배열의 맨 앞에 새로운 요소를 추가하는 메서드

배열이름.unshift(추가하고 싶은 요소들);

push 와 pop 에 비해 shift 와 unshift 가 느리다.

1.5 slice

가위처럼, 배열의 특정 범위를 잘라내서 새로운 배열로 반환

배열이름.slice(자르고 싶은 첫번째 범위의 인덱스, 자르고 싶은 마지막 범위의 인덱스 + 1);

배열이름.slice(첨부터 몇개까지 자르고 싶다의 인덱스);

배열이름.slice(- 마지막 몇개까지 자르고 싶다의 인덱스);

1.6 concat

두개의 서로 다른 배열을 이어 붙여서 새로운 배열을 반환

배열이름.concat(새로만들 배열);

배열 메서드 2. 순회와 탐색

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

2.1 forEach

모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드

2.2 includes

배열에 특정 요소가 있는지 확인하는 메서드

2.3 indexOf

특정 요소의 인덱스를 찾아서 반환하는 메서드
배열의 요소값이 같다면 앞에 위치한 index값을 출력한다.
조건을 만족하는 요소가 배열에 존재하지 않으면 -1 값을 출력

얕은 비교로 이루어지기 때문에 프로퍼티 기준으로 비교가 이루어지지 않는다.
따라서 이때는 findIndex를 사용해야한다.

2.4 findIndex

모든 요소를 순회하면서, 콜백함수를 만족하는 함수
특정 요소의 인덱스(위치)를 반환하는 메서드
조건을 만족하는 요소가 배열에 존재하지 않으면 -1 값을 출력

프로퍼티 값을 기준으로 비교 시켜줄 수 있다.

2.5 find

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

배열 메서드 3. 변형

5가지의 배열 변형 메서드

3.1 filter

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

3.2 map

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

3.3 sort

뱌열을 사전순으로 정렬하는 메서드

숫자의 대소관계를 따지는 것이 아니라 사전순으로 정렬하기 때문에 대소관계로 정렬하고 싶다면 조건문을 작성해야함.

function compare(a, b) {
  if (a > b) {
    return 1;
  } else if (a < b) {
    return -1;
  } else {
    return 0;
  }
}

let arr = [10, 5, 3];
arr.sort(compare);

console.log(arr); // [3, 5, 10]

3.4 toSorted

정렬된 새로운 배열을 반환하는 메서드

3.5 join

배열의 모든 요소를 하나의 문자열로 합챠서 반환하는 메서드

구분자는 기본이 , 인데, 구분자를 바꾸고 싶다면 배열이름.join(바꾸고 싶은 구분자); 형식으로 작성하면 된다.

Date 객체와 날짜

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

let date1 = new Date(); //생성자 -> () 안이 비어있으면 현재 시간 출력

let date2 = new Date("년도/월/일/시:분:초");

2. 타임 스탬프

특정 시간이 "0000년도.00월.00일 00시 00분 00초"로 부터 몇 ms가 지났는지를 의미하는 숫자값

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

let year = date1.getFullYear();
let month = date1.getMonth() + 1; //달은 0월 부터 시작하기에 +1 해줘야한다. 
let date = date1.getDate();
let hour = date1.getHours();
let minute = date1.getMinutes();
let seconds = date1.getSeconds();

4. 시간 수정하기

date1.setFullYear(2023);
date1.setMonth(2); //3월을 의미
date1.setDate(30);
date1.setHours(23);
date1.setMinutes(59);
date1.setSeconds(59);

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

console.log(date1.toDateString()); // Fri jul 04 2025
console.log(date1.toLocaleString()); // 2025.07.04

동기와 비동기

동기

작업을 순서대로 하나씩 처리
Thread: 작업을 직접 실행하고 또 처리해주는 역할
단점: 시간이 오래 걸린다.

비동기

자바스크립트는 멀티 thread 방식으로 해결 불가능(thread 하나만 존재)하여, 나타난 방식
앞선 작업들을 종료하지 않고도 다음 작업을 수행할 수 있다.
비동기 작업이 가능한 이유? Web APIs라는 브라우저가 직접 관리하는 별도의 공간에서 따로 실행이 되기 때문이다.

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

콜백함수 비동기 처리

function add(a, b, callback) {
  setTimeout(() => {
    const sum = a + b;
    callback(sum);
  }, 3000);
}

add(1, 2, (value) => {
  console.log(value); // 3
});

add 함수 호출-> setTimeout 함수가 호출-> callback 함수를 3초 뒤에 실행-> callback 함수에서 sum이라는 값을 계산-> 매개변수로 받은 callback함수를 다시 호출-> setTimeout 함수가 끝남-> callback 함수가 한번 더 실행-> 매개변수 3 값이 콘솔에 출력

콜백함수 안 또 다른 콜백함수 (콜백지옥)

orderFood((food) => {
  console.log(food); 

  cooldownFood(food, (cooldownedFood) => {
    console.log(cooldownedFood); 

    freezeFood(cooldownedFood, (freezedFood) => {
      console.log(freezedFood); 
    });
  });
});

콜백함수를 이용해서 받아온 비동기 작업의 결과를 또 다른 비동기 작업의 인수로 넣어주는 코드가 계속 반복이 되다 보면은 콜백 함수 안에서 계속 함수를 호출하게 되면 인덴트(들여쓰기)로 인해 코드가 깊어지면서 가독성 저하 => 콜백지옥

비동기 작업 처리하기 2. Promise

비동기 작업을 효율적으로 처리할 수 있도록 도와주는 자바스크립트의 내장 객체
executor: 실제로 비동기 작업을 실행하는 콜백함수

1. 대기 상태 (Pending)

아직 작업이 완료되지 않은 상태

2. 성공 상태 (Fulfilled)

비동기 작업이 성공적으로 마무리 된 상태
대기 -> 성공 상태 : 해결(resolve)

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log("안녕");
    resolve();
  }, 2000);
});

setTimeout(() => {
  console.log(promise);
}, 3000); // 안녕, [[PromiseState]]: "fulfilled"

PromiseState 내부 프로퍼티의 값 "fulfilled"

3. 실패 (Rejected)

비동기 작업이 실패한 상태
대기 -> 실패 상태: 거부(reject)

예제

const promise = new Promise((resolve, reject) => {

  setTimeout(() => {
    console.log("안녕");
    reject("왜 실패했는지 이유...");
  }, 2000);
});

setTimeout(() => {
  console.log(promise);
}, 3000); //Uncaught (in promise) 왜 실패했는지 이유 ..., [[PromiseState]]: "rejected"

PromiseState 내부 프로퍼티의 값 "rejected"

then 메서드

Promise가 성공하게 되면(resolve 호출), then 메서드에 전달한 콜백 함수 실행 & resolve 의 인수로 전달한 결과 값을 매개변수로까지 제공

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

catch 메서드

Promise가 실패하게 되면(reject 호출), catch 메서드에 전달한 골백 함수 실행 & reject 의 인수로 전달한 결과 값을 매개변수로까지 제공

promise.catch((error) => {
  console.log(error);
}); //num이 숫자가 아닙니다. (코드 생력: reject 함수 결과 값)

then 메서드 & catch 메서드

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

Promise 와 콜백지옥

add10(0)
  .then((result) => {
    console.log(result); 
    return add10(result);
  })
  .then((result) => {
    console.log(result);
  });

Promise는 새로운 프로미스 return(반환)이 가능하다. 반환된 프로미스 객체는 결과값이 된다.

비동기 작업 처리하기 3. async/await

async

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

async function 함수명() //함수를 비동기로 바꿔줌

await

async 함수 내부에서만 사용이 가능
비동기 함수가 다 처리되기를 기달리는 역할
더 이상 then 사용하지 않아도 됨

async function printData() {
	const data = await getData(); 

await는 프로미스의 비동기 작업이 종료되기까지 기다렸다가 종료가 되면 결과 값을 data 변수에 넣어주는 역할을 한다.