[JavaScript] 자바스크립트의 기초_객체와 메서드

---

 

 

사이드 프로젝트를 위한 자바스크립트

인프런 한 입 크기로 잘라먹는 리엑트(React): 기초부터 실전까지
강의를 기반으로 정리하였으며, 상업적 목적이 아닌 학습 기록용 입니다.

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

 

 

목차

객체 생성

객체 속성

상수 객체

메서드

 

---

 

객체 생성

객체(Object)
원시 타입(Number, String, Boolean, Null, Undefined)을 제외한 모든 것을 의미한다.
객체는 다양한 속성(property)와 기능(method)을 하나의 단위로 묶어 관리할 수 있다.

객체 생성
• 객체 생성자: new Object()를 사용하여 객체를 생성할 수 있다.
• 겍체 리터럴: 중괄호{}를 사용하는 방법으로 대부분의 경우에 사용되며 직관적으로 이해할 수 있다.

// 객체(Object): 현실세계에 존재하는 어떤 사물이나 개념 표현 용이

// 1. 객체 생성
let obj1 = new Object(); // 객체 생성자
let obj2 = {}; // 객체 리터럴(대부분 사용)

 

 

---

 

 

객체 속성

객체 속성
각 프로퍼티(속성)은 키(key)와 값(value) 쌍으로 이루어져 있다.
예) person 객체는 name, age, hobby 등의 프로퍼티(속성)로 이루어져 있다.

프로퍼티(속성)에 접근
• 점 표기법: '객체이름.키' 형식으로 사용되며, 가장 간결하고 자주 사용한다.
• 괄호 표기법: '객체이름["키"]' 형식으로 사용되며, 키가 변수에 저장되어 있거나, 키에 띄어쓰기 등이 포함된 경우에 유용하다.

let name = person.name; // 간결해서 자주 사용
let age = person["age"];

let property = "hobby";
let hobby = person[property];

 

 

프로퍼티 추가, 수정, 삭제 및 속성 존재여부 확인

• 프로퍼티(속성) 추가: 객체에 새로운 프로퍼티를 추가할 때는 점 표기법 또는 괄호 표기법을 사용하여 값을 할당한다.
• 프로퍼티(속성) 수정: 이미 존재하는 프로퍼티의 값을 변경할 때도 추가하는 방법과 동일하게 값을 재할당한다.
• 프로퍼티(속성) 제거: delete 연산자를 사용하여 객체의 프로퍼티를 삭제할 수 있다.
• 프로퍼티(속성) 존재여부 확인: 특정 프로퍼티가 객체 내에 존재하는지 확인하려면 in연산자를 사용하며, true/false로 반환된다.

// 3-2. 새로운 프로퍼티를 추가하는 방법
person.job = "fe developer";
person["favoriteFood"] = "떡볶이";
let food = person.favoriteFood;
// console.log(name, age, hobby, food);

// 3-3. 프로퍼티를 수정하는 방법
person.job = "educator";
person["favoriteFood"] = "초콜릿";
let job = person.job;
// console.log(person);

//3-4. 프로퍼티를 삭제하는 방법
delete person.job;
delete person["favoriteFood"];
// console.log(person);

// 3-5. 프로퍼티의 존재 유무를 확인하는 방법 (in 연산자)
let result1 = "name" in person;
let result2 = "cat" in person;
console.log(result1, result2);

 

 

---

 

 

상수 객체

상수 객체
const로 선언된 객체는 재할당이 불가능한 상수로, 변수 자체에 새로운 객체를 할당하려고 하면 오류가 발생한다.
객체 내부의 프로퍼티 값은 변경, 추가, 삭제가 가능하다.

// 1. 상수 객체
const animal = {
  type: "고양이",
  name: "나비",
  color: "black",
};

// animal = { a: 1 }; // 상수인 animal에 다른 객체 생성하면 오류 발생

animal.age = 2; // 추가
animal.name = "까망이"; // 수정
delete animal.color; // 삭제

// animal = 123; // 아예 새로운 값을 할당하는 것은 오류가 발생한다.
console.log(animal); // 객체 값의 프로퍼티를 변경하는 것은 문제 없음

 

 

---

 

메서드

메서드
객체 프로퍼티 중 값이 함수인 프로퍼티를 의미하며, 객체가 어떤 동작을 수행하도록 하는 기능으로 볼 수 있다.

// 2. 메서드: 객체 프로퍼티 중 값이 함수인 프로퍼티를 의미
const person = {
  name: "홍길동",
  // 메서드 선언
  sayHi() {
    console.log("안녕");
  },
};

person.sayHi();
person["sayHi"]();