객체, 디스트럭쳐링, spreadOperators, rest operator,모듈 , 단축평가, await, async 공부내용 정리

재사용성 및 유지보수 향상 중요!!

스코프에 따른 분류(유효범위)

• 글로벌 스코프 : 어디서든 사용가능
• 블록 스코프 : 중괄호 안
• 함수 스코프 : function

변수

const , let , var
재할당 가능성에 대한 분류
const - 상수(값이 변경되지 않는 변수)

변수선언은 가장 먼저 const 변경될 때에만 let사용
var는 호이스팅 현상으로 글로벌 스코프 임으로 사용을 지양해야한다.

객체

객체 접근

• 괄호 표기법
• 점 표기법

객체의 수정, 삭제

user.email = "jay@gmail.com"; // 추가
user.age = 31; //수정
delete user.isAdmin;

객체 key값

const keys = Object.keys(user);
const values = Object.values(user);
const entries = Object.entries(user)

Object.assign(user,userDetails)
assign : 객체를 합칠수 있다.

배열메서드(return 이 꼭 필요)
map()
filter()
reduce() : 누적기
sort()

Template Literals

:템플릿 리터럴은 변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법

• 베틱 ${} 로 변수명 사용 가능

Destructuring

• de : not
  structuring : 구조
• 구조를 찢는다.
• 인자의 구조를 찢어 변수화 시켜주는 것
• 객체의 key가 중요하다.
• 배열의 디스트럭쳐링은 순서가 중요하다 (index가 key)

// Destructuring
function greet({ name, age }) {
  console.log(`안녕하세요 제 이름은 ${name}입니다. 나이는 ${age}에요`);
}

const person = {
  name: "르순이",
  age: 28,
};

greet(person);

//배열의 디스트럭쳐링 [index값중요!]
const colors = ["red", "green", "blue"];
const [firstColor, secondColor] = colors;

Spread Operators

: 빼열의 중괄호를 없애주고 결과값을 복사
(합칠 때도 많이 쓰여짐)
: 불변성을 유지하기 위해서 많이 쓰인다.

const originalUser = {
  name: "르탄이",
  age: 28,
};

const updatedUser = { ...originalUser };
updatedUser.name = "르순이";

console.log("원본 =>", originalUser);
console.log("복사본 =>", updatedUser);

const first = [1, 2, 3];
const second = [4, 5, 6];

const combinedArray = [...first, ...second];

console.log(combinedArray);

const obj1 = { name: "르탄이", age: 25 };
const obj2 = { name: "르순이", email: "rssony@sparta.com" };

const mergeObj = { ...obj1, ...obj2 };

키가 중복되면 뒤에 있는 객체가 앞에있는 객체의 키 값을 덮어쓴다.

rest operator

1. 함수의 매개변수
2. 객체 분해 할당 시 여러 값을 그룹핑

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

// 배열로 써져 있지 않는 텍스트가 배열로 바뀌어 function sum(...numbers)에 들어간다.

// 구조분해할당
const person = {
  name: "John",
  age: 30,
  country: "USA",
  occupation: "Developer",
};
const { occupation, ...rest } = person;
console.log(rest);
// {name:'john',age:30,country:'usa'}

...rest 구조분해할당에 넣어준 occupation을 뺀 나머지가 출력된다.

화살표함수

const add = (a, b) => a + b;

중괄호가 생기면 return이 꼭 붙어야한다.

삼항연산자

: return a%2 === 0 ? 1 : 0
a가 2로 나누었을 때의 나머지가 0이면
1을 반환하고 아니면 0을 반환

단축평가

1. 논리합연산자 ||
   falsy : false, 0, "", null, undefined, NaN

const getUserName = (user) => {
  return user.name || "신원미상";
};

const person = {
  age: 30,
};
console.log(getUserName(person));

||의미
: user.name 이 falsy한 값이면 신원미상으로 표시해줘.
(좌변이 falsy한 값일때 우변을 평가함)

2. 논리곱 연산자 (&&)

const loggedIn = true;
const userName = "르탄이";

loggedIn && console.log(`환영합니다 ${userName}님`);

좌변이 truthy한 값일 때만 우변을 평가한다.
위의 해석 : 로그인 상태이면 환영합니다 르탄이 님을 출력해줘

optional chaining

// optional chaining

const user = {
  profile: {
    name: "르탄이",
    details: {
      age: 30,
      location: "서울시 강남구",
    },
  },
};

console.log(user.profile?.details.age);

?로 존재하는지를 확인

Null 병합 연산자

: 좌변이 null or undefined인 경우에만 우변을 평가한다.

let userLocation = null;
console.log(userLocation ?? "없는위치");

Modules

모듈은 재사용 가능한 코드 조각을 캡슐화하고 다른 자바스크립트 파일에서 쉽게 재사용할 수 있게 함

ex : 수출한다
모듈 : 함수가 될 수도 있고 변수가 될 수도 있고 객체가 될 수도 있다..!

CommonJS방식

: 주로 서버사이드에서 사용, Node.js의 기본 모듈 시스템

CommonJS특징

1. 동기적 로딩
   : CommonJS모듈은 파일이 로컬 디스크에 있기 때문에 동기적으로 로딩된다. 서버 환경에서는 문제가 되지 않지만 브라우저 환경에서는 네트워크 지연으로 인해 문제가 될 수 있다.
2. 단일 객체 내보내기
   : 모듈은 module.exports 객체를 통해 전체 모듈을 하나의 객체로 내보내며, 이 객체를 요구하는 다른 모듈은 require()함수를 사용하여 가져온다.
3. exports 와 require()이 중요함...!

Import & Export

사용방법
: 함수명이나 변수명 앞에 export 를 붙여서 밖에서 사용할 수 있게 만들어주고 다른 script파일에서 import후 import한 export 변수나 함수명의 위치표시

export const age = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export const ONE = 1;
export const sample = {
  one: 1,
  two: 2,
};

import { add, multiply, ONE, sample } from "./math.js";

사용해야 하는 이유

1. 코드 캡슐화와 충돌방지
2. 복잡하고 보안이 중요한 정보가 있다면
   노출 시키면 안되기 때문에
3. 전역 변수의 오염을 방지할 수 있고 이름이 서로 충돌하는 것을 막아준다.
4. 선택적으로 코드를 가져올 수 있기 때문에
   코드 스플리팅(코드를 잘게 쪼개는 것을 말함)
   지연로딩을 구현하는데 있어서 효과적
   지연로딩 => 대규모 애플리케이션에서 성능과 자원사용을 최적화하는데 매우 효과적이다.

고급 모듈 기능

1. 이름 바꾸기와 기본 내보내기
   1-1 별칭사용(as)

   import {square as sqr} from './utils.js'
   1-2 기본 내보내기와 가져오기
   : 한 모듈에서 하나의 기본 값을 내보내고 이를 쉽게 가져올 수 있다.
   : export default를 통해 내보내진 모듈은 import시 이름변경이 가능하다.
   (주의점! export default로 내보낼 수 있는 건 한 파일에 하나밖에 없다!)

   export default function multiply(x, y) {
     return x * y;
   }
   // app.js
   import multiply from "./math.js";

2. 전체 모듈 내용 가져오기
   2-1 . 전체 내용 가져오기
   => import * as
   모듈의 모든 내보내기를 한 번에 가져올 떄 사용

   import * as MathFunctions from "./math.js";

Promise

: Promise는 JavaScript에서 비동기 작업의 최종완료 또는 실패를 나타내는 객체이다.

Async / Await

: Callback 지옥을 피할 수 있다.

const myPromise = new Promise(function(resolve,reject)){
    // 비동기 작업을 수행하고
    if(/*작없성공*/){
        resolve('success')
    }else{
        reject('Error')
    }
}

myPromise.then(function(value){
    //성공(resolve)한 경우 수행
    console.log(value)
}).catch(function(error){
    // 실패(reject)한 경우 수행
    console.error(error)
})