2024.05.10

리액트를 시작하기 전 마지막으로 자주 사용되는 문법들을 정리했다

객체 메서드

• Object.keys(Obj) 객체의 key들을 추출
• Object.values(Obj) 객체의 value들을 추출
• Object.entries(Obj) key : value (한 쌍)을 배열 형식으로 만듬
• Object.assign(Obj, Obj2) 원본 객체에 추가적인 객체의 속성을 추가함

const user = { name : 'Kim' }
const userAge = { age : 30 }
Object.assign(user, userAge)
console.log(user) // name : Kim, age : 30

배열 메서드

map( )

원본 배열에서 각 요소를 가공한 새로운 배열을 리턴하는 함수

const numbers = [1,2,3,4,5]
const squared = numbers.map((n) => n * n)
console.log(squared)  // 1,4,9,16,25

filter( )

주어진 함수에 테스트를 통과하는 모든 요소를 배열로 만드는 함수

const numbers = [1,2,3,4,5]
const evenNumbers = numbers.filter((num) => num % 2 === 0)
console.log(evenNumbers)  // 2,4

reduce( )

배열의 각 요소에 대해 주어진 함수를 실행하고 결과를 누적해서 반환

const data = [1,2,3,4,5]
const result = data.reduce(function(a,b){
	console.log('누적된 값 :' + a)  // 0, 1, 3, 6, 10 순서대로 누적됨
	console.log('일반 값 :' + b)   // 1, 2, 3, 4, 5
    return a + b
}, 0)  // 초기값 = 0
console.log(result)  // 15

sort( )

배열을 정렬 ❗️ 원본 배열 자체를 바꿔버림

const number = [40, 100, 1, 5, 25]
number.sort()
console.log(number)  // 1, 100, 25, 40, 5  -> sort()안에 아무것도 안넣으면 문자열로 간주하고 정렬
number.sort(function(a, b){ return a - b})  // a - b 오름차순
console.log(number)  // 1, 5, 25, 40, 100
number.sort((a, b) => b - a)  // b - a 내림차순
console.log(number)  // 100, 40, 25, 5, 1

Spread Operators

배열이나 객체의 { }, [ ] 를 없애고 값을 뿌려준다고 생각하면 된다
배열이나 객체를 복사 또는 합칠 때 사용한다

const first = [1,2,3]
const second = [4,5,6]
const combineArray = [...first, ...second]  // [1,2,3,4,5,6]과 같다

❗️ 새로운 객체를 만들어 불변성을 유지할 수 있다

const user = { name : 'Kim' }
const newUser = user
newUser.name = 'Choi'
console.log(user, newUser) // 'Choi', 'Choi'

user와 newUser 모두 같은 데이터 주소를 참조하기 때문에 user의 값도 변경된다

const user = { name : 'Kim' }
const newUser = {...user}
newUser.name = 'Choi'
console.log(user, newUser) // 'Kim', 'Choi'

❗️ key가 중복되면 뒤의 객체 key를 덮어씌운다

const user1 = { name : 'Kim', age : 25 }
const user2 = { name : 'Choi', email : 'abc@gmail.com' }
const mergeUser = {...user1, ...user2}
console.log(mergeUser) // name : 'Choi', age : 25, email : 'abc@gmail.com'

Rest Operators

나머지 값을 활용해 연산을 함
함수의 매개변수, 객체 분해 할당 시, 여러 값을 그룹화 할 때

function sum(...numbers){
	return numbers.reduce((acc, cur) => acc + cur)
}
const result = sum(1,2,3,4,5)
console.log(result)  // 15

const person = {
	name : 'Kim',
    age : 30,
    country : 'Korea'
}
const { country, ...rest } = person  // country를 제외한 나머지 값을 ...rest로 묶음
console.log(rest)  // name : Kim, age : 30

Destructuring (객체 구조 분해)

객체는 key를 따라가기 때문에 매개변수의 순서를 변경해도 상관없다

const movie = {
	title : 'Movie',
    director : 'Kim',
    release : {
    	year : 2024,
        month : "July"
    }
}
const { title, release : {year} } = movie
console.log(title, year)  // Movie, 2024

배열은 인덱스 번호를 따라감

const numbers = [1,2,3,4,5]
const [firstNumber, , thirdNumber] = numbers
console.log(firstNumber, thirdNumber)  // 1, 3

단축평가

논리연산자를 활용하여 평가를 한다

논리합 연산자 - ||

만약 || 앞의 값이 falsy한 값이면 || 뒤의 값을 반환

const person = { name : 'Kim' }
const getUserAge = (user) => {
	// !를 붙여주면 반대를 의미함
	if(!user.age) {
    	return "정보가 없습니다"
    } else {
    	return user.age
    }
}
console.log(getUserAge(person))  // 정보가 없습니다

if 문을 return user.age || "정보가 없습니다"로 함축하여 사용가능하다

논리곱 연산자 - &&

왼쪽, 오른쪽 변을 비교하여 왼쪽 변이 truthy한 값일 때 오른쪽 변을 평가

const loggedIn = true
loggedIn && console.log('로그인 성공')  // 로그인 성공

Optional chaining - ?

const user = {
	information : {
    	name : 'Kim',
        details : {
        	age : 30,
            location : "서울"
        }
    }
}
console.log(user.profile.detail.age)  // 콘솔에 에러 메세지가 뜸
console.log(user.profile?.detail.age)  // undefined

null 병합 연산자 - ??

왼쪽 변이 null 또는 Undefined일 경우 오른쪽 변을 평가

• 만약 왼쪽 변이 null 또는 Undefined가 아닐 경우 왼쪽 변을 출력

let date = '1'
console.log(data ?? "데이터 없음")  // 1

모듈

모듈은 코드를 캡슐화 하고 다른 자바스크립트 파일에서 쉽게 재사용 할 수 있게 하는것

• 기능적으로 연관된 코드를 묶어서 관리할 수 있다

모듈 import 방식은 CommonJS 방식과 ES6 방식이 있다

❗️ 모듈을 사용 해야하는 이유

• script태그를 사용하여 자바스크립트 파일을 로드하는 방식은 파일 간의 종속성과 로딩 순서를
  수동으로 관리해야 하는데 이런 방식은 프로젝트 규모가 커질수록 종속성을 추적하고
  관리하기 어려워진다
• 모듈 시스템을 사용하면 각 모듈이 필요로 하는 종속성을 내부적으로 선언하여 파일을 로드하는
  순서에 신경을 쓸 필요가 없다
• 모듈은 자체적인 스코프를 가지기 때문에 모듈 외부에서 모듈 내부의 함수에 직접 접근할 수 없다
• 모듈 시스템을 통해 필요한 기능만 선택적으로 불러올 수 있다

CommonJS 모듈

주로 서버 사이드에서 사용한다

• CommonJS 모듈은 파일이 로컬 디스크에 있기 때문에 동기적으로 로딩된다
• 모듈은 module.exports 객체를 통해 전체 모듈을 하나의 객체로 내보내며 객체를 요구하는
  다른 모듈은 require( )함수를 사용하여 가져온다

// /lib/math.js
module.exports = {
	add : (x, y) => x + y,
    sub : (x, y) => x - y
}

// app.js
const math = require('./lib/math')
console.log(math.add(2,3)) // 5

ES6 모듈

// math.js
export const add = (a, b) => a + b
export const sub = (a, b) => a - b

// abb.js
import { add, sub } from './math.js'
console.log(add(2,3)) // 5

고급 모듈 기능

이름 바꾸기

• 원래 모듈 이름을 as 키워드로 바꾸는 것

// math.js
export function multiply(a, b) {
	return a * b
}

// app.js
import { multiply as mul } from './math.js'

기본 내보내기

• 한 모듈에서 하나의 기본 값을 내보내고 이것을 쉽게 가져올 수 있음
  모듈 당 하나의 주요 기능을 내보낼 때 유용함

// math.js
export default function add(a,b){
	return a + b
}

// app.js
import add from './main.js'
console.log(add(1,5)) // 6

전체 모듈 내용 가져오기

import * as MathFucntions from './math.js'

Promise

• 기존의 복잡한 프로미스 체인을 간결하고 동기적인 흐름으로 작성할 수 있게 도와준다
• 자바스크립트에서 비동기 작업의 최종 완료 또는 실패를 나타내는 객체이다
• Promise 객체를 사용하면 비동기 작업의 결과에 따라 콜백 함수를 연결할 수 있으며
  메소드를 이용해 연속적으로 결과를 처리할 수 있다

  ❗️ 주로 서버에서 데이터를 요청하고 받아오는 HTTP 요청 처리에 사용되며 파일 시스템 작업을
  비롯한 다양한 비동기 작업에 활용된다

const myPromise = new Promise(function(resolve, reject)) {
	// 비동기 작업을 수행하고
    if(/*작업을 성공했다면*/) {
    	resolve('Success')
    } else {
    	reject('Error)
    }
}
myPromise
  .then(function(value){
  	// 성공(resolve)한 경우
  	console.log(value)  // Success
  })
  .catch(function(error){
  	// 실패(reject)한 경우
    console.log(error) // Error
  })

async & await

• async 함수는 항상 Promise를 반환한다
• await 함수는 프로미스의 완료를 기다리는 동안 함수의 실행을 일시적으로 중단하고
  프로미스가 해결되면 자동으로 함수의 실행을 재개할 수 있다
  ❗️ 비동기 코드의 동기적 표현이 가능하다

async function fetchData(){
	return 'Data loaded'  // return Promise.resolve('Data loaded')와 같다
}

async function fetch(){
	try{
    	const data = await fetch('url')  // 1번
        const json = await data.json()   // 2번
        console.log(json)                // 3번
    } catch (err) {
    	console.error('Data loading failed', err)
    }
}
fetch()

1번부터 3번까지 순차적으로 실행되는데 코드 하나가 실행이 끝나야 다음 순서의 코드가 실행된다