2022.08.13 TIL : [자바스크립트] 객체, this, 생성자 함수의 정의

 

✅ JavaScript 객체, this, 생성자 함수의 정의

구글링해서 코드를 보다가 객체 생성을 해놓은 코드를 보면 '아, 이게 객체구나' 정도로만 알고 있었던

객체와 this, 생성자 함수에 대해서 좀 더 심화적인 공부를 하고 싶었습니다.

 

JavaScript는 객체기반의 스크립트 언어이며 JavaScript를 이루고 있는 거의 모든 것은 객체입니다.

 

객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 Key 와 Value 를 저장할 수 있는 구조입니다.

 

JS 객체 종류

JavaScript 객체의 종류는 세 가지가 있습니다.

 

기본내장객체는 기본적으로 컴퓨터 언어라면 내장하고 있는 객체입니다.

오늘 배울 것은 이 기본내장객체에 Object입니다.

 

BOM (Browser Object Model) 과 DOM (Document Object Model)은 다음에 설명을 할게요!

 

var user = new Object();
var user = {};

이렇게 두 가지 방법으로 객체를 선언할 수 있는데요.

 

객체는 key 값과 value 값으로 구성되어 있습니다.

 

제 정보를 객체로 표현해 볼까요?

 

key : 'name', 'age', 'gender'

value : 'Choi Yiseob', '26', 'male'

 

var user = {
    name: 'Yiseob',
    age: 26,
    gender: 'male'
};

👉 객체의 특징 👈

• 객체는 변수이다. 그러나 객체에는 많은 값이 포함될 수 있습니다.
  (자바스크립트 변수처럼 단일 값을 포함 할 수 있습니다.)
• 객체는 중괄호 표기를 이용하여 만들 수 있습니다.
• 객체는 각각의 key/value에 대한 정보를 나열할 수 있습니다.
• Key는 문자열 또는 기호여야 합니다.
• Value는 모든 유형이 될 수 있습니다. (function도 가능)
• 객체는 한 쌍의 key/value 뒤에 쉼표를 이용하여 그 뒤에 오는 key/value와 구분해주어야 합니다.
• 객체에서 명명된 값을 Properties (속성) 라고 합니다.
• 변수는 예약어의 이름을 가질 수 없지만 객체는 어떠한 이름이어도 상관없습니다.
• 객체 변수를 복사하면 참조가 복사되고 객체가 복제되지 않습니다.

let user = { name: "Yiseob" };

let admin = user; // copy the reference

 

 

👉 프로퍼티 (Property) 👈

프로퍼티는 객체의 속성을 나타내는 접근 가능한 이름과 활용 가능한 값을 가지는 특별한 형태입니다.

고유한 특징을 기술한 것이라고 보면 되는데요. (함수는 속성이 아님!)

특정객체가 가지고 있는 정보를 품고 있어 그 객체가 가진 정보에 직접적으로 접근할 수 있게 해줍니다.

• key : 빈 문자열을 포함한 모든 문자열 또는 symbol 값
• value : 모든 값

var user = {
    name: 'Yiseob',
    age: 26,
    gender: 'male'
};

user.school = 'CAU';

console.log(user);

속성 호출은 객체.속성명, 객체[속성명] 이렇게 두 가지 방법이 가능합니다.

 

key에 문자열이나 symbol 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 되며 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓰게 됩니다.

배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않습니다.

 

👉 메서드 (Method) 👈

메소드란 객체가 가지고 있는 동작 혹은 객체에 주는 명령이며 객체 내의 함수를 메소드라 칭합니다.

 var user = {
     name: 'Yiseob',
     age: 26,
     gender: 'male',
     lang: ['korean','chinese','english'],
     active : function (x){
         if(x == 'run') {
             console.log('이섭이가 달립니다');
         }else if(x == 'walk'){
             console.log('이섭이가 걷습니다');
         }
     }

 };

user.active('run');

 

👉 this? 👈

 

객체에서 this는 이 함수를 소유하고 있는 객체를 의미합니다.

 

만약 제가 할 수 있는 언어에 일본어가 추가되었다고 할게요!

var user = {
    name: 'Yiseob',
    age: 26,
    gender: 'male',
    lang: ['korean','chinese','english'],
    study : function (){
        this.lang.push("japanese");
        console.log(this.lang);
        }
    }

    user.study();

this 대신 객체명인 user을 사용해도 되지만,

객체명이 겹칠 수도 있으며, 한 두개가 아닌 몇 천개의 객체의 메서드에는 this로 접근하는 게 수월할 거 같아요.

 

👉 생성자 함수 👈

 

생성자 함수란 객체를 생성할 때 사용하는 함수입니다.

만약 제 고등학교 친구들의 정보를 통해서 객체를 생성한다고 해봅시다.

var Seob = {
    name: 'Yiseob',
    age: 26,
    height: 176,
    gender: 'male',
    sport: 'soccer'
}

age,gender 속성은 다 똑같을 뿐 더러, 10개의 객체를 일일히 치려면 힘들겠죠?

이럴 때 필요한 것이 생성자 함수입니다. 

 

생성자 함수의 기본 문법은 

function 생성자함수명(매개변수) {
    this.속성 = 값;
}

var 변수명 = new 생성자함수명();

제 친구 원직이와 성채를 생성자함수를 통해서 객체 생성해볼게요.

function friend(name, height, sport) {
    this.name = name;
    this.age = 26;
    this.height = height;
    this.gender = 'male';
    this.sport = sport;
}

var wonjik = new friend('wonjik', 193, 'basketball');
var sungchae = new friend('sungchae', 176, 'baseball');

console.log(wonjik);
console.log(sungchae);

잘 생성되었네요.

이렇게 대부분의 값이 같지만 옵션이 몇 개 다를 때 사용하는 것이 생성자함수라고 생각하시면 될 것 같아요.

 

👉 Prototype 👈

 

prototype이란 생성자 함수로 생성된 객체들이 properties와 method를 공유하기 위해 사용하는 객체입니다.

위 처럼 친구 객체들을 많이 생성하게 되면 점점 메모리를 많이 차지하기 때문에 소모적입니다.

 

공통적인 부분은 생성자 함수 밖으로 빼내서 메모리를 절감하는 것이죠.

 

function friend(name, height, sport) {
    this.name = name;
    this.height = height;
    this.sport = sport;
}

friend.prototype.age = 26;
friend.prototype.gender = 'male';

var wonjik = new friend('wonjik', 193, 'basketball');
var sungchae = new friend('sungchae', 176, 'baseball');

console.log(wonjik);
console.log(sungchae);

나이 속성과 성별 속성을 생성자 함수 바깥으로 빼서 프로토타입으로 설정했습니다.

 

똑같이 생성이 되었는데 prototype 항목에 이름과 성별 속서잉 들어간 것을 확인할 수 있습니다.

 

 

 

앞으로 자주 자주 활용을 해서 더 익숙해지게끔 해야겠어요!!