Front/js

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

읽히는 블로그 2024. 7. 5. 15:11

▤ 목차

     
     
     

    ✔프로토 타입 객체

    ⌨ 프로토 타입

    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
    클래스에 대해 더 자세히 정리해둔 글이다.