230308 - 객체(object) 리터럴, 생성자함수, 속성접근자, 축약

백승연·2023년 3월 9일
1

🚩 object 만드는 법

객체 리터럴(Object literal)

📝 설명

  • 중괄호를 이용하여 객체를 만드는 방법
  • { key: value, key: value }의 형태로 되어 있다.


✒ 사용법

입력

js

let apple = {
  name: "apple",
  display: "🍎",
};

console.log(apple); // { name: "apple", display: "🍎" }

출력

  • 이미지로 대체





Object class (생성자 함수)

📝 설명

  • new Object()를 사용하여 객체를 만드는 방법.
  • 중괄호가 new Object를 축약시켜놓은 것이라고 봐도 됨
  • Object의 첫 글자는 항상 대문자


✒ 사용법

입력

js

let apple = {
  name: "apple",
  display: "🍎",
};

console.log(apple); // { name: "apple", display: "🍎" }
예제1

js

let apple = {
  name: "apple",
  // fruit_display: "🍎" // key값으로 특수문자를 쓸 수 없음 ❌ ($, _는 사용 가능하지만 잘 사용❌)
  "fruit-display": "🍎", // 문자열에서는 특수문자 가능
  1: 200, // key 값은 숫자도 가능 - 맨 앞에 출력
  // ["fruit-display"]: "🍏", // 대괄호는 없는 취급.(위의 빨간 사과가 초록 사과로 변경됨)
  ["fruit-display2"]: "🍏",
};

// 속성, 데이터에 접근하기 위해서 사용
console.log(apple);
console.log(apple.name); // 마침표 표기법 dot notation
console.log(apple["fruit-display2"]); // 대괄호 표기법 braket notation - 대괄호로 불러올 때 .생략 (배열)

// 속성 추가
apple.home = "대구";
console.log("속성 추가", apple);

// 속성 삭제
delete apple["fruit-display2"];
console.log("속성 삭제", apple);

출력

  • 이미지로 대체

예제1


🔗 참고 링크 & 도움이 되는 링크






🚩 속성 접근자

Dot Notation / Bracket Notation

📝 설명

  • 점 또는 괄호로 객체의 속성에 접근한다. 주로 점을 많이 사용함

✒ 사용법

입력

js

const obj = {
  name: "누리",
  age: 4,
};

// 코딩하는 시점에 정적으로 접근 (이미 코딩된 파일 내용을 실행)
console.log(obj.name); // 누리

// 동적으로 속성에 접근 (함수코드를 실행하는 단계) - 대괄호 표기법 사용
function getValue(a, key) {
  // return a.key; // undefined
  return a[key];
}
console.log(getValue(obj, "name")); // 누리

// 동적으로 추가
function addKey(aa, bb, cc) {
  aa[bb] = cc;
}
addKey(obj, "job", "cute"); // 함수 실행
// key값도 문자열 형식으로 작성해야 함
console.log("addKey 함수 실행", obj); // addKey 함수 실행 { name: '누리', age: 4, job: 'cute' }

// 동적으로 삭제
function deleteKey(a, b) {
  delete a[b];
}
deleteKey(obj, "age");
console.log("deleteKey 실행", obj); // { name: '누리', job: 'cute' }

출력

  • 이미지로 대체

🔗 참고 링크 & 도움이 되는 링크






🚩 축약형

중복코드 축약

📝 설명

  • key 이름과 value(참조하고 있는 변수)의 이름이 같으면 생략이 가능하다.

✒ 사용법

입력

js

const x = 0;
const y = 50;
// const coodinate = { x: x, y: y };
// key 이름과 value(참조하고 있는 변수)의 이름이 같으면 생략 가능
const coodinate = { x, y };
console.log("좌표값은?", coodinate); //좌표값은? { x: 0, y: 50 }

function makeObj(name, age) {
  // return { name: name, age: age };
  return { name, age };
}
console.log(makeObj("전지현", 20)); // { name: '전지현', age: 20 }

출력

  • 이미지로 대체

🔗 참고 링크 & 도움이 되는 링크






🚩 객체와 메소드

method

📝 설명

  • 객체에는 함수(method)를 섞어서 쓸 수 있다.

✒ 사용법

입력

js

const apple = {
  name: "apple",
  home: "대구",
  display: function () {
    console.log("🍎");
  },
};
console.log(apple);
console.log(apple.home);
apple.display();

console.log();

const fruit = {
  name: "green apple",
  home: "대구",
  display: function () {
    console.log(`${this.name}: 🍏`);
    // this : 오브젝트 안에서 자기 자신의 속성에 접근할 때 사용 -> fruit(this) 안에 있는 name
  }, // => display() {} 로 축약하여 사용 가능
};
console.log(fruit);
console.log(fruit.home);
fruit.display();

출력

  • 이미지로 대체

🔗 참고 링크 & 도움이 되는 링크






🚩 객체 응용

호텔 예약정보


✒ 코드 작성

입력

html

 <style>
    body { background: lightblue; }
    body > div {
      width: 500px;
      margin: 200px auto;
      padding: 50px;
      text-align: center;
      background: rgba(255, 255, 255, .7);
    }
    #p1 { 
      font-size: 30px; 
      border: 2px solid lightblue;
      border-right: 0;
      border-left: 0;
      padding: 20px 0;
    }
    #p2 { 
      color: lightblue; 
      font-size: 30px;
      line-height: 50px;
    }
  </style>
<body>
  <div>
    <h2>예약정보</h2>
    <p id="p1">호텔이름</p>
    <p id="p2">빈방수</p>
    <p id="p3">개의 방이 남아있습니다.</p>
  </div>
  
  <script>
  </script>
</body>

js

// 객체 생성
let hotel = {
  hotelName: "shilla hotel", // property
  rooms: 40,
  booked: 25,
  // binRooms: function(){} // 메소드
  // binRooms: () => {}
  binRooms() {
    /*
        전부 동일하게 동작하는 코드

        let free = hotel.rooms - hotel.booked;
        return free;

        return free = (this.rooms) - (this.booked);
        return this.rooms - this.booked;
        */
    return free = this.rooms - this.booked;
  }
}

const elP1 = document.getElementById("p1");
// const elP2 = document.getElementById("p2");

elP1.textContent = hotel.hotelName;
document.getElementById("p2").textContent = hotel.binRooms();

출력

  • 이미지로 대체
    업로드중..






🚩 객체 응용2

Object 클래스를 이용한 호텔 예약정보


✒ 코드 작성

입력

html

 <style>
    body { background: lightblue; }
    body > div {
      width: 500px;
      margin: 200px auto;
      padding: 50px;
      text-align: center;
      background: rgba(255, 255, 255, .7);
    }
    #p1 { 
      font-size: 30px; 
      border: 2px solid lightblue;
      border-right: 0;
      border-left: 0;
      padding: 20px 0;
    }
    #p2 { 
      color: lightblue; 
      font-size: 30px;
      line-height: 50px;
    }
  </style>
<body>
  <div>
    <h2>예약정보</h2>
    <p id="p1">호텔이름</p>
    <p id="p2">빈방수</p>
    <p id="p3">개의 방이 남아있습니다.</p>
  </div>
  
  <script>
  </script>
</body>

js

// 객체 생성 - Object 클래스 이용
let hotel = new Object; // Object 클래스를 이용해서 hotel 객체 생성

hotel.hotelName = "shilla hotel"; // 오브젝트의 프로퍼티 속성 정의
hotel.rooms = 40;
hotel.booked = 25;
hotel.binRooms = () => {
  return hotel.rooms - hotel.booked;
}

// let hotel = {
//   hotelName: "shilla hotel", // property
//   rooms: 40,
//   booked: 25,
//   binRooms() {
//     return free = this.rooms - this.booked;
//   }
// }

const elP1 = document.getElementById("p1");
// const elP2 = document.getElementById("p2");

elP1.textContent = hotel.hotelName;
document.getElementById("p2").textContent = hotel.binRooms();

출력

  • 이미지로 대체
    업로드중..






profile
공부하는 벨로그

0개의 댓글