JavaScript 객체 기본 중의 기본 중의 기본 중의 기본!!

객체를 이해한 줄 알았는데 다른 사람한테 설명하려고 하니까 막막...

그래서 다시 한번 정리 해보려고 글 씀ㅠㅠ

 

이번엔 확실히 잡고 가자ㅏㅏㅏㅏ

 

바로 본론으로 들어가서!!

 

객체란 무엇이냐?

관련된 데이터와 함수의 집합이야

(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 불러)

 

예제를 통해서 실제 객체가 뭔지 보자!

 

var person = {};

생성하고 콘솔에 person 입력 ㄱㄱ

결과는?

축하해~

너는 지금 객체를 생성 했엌ㅋㅋㅋㅋㅋㅋㅋ

 

하지만 이건 텅 빈 객체여서 우리가 이걸로 뭘 할 수는 없어..

 

수정해보자!

var person = {
  name : ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
}

 

console.log(person.name)
console.log(person.name[0])
console.log(person.age)
console.log(person.interests[1])
person.bio()
person.greeting()

결과 확인 해봐!

 

이제 넌 객체에 포함된 데이터와 함수를 갖게 됐고!

이것들을 간단하고 멋진 문법을 통해 사용할 수 있게 됐어!!

 

객체는 각기 다른 이름(name과 age)과 값(['Bob', 'Smith'], 32)을 갖는 복수개의 멤버로 구성 되거든

한 쌍의 이름과 값은 ' , '로 구분되어야 하고! 이름과 값은 ' : ' 로 분리 돼!

결국 문법은 이런 패턴이 되는거지!

var objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
};

객체를 구성하는 멤버의 값은 어떤 것이라도 될 수 있어!

우리가 만든 person 객체는 문자열, 숫자, 배열 두개와 두개의 함수를 갖고 있지?

처음 4개의 아이템은 데이터 아이템인데, 이걸 객체의 프로퍼티(속성) 라고 불러!!

 

끝에 두개의 아이템은 함수인데 이 함수를 통해 데이터를 가지고 뭔가 일을 할 수 있게 돼!

이걸 우리는 메소드 라고 불러!!

 

이런 객체는 객체 리터럴(object literal)이라고 불러!

객체를 생성할 때 컨텐츠를 그대로 대입하거든

객체 리터럴은 클래스로부터 생성하는 방식과는 달라!

 

객체 리터럴을 사용해서 객체를 생성하는 것은

연속된 구조체나 연관된 데이터를 일정한 방법으로 변환하고자 할 때 많이 쓰이는 방법이야

 

예를 들면, 서버에게 주소를 db에 넣어달라고 요청하는 경우!

각 아이템들을 하나 하나 개별 전송하는 것보다는 하나의 객체를 전송하는 것이 훨씬 효율적이기 때문이지!

또, 각 아이템들을 이름으로 구분해서 사용하기 원할 때도 배열을 사용하는 것보다 훨씬 쉽거든!

 

 

---

 

출처 : developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics

JavaScript 객체 기본 - Web 개발 학습하기 | MDN