03.JavaScript-객체

이수현·2022년 4월 28일

TIL

목록 보기

3/23

📚JavaScript 개념정리

객체란 무엇이며 필요한 이유

💡객체(Object)

객체란 원시형 데이터와 달리 다양한 데이터를 담을 수 있는 데이터 타입이다.

Key로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있다.

객체는 자바스크립트 전반적으로 녹아있는 개념이므로 잘 이해하고 있어야 한다.

객체를 만드는 방법

// 1. Obeject() 생성자
let user = new Object({ name: "kim", age: 28 });
user.name = "lee";
console.log(user); // { name: 'lee', age: 28 }

// 2. 객체 리터럴 구문
let user = { name: "kim", age: 28 }
user.name = "lee";
console.log(user); // { name: 'lee', age: 28 }

// 3. Object.create() => prototype에 대한 이해가 필요!
function Animal(name, emoji) { // Animal이라는 객체를 생성할 때 사용하는 생성자 함수(함수도 객체)!
  this.name = name;
  this.emoji = emoji;
}
Animal.prototype.printName = function () { // Animal함수 객체의 prototype에 printName이라는 메서드를 작성
  console.log(`${this.name} ${this.emoji}`);
};

function Dog(name, emoji, owner) {
  // super(name,emoji)
  Animal.call(this, name, emoji);
  this.owner = owner;
}
Dog.prototype = Object.create(Animal.prototype); // Dog함수 객체의 prototype을 생성하는데, 이 때 Animal의 prototype을 상속받는다.

Dog.prototype.play = () => {  // Dog함수 객체의 prototype에 play라는 메서드를 작성
  console.log("같이 놀자!");
};
// 이 경우 new Dog()를 통해 인스턴스 생성하면 해당 인스턴스에는 Animal의 printName메서드도 갖고있다.

객체에서 property, key, value

property : key: value쌍으로 구성됨.

key : 프로퍼티의 키는 프로터피 '이름' 혹은 '식별자'라고 부른다. value를 얻기 위해서는 해당 value의 키가 필요하다.

value : value에는 모든 자료형이 들어올 수 있다.
const cat = {
  name: "cat",
  play() {  // 이 경우에는 key와 value의 이름이 같아서 play()로 축약가능! 풀어서 쓰면 play:play(){}
    // 객체의 메서드 (오브젝트에 속한 함수)
    console.log("냐옹");
  },
};
cat.play();

객체에 접근 하는 두 가지가 있는 이유

Dot Notation - object.property

점 표기법 구문에서 property는 유효한 JavaScript 식별자여야 한다.
(따라서 object.$1은 유효하지만 object.1은 불가능하다.=> 변수 이름규칙을 따르는 것)

Bracket Notation - object['property']

괄호 표기법에서는 property 이름으로 문자열이나 Symbol을 사용할 수 있다. 문자열은 변수 이름규칙을 따르지 않아도 상관없다. ('1foo', '1', '!bar!', 심지어 ' '(공백) 도 가능하다.)
let apple = {
  name: "apple",
  "hello-bye": "😗",
  0: 1,
  ["hello-bye1"]: "👍",
  " ": "space",
};
console.log(apple.name); // dot notation => 'apple'
console.log(apple["hello-bye1"]); // bracket notation => '👍'
console.log(apple["name"]); // 'apple'
console.log(apple.0) // SyntaxError
console.log(apple[0]); // 1
console.log(apple["0"]); // 1
console.log(apple[" "]); // 'space'

객체의 값을 추가,수정, 삭제하는 방법

let user = {};

// 추가
user["likes birds"] = true;
console.log(user["likes birds"]); // true
// 수정
user["likes birds"] = false;
console.log(user["likes birds"]); // false
// 삭제
delete user["likes birds"];
console.log(user["likes birds"]); // undefined

// Computed Property : 객체를 만들 때 객체 리터럴 안의 키가 대괄호로 둘러싸여 있는 경우.
let key = "name";
let user = { [key]: "suhyeon" };
console.log(user); // { name: 'suhyeon' }
user[key] = "SUHYEON";
console.log(user); // { name: 'SUHYEON' }

객체와 배열이 섞인 복잡한 객체 만들어서 접근하는 방법

const cats = {
  fam: [
    { name: "cat1", age: 1 },
    { name: "cat2", age: 2 },
    { name: "cat3", age: 3 },
    { name: "cat4", age: 4 },
  ],
  feedKinds: ["organic", "grocery brand", "premium", "holistic"],
  play() {
    console.log("냐옹");
  },
};

console.log(cats["fam"][0]["name"]); // 'cat1'
console.log(cats.feedKinds[cats.feedKinds.length - 1]); // 'holistic'
cats.play(); // '냐옹'

배열의 타입이 객체인 이유

자바스크립트는 객체 기반 프로그래밍 언어이다. 자바스크립트를 구성하는 거의 모든 것이 객체이다.
원시형 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다.
원시 값은 단 하나의 값을, 객체는 다양한 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조이다.
원시 값은 immutable value, 객체는 mutable value이다.
(그리고 자바스크립트는 프로토타입 기반의 언어로 원시형 값을 제외한 나머지는 Object.prototype을 상속받는 것을 콘솔창에 찍어보면 알 수 있다...괄호 안의 이 내용은 주관적인 생각이고 더 찾아봐야 합니다.. )

참고 자료

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
https://ko.javascript.info/object
https://hanamon.kr/javascript-%EA%B0%9D%EC%B2%B4-%EA%B8%B0%EC%B4%88/
https://medium.com/@zac_heisey/objects-vs-arrays-42601ff79421