JS 문법 복습

Attribute 와 Property 차이점

Attribute : HTML의 속성 , element에 id / class 와 같은 추가적인 정보 , 정적임

Property : DOM의 속성 , 동적임

둘이 연결은 되어있지만 Property값을 변경하면 DOM객체만 업데이트 되고 HTML은 업데이트 되지 않아

Attribute 값은 그대로임

 

// Destructuring 구조분해할당

// 배열은 위치(index) , 객체는 key가 중요함

const person = {

  name: "르탄이",

  age: 25,

  job: "개발자",

};

const { name, age } = person;

console.log(`hi ${name}!, ${age}!!`);

const movie = {

  title: "inception",

  director: "Christopher Nolan",

  release: {

    year: 2010,

    month: "July",

  },

};

const {

  title,

  release: { year },

} = movie;

console.log(`movie! ${title}!/${year}!!!`);

const numbers = [10, 20, 30, 40, 50];

const [first, , third] = numbers;

console.log(first);

console.log(third);

//

function confirmReservation(user) {

  const { name, roomType, date: firstDate } = user;

  return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`;

}

const userInfo = {

  name: "James",

  roomType: "Deluxe",

  date: "2023-05-30",

};

const result = confirmReservation(userInfo);

console.log(result);

// Spread Operators : 배열,객체가 [] {} 를 벗어버리고 요소들이 펼쳐짐

const originalUser = {

  name: "르탄이",

  age: 28,

};

// 어딘가로 복사 -> 같은 데이터 위치를 참조하여 복사를 변경하면 원본이 같이 변함 -> 불변성이 아님

// const updatedUser = originalUser;

// updatedUser.name = "르순이";

// console.log("원본 : ", originalUser);

// console.log("복사 : ", updatedUser);

// 불변성 유지 -> 여기서 SpreadOperators 사용

const updatedUser = { ...originalUser };

updatedUser.name = "르순이";

console.log("원본 : ", originalUser);

console.log("복사 : ", updatedUser);

const f = [1, 2, 3];

const s = [4, 5, 6];

// [1,2,3,4,5,6]

const combinedArray = [...f, ...s];

console.log(combinedArray);

const obj1 = { name: "르탄이", age: 25 };

const obj2 = { name: "르순이", email: "rsoony@sparta.com" };

// 키가 중복될 시 뒷 객체가 앞 객체를 덮어씌움

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

console.log(mergedObject);

// 복사된 객체의 키 값을 변경해도 원본 객체의 키 값이 유지됨

mergedObject.name = "원장님";

console.log(obj1);

console.log(obj2);

// Rest Operator는 Spread Operator와 비슷하다 -> ...변수명

// Spread는 객체나 배열을 복사하거나 합칠 때 사용

// Rest는 함수의 매개변수로 쓰임 -> 매개변수로 쓰기 용이하게 배열로 묶어줌

function sum(...numbers) {

  console.log("here : ", numbers);

  return numbers.reduce((acc, cur) => acc + cur);

}

const r = sum(1, 2, 3, 4, 5);

console.log(r);

//객체 분해 할당 시 여러 값을 그룹핑 시 쓰임

const p = {

  name: "John",

  age: 30,

  country: "USA",

  occupation: "Developer",

};

// const { occupation, name2, age2, country } = person;

// 객체를 분해하여 일부만 할당 할 때에도 쓰임

const { occupation, ...rest } = person;

console.log("rest : ", rest);

 

// optional chaining : 객체의 속성에 접근 시 속성이 없더라도 에러 대신 undefined반환

// -> 에러가 발생하지 않으므로 안전하게 접근 가능

const user = {

  profile: {

    name: "르탄이",

    details: {

      age: 30,

      location: "서울시 강남구",

    },

  },

  printHello: () => console.log("Hello"),

};

const result = user.printHello1?.();

console.log(result);

// Null 병합 연산자 ??

let userLocation = null;

// console.log(userLocation ? userLocation : "no!");

// ??을 기준으로 좌변의 값이 존재한다면 좌변 , null undefined라면 우변

// 즉 ??을 기준으로 값을 평가한다라는 표현을 사용한다

console.log(userLocation ?? "no!");

function displayPreferences(preferences) {

  // textLength가 0일 경우 50이 할당됨

  const textLength = preferences.textLength || 50;

  console.log(`Text Length: ${textLength}`);

  // itemsPerPage가 null 또는 undefined일 때만 10이 할당됨

  const itemsPerPage = preferences.itemsPerPage ?? 10;

  console.log(`Items Per Page: ${itemsPerPage}`);

}

const userPreferences = {

  textLength: 0, // 0이 유효한 값이지만 || 연산자로 인해 50이 출력됨

  itemsPerPage: null, // null 값에 대해 ?? 연산자로 인해 10이 출력됨

};

displayPreferences(userPreferences);

 

//모듈의 필요성

// 명확환 종속성 관리 : script 파일간 종속성 및 로딩 순서를 수동 관리

// -> 버그 발생 가능성 증가 / 모듈은 종속성을 내부적으로 선언

// -> 개발자는 파일 로드 순서 신경X

import $ from "jquery";

import plugin from "plugin"; // 자동으로 jQuery에 대한 의존성을 처리

import app from "app"; // 모든 의존성이 충족되면 실행

// 코드 캡슐화와 충돌 방지 : 모듈은 자체적인 스코프를 가짐

// -> 모듈 외부에서 내부의 변수에 직접 접근X

// -> 전역 변수의 오염 방지 및 충돌 방지

// 여러 스크립트에서 동일 함수 이름 사용 시에도 각 모듈 내에서만 유효

// module1.js

export function conflictFunction() {

  console.log("Module 1의 함수");

}

// module2.js

export function conflictFunction() {

  console.log("Module 2의 함수");

}

// app.js 이부분에서 이름이 같아도 각 묘듈에서 다름의 예시

import { conflictFunction as function1 } from "./module1";

import { conflictFunction as function2 } from "./module2";

function1(); // "Module 1의 함수"

function2(); // "Module 2의 함수"

// 효율적인 코드 로딩 : 필요한 기능만 선택적으로 로드 가능

// -> 앱 초기 로딩 시간 단축 , 코드 스플리팅 사용 시 필요 코드만 동적 로드 가능

// -> 위와 같은 지연 로딩(lazy-loading)은 큰 규모일수록 성능 및 자원 사용 최적화됨

// 동적으로 모듈 로드 (예: 사용자가 특정 기능을 활성화했을 때)

button.addEventListener("click", (event) => {

  import("./heavyModule.js")

    .then((module) => {

      module.heavyFunction();

    })

    .catch((err) => {

      console.error("모듈 로딩에 실패했습니다.", err);

    });

});

// 한 모듈에서 export default를 하나 실행하고 import는 임의의 이름으로 사용 가능

// 대신 파일 주소 및 이름은 명확해야함

// math.js

export default function multiply(x, y) {

  return x * y;

}

// app.js

import multiply from './math.js';

console.log(multiply(6, 7));  // 42

// export default 시 모듈이름 변경은 자유

// utils.js

export default function square(x) {

  return x * x;

}

// main.js

import mySquare from './utils.js';

console.log(mySquare(4));  // 출력: 16

// 모듈의 모든 내용을 객체 형태로 내보냄

// app.js

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

console.log(MathFunctions.add(10, 5));       // 15

console.log(MathFunctions.multiply(10, 5));  // 50

 

// Promise : 비동기 작업의 최종 완료 및 실패를 나타내는 객체

// -> 비동기 작업 시 결과값을 나중에 받기 위한 형태

// 주로 서버로부터 request 후 response 하는 HTTP 요청 처리에 사용

// Pending(대기) , Fulfilled(이행) , Rejected(거부) 3가지 상태 중 하나를 가짐

// .then() , .catch() , .finally() 메소드 활용하여 결과 연속 처리

// -> 콜백지옥 줄이고 코드 가독성 증가

const myPromise = new Promise(function (resolve, reject) {

  // 비동기 작업을 수행하고

  if (true) {

    resolve("Success!");

  } else {

    reject("Error!");

  }

});

myPromise

  .then(function (value) {

    // 성공(resolve)한 경우 수행

    console.log(value); // 'Success!'

  })

  .catch(function (error) {

    // 실패(reject)한 경우 수행

    console.error(error); // 'Error!'

  });

// Async 함수는 Promise를 반환함

async function fetchData() {

  return "Data loaded";

}

// async function fetchData() {

//  return Promise.resolve('Data loaded');

// }

fetchData().then(console.log); // 'Data loaded'

// await 키워드는 Promise의 완료를 기다리는 동안 함수의 실행 일시 중단

// -> Promise가 해결되면 자동으로 함수 실행 재개 (동기화 이후 비동기화 순차 실행)

// Promise가 반환되므로 await으로 처리를 기다리는 과정을 꼭 신경써야함

function fetchData() {

  return fetch("https://api.example.com/data")

    .then((response) => response.json())

    .then((data) => console.log(data))

    .catch((error) => console.error("Data loading failed", error));

}

fetchData();