1. Javascript 사용자 정의 객체

💗 Javascript 객체

✨ Javascript에서 제공되는 내장 객체와 사용자가 정의한 사용자 정의 객체로 구분한다

✨ Javascript 각체는 속성과 메소드를 가진다

✨ 객체의 속성값으로 또 다른 객체를 가질 수 있다

     ⦁ 계층적 구조

 

 

 

💗 사용자 정의 객체

: 사용자가 정의한 사용자 정의 객체

Javascript에서는 기초형 타입을 제외한 모든 것이 객체이다. 객체는 Javascript에서 가장 중요한 데이터 타입이다.

 

✨ 객체

객체에 포함된 데이터 하나(이름과 값)를 가리켜 객체의 프로퍼티라고 부른다. 

 

✨ 객체를 생성하는 방법

①  Object() 생성자를 이용하는 방법 (권장하지 않는 방법이다)

let user = new Object(); user.name = "홍길동"; user.hobby = ["여행", "영화"]; user.greeting = function() {      console.log("안녕하세요~! 나는 " + this.name + "입니다."); }; user.greeting();

 

② 객체 리터럴 생성자를 이용하는 방법

다음 코드는 회원 정보를 객체 리터럴로 표현하는 것이다

let member = { name : "홍길동", email : "javauser1234@naver.com" };

{ }부분이 바로 객체 리터럴이며, 객체 리터럴을 변수 member에 대입하고 있다.

프로 퍼티 이름과 프로퍼티 값은 name:"홍길동"처럼 콜론( : )을 사용해서 구분하며,

중괄호 ({ }) 안에 있는 프로퍼티들은 쉼표( , )로 구분한다.

프로퍼티 이름으로는 모든 식별자 와 문자열 리터럴(빈 문자열도 사용 가능)을 사용할 수 있다.

즉 앞 코드에 있는 프로 퍼티 이름은 문자열로 바꾸어 작성할 수 있다.

let user = { name: "홍길동", hobby: ["여행", "영화"], greeting: function() {      console.log("안녕하세요~! 나는 " + this.name + "입니다."); } } user.greeting();

 

⦁ 프로퍼티 접근

프로퍼티 값에는 모든 데이터 타입의 값과 표현식을 대입할 수 있다.

변수에 대입된 객체 안의 프로퍼티 값을 읽거나 쓸 때는 마침표(.) 연산자 또는 대괄호([ ]) 연산자를 사용한다.

member.name; member["email"];

 

객체에 없는 프로퍼티를 읽으려고 시도하면 undefined를 반환한다.

member.phoneNumber; =undefined

 

객체 리터럴 안에 어떠한 프로퍼티도 작성하지 않으면 빈 객체가 생성된다.

let obj = {};

 

⦁ 프로퍼티 추가와 삭제

실행 중에 프로퍼티를 자유롭게 추가하거 나 삭제할 수 있다.

없는 프로퍼티 이름에 값을 대입하면 새로운 프로퍼티가 추가된다

member.age = 20; member["age"] = 20;

 

delete 연산자를 사용하면 프로퍼티를 삭제할 수 있다.

delete member.age;

 

 

③ 생성자 함수 생성자를 이용하는 방법

function User(name, hobby) {      this.name = name;      this.hobby = hobby;      this.greeting = function () {          console.log("안녕하세요~! 나는 " + this.name + "입니다.");      } } // user 객체를 생성하는 데 new를 활용해 생성자 함수 호출 let user = new User("홍길동", ["여행", "영화"]); user.greeting();

 

④ ES6의 클래스 생성자를 이용하는 방법

class User {      // User 생성자 함수와 상응      constructor(name, hobby) {           this.name = name;           this.hobby = hobby;      }      greeting() {           console.log("안녕하세요~! 나는 " + this.name + "입니다."); } } let user = new User("홍길동", ["여행", "영화"]); user.greeting();

 

⦁ 자바스크립트는 prototype 기반 언어이다.

- 객체를 원형(prototype) 형태로 생성하고, 그 안에 기능을 위한 함수 나 변수를 추가하는 방법으로 그룹화하는 개념.

 

⦁ prototype 기반 언어에서의 객체 생성 과정

메소드	형식	설 명
빈 객체의 생성	let 객체명 = {};	아무런 기능이 없는 상태의 빈 객체를 생성
변수(필드)의 추가	객체명.변수명 = 값;	빈 객체 안에 변수들을 추가해 넣는다.
함수(메서드)의 추가	객체명.함수명 = function(){      함수의 구현 부분;      [return 값;] }	빈 객체 안에 함수들을 추가해 놓는다.