[JavaScript] 객체에 대해 알아보기

* 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다.

(섹션 2 : 44~46)

 

 

 

 

---

 

 

 

 

 

객체란?

 

키-값으로 구조화된 그룹화된 데이터

 

데이터를 그룹화하는 데에 사용한다.

 

 

 

 

객체 생성 방법

 

const 객체 이름 = {키: 값, 키: 값, ... };

 

* 값은 어떤 것이든 가능하다. 문자열, 숫자, 배열, 다른 객체 등

 

 

 

 

사용 예시 코드

 

 

const logEntry = {
    operation: "ADD",
    prevResult: initialResult,
    number: enteredNumber,
    result: currentResult,
  };

 

 

 

 

객체 사용 방법

 

• 객체 전체를 사용할 때

logEntries.push(logEntry);
  console.log(logEntry);

 

 

결과는 다음과 같이 나온다.

 

 

 

 

• 객체 내의 데이터에 접근할 때

console.log(logEntry.operation);

 

 

점 표기법을 사용한다.

 

객체의 이름.객체 내의 프로퍼티 이름

* 프로퍼티: 키-값 쌍 또는 키

 

 

결과는 다음과 같이 나온다.

 

 

logEntry 객체의 operation에 접근했기 때문에 operation의 값인 ADD가 나온다.

 

 

 

 

 

 

📝 전체 코드

 

 

const defaultResult = 0;
let currentResult = defaultResult;
let logEntries = [];

// Gets input from input field
function getUserNumberInput() {
  return parseInt(userInput.value);
}

// Generates and writes calculation log
function createAndWriteOutput(operator, resultBeforeColc, calNumver) {
  const calcDescription = `${resultBeforeColc} ${operator} ${calNumver}`;
  outputResult(currentResult, calcDescription); // from vendor file
}

function add(num1, num2) {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  currentResult += enteredNumber;
  createAndWriteOutput("+", initialResult, enteredNumber);
  const logEntry = {
    operation: "ADD",
    prevResult: initialResult,
    number: enteredNumber,
    result: currentResult,
  };
  logEntries.push(logEntry);
  console.log(logEntry.operation);
  console.log(logEntry);
}

function subtract() {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  currentResult -= enteredNumber;
  createAndWriteOutput("-", initialResult, enteredNumber);
}

function multifly() {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  currentResult *= enteredNumber;
  createAndWriteOutput("*", initialResult, enteredNumber);
}

function divide() {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  currentResult /= enteredNumber;
  createAndWriteOutput("/", initialResult, enteredNumber);
}

addBtn.addEventListener("click", add);
subtractBtn.addEventListener("click", subtract);
multiplyBtn.addEventListener("click", multifly);
divideBtn.addEventListener("click", divide);