객체에 대해서(생성과 중첩 객체)

▤ 목차

 
 
 

✔프로토 타입 객체

⌨ 프로토 타입

java는 클래스 기반 객체지향 프로그래밍 언어이다.
객체 생성 이전에 클래스를 정의하고 객체를 생성한다.
 
하지만 javascript는 프로토타입 기반 객체지향 프로그래밍 언어이다. 
자바스크립트의 동작 원리를 잘 이해하기 위해서는 프로토타입의 개념을 잘 이해하고 있어야한다.
 
프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이 객체를 생성할 수 있다.
자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다.
 
객체지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메서드를 상속받아 사용할 수 있다.
 
 

👏 객체 생성 방법

자바스크립드의 객체 생성 방법에는
1. Object 생성자
2. 객체 리터럴
3. 생성자 함수
4. 클래스
이렇게 4개로 나뉜다.
 

---

 
 

✔ 객체 생성하기

 

⌨ new 연산자 사용

let obj1 = new Object();

객체를 만들어서 생성해보겠다.
 

obj1.irum = '신기해';
obj1.nai=23;
obj1.juso="강남구 역삼동";
obj1.getJuso= ()=> obj1.juso; //약간의 getter

출력해보자.

console.log(typeof obj1); //object
console.log(obj1.toString()); //[object Object]
console.log(obj1); //{irum: '신기해', nai: 23, juso: '강남구 역삼동', getJuso: ƒ}

 
객체가 json 형식으로 저장된다.
 
 
 

💻 literal(data) 사용

let myObj = {
		irum:'홍길동',
		nai:33,
		showNai: function(msg){
			return this.nai + msg
			},
		}

 
literal로 객체를 생성했을때 어떻게 나오는지 확인해보자.
 

console.log(typeof myObj); //object
console.log(myObj.toString());//[object Object]
console.log(myObj);//[object Object]

 
위와 동일하게 들어간다. new를 생성하는 것과 비교해보면, 직접 json처럼 값 : 키를 작성한다.
 
 

👏 this

메서드 내부에서 객체 멤버에 접근한다.
this는 바인딩이 객체가 생성되는 시점에 결정된다.
일반 함수 호출시 this가 최상위 객체(global 이나 window)를 가리킨다.
메소드를 호출 시 호출된 객체를 가리킨다.
new 키워드를 사용해서 객체를 생성했을 때는 해당 객체를 가리킨다.
 
[바인딩]

메모리에 값을 할당하는 것

프로그램의 어떤 기본 단위가 가질 수 있는 구성 요소의 구체적인 값, 성격을 확정하는 것을 말한다.

즉, 프로그램의 각종 변수들을 실제 값으로 묶어 확정하는 

 

✏️ 함수 별도 작성 후 객체에 할당 가능

let users={
	name :'tom',
	age:25,
};

users.sayHi = ()=>{
	console.log('안녕');
}
console.log(users); //{name: 'tom', age: 25, sayHi: ƒ}
users.sayHi();

 
위의 코드와 같이 함수를 따로 작성한 다음 함수로 바꿀 수 있다.
 
 
 

🪄생성자 함수를 사용

java에서 생성자와 같이 함수를 선언할 수 있다.
생성자 함수를 선언할 때는 관례가 있는데 함수 이름은 대문자로 표시한다.

function Person(name){
	this.name = name;
	this.setName = function(newName){
		this.name = newName;
		};
	};

위와 같이 생성자 함수를 사용하면 해당 객체를 호출하면서 값을 계속 받을 수 있다.
이래와 같이 활용할 수 있다.

let pp = new Person('사오정');

document.querySelector('#disp5').innerHTML = pp.name; //사오정

 
아래 코드는 html 파일에 해당값을 뿌려주는 역할을 한다.
Person 객체는 파라미터를 원한다.
 

let pp2 = new Person(); //let pp2 = new Person; 같은 의미
document.querySelector('#disp6').innerHTML = pp2.name;//undefined

만약 파라미터를 전달하지 않는다면?
당연하지만 undefined 값이 나온다.
 
 
[property 단축 구문 shorthand properties ]

프로퍼티의 키와 값이 동일할 때 키명만 적어도 된다.

같은 이름의 변수값을 자신의 값으로 사용한다.

function MakeUser(name,age){
		return{
			//name:name,
			name, // property 단축 구문 (명이 같은 경우)
			age,
		}
	}
	let user1 = MakeUser('길동', 22);
	document.querySelector('#disp9').innerHTML = user1.name + ' '+ user1['age'];
	user1 = null; //GarbageCollector에 의해 메모리 해제

 
 

---

 
 
 

✔ 중첩 함수

객체 또한 중첩으로 사용할 수 있다.

• 최상위 레벨에만 사용할 수 있다.
• if 또는 while문 등 문장에서 작성할 수 없다.
• 단위 로직을 함수로 만드는 행위는 응집도를 높일 수 있다.

⌨ 형식

let 객체명 = {
	키: 값
    ...
    객체명 {
    	키 : 값,
        ...
    }
}

 
내부에 존재하는 지역적인 변수들이 존재한다면 그 변수들은 함수가 실행될 때만 존재한다.
 

💻 코드로 보기

let myFriend = {
			name:'손오공',
			age:23,
			otherFriend : {
				name:'박치기',
				job:'프로그래머',
			},
	};

 

let str4 = `${myFriend.name}님의 나이는 ${myFriend.age} 다른 친구는 ${myFriend.otherFriend.name}입니다`; 
	document.querySelector('#disp4').innerHTML = str4;

 
 

---

 
 

✔ 클래스

클래스는 Object와 관련이 있다.
객체를 생성하기 위한 템플릿이라고 생각하면된다.
클래스는 OOP에서 특정 객체를 생성하기 위해 멤버를 저으이하는 일종의 설계도(틀)이다.
기존 프로토타입을 기반으로 객체를 생성하는 것보다 조금더 명료하게 작성이 가능하다.
 

⌨ 형식

class 클래스명{
	a = '서울'; //멤버 변수
    
    constructor(){} //생성자
    메서드명(){} //메서드
}

• 멤버 변수는 let이나 const 사용이 불가하다.
• 생성자로 멤버 변수를 만든다면 (java와 비교해보면) 상단에 정의하지 않아도 된다.(생략 가능)
• 즉, 생성자에서 각 인스턴스의 멤버 변수로 만들어진다.

 
 

💻 코드로 보기

class Class1{
	addr = '서울'; //멤버변수(prototype 속성), let, const X
	name; //생성자로 값을 받을 때는 생략 가능, 가독성을 위해 적어도된다.
	
	constructor(name){ //생성자
		this.name = name; //각 인스턴스의 멤버 변수로 만들어짐
	}
	
	sayHi(){ //멤버 메소드
		document.write("<br>",this.name);
		document.write("<br>",this.addr);
		let msg = "프로그래머"; //지역변수
		return "<br> 이름은 " +this.name + " "+ msg;
	}
}

 
 

👏 중요

클래스는 자바와 약간 비슷하다.
이런 부분은 js가 java와 닮아간다는 생각을 했다.
https://hi-hahahoho.tistory.com/67
클래스에 대해 더 자세히 정리해둔 글이다.