23.03.24 / 객체 타입, this, 매개변수와 인자

[ 객체 / 오브젝트]

• 원시타입(문자열,숫자,boolean,null,undefined,심볼) 아니면 그냥 다 객체임 
• 클래스(설계도-아직 메모리에 할당되지 않은 상태)에서 정의한 것을 토대로 메모리에 할당된 것
• (클래스를 통해 객체를 생성하면 주소가 할당된다.)
• 메모리에 등록된 데이터 (변수, 자료구조, 함수, 메소드, 배열....)
• 객체의 구성 : 속성(멤버 변수) / 기능(메소드)
• 객체를 대입하는 변수(참조 변수)는 메모리에 올라간 객체의 주소를 참조하고 있다.
• (자바 : User name = new User();  - name : 참조변수 - User객체의 주소 참조)

원시타입(기본 자료형)의 변수는 참조 변수가 아님(객체의 주소를 참조하는 것이 아닌 값 바로 할당)
call by reference  (참조타입)
call by vaule  ( 원시타입)

 

[ 객체 선언 ]

• 중괄호{}로 객체 선언할 수 있음

[ 구성 ]
키(key) : 객체에 담긴 값의 주소 / 본질적으로 문자열 사용
값 또는 기능(메소드) : 모든 데이터 타입 (객체, 함수 포함)
프로퍼티(속성) : 객체가 보유한 값
메소드(기능) : 객체가 보유한 함수

키 : 값 ( 값에 메소드가 들어가면 메소드, 그 외는 전부 속성)

let 변수이름 = {
    '키1' : 값/기능1
    '키2' : 값/기능2
    '키3' : 값/기능3
}

1. 객체 생성

//객체 생성1
let obj = {};

//객체 생성2
let obj2 = new Object(); 
//Object는 내장 객체 (자바의 클래스 이름 아님 자바랑 혼동 x)

2. 키와 값 생성
객체는 배열처럼 쌓이는 것 같아 보이지만 배열이 아니기 때문에 순서 의미 없음

< 식별자(키) 유의 사항 >
동일한 키(식별자)를 갖고 있을 때 맨 마지막에 입력된 것으로 대체된다 (동일 키 사용하지 않는다.)
숫자 , 대시(-) , 언더바(_) 쓰지마
카멜표기법 (키는 문자열)
숫자 써도 문자열로 인식돼서 속성 생성할 때는 에러 나지 않음
속성에 접근할 때 도트연산자를 사용하는데 .숫자는 소수점으로 인식돼서 오류남 -> 도트연산자 대신 ['키']로 접근하면 가능 그런데 굳이 그렇게 쓸 필요가...?

// 객체에 키와 값 생성 1

var obj3 = {  //객체 생성과 동시에 키,값 생성
	// 키 :  값
    name : '홍길동',  // name : '홍길동' - 프로퍼티(속성)
    getName : function(){ // getName : function() - 메소드(기능)
    console.log('메소드 실행');
    }
}


// 객체에 키와 값 생성 2

var obj4 = {}; // 객체 미리 생성
    obj4.name = '홍길동'; // name : '홍길동' - 프로퍼티(속성)
    obj4.getName = function(){ // getName : function() - 메소드(기능)
	}

 

const obj4 = { 

	// 속성(변수)
    num : 1,  
    
    // 속성(배열)
    arr : [1,2,3], 
    
    // 속성(객체 안에 객체 넣기)
  	obj : {   
        arr : [4,5,6]
    },
    
    // 메소드(값을 리턴 받는 메소드 선언)
	getNum : function(){ 
        return this.num;
    },
    
    // 메소드(값을 셋팅 하는 메소드 선언)
    setNum : function(number){
        this.num = number;
    }
    
    // 식별자(값) 이렇게 쓸 수 도 있지만 가급적 피해라.
    // 이 경우 접근 방법을 다르게 써야함 ['키']
    'member-name' : '홍길동', 
    47 : '한국스마트',
    }
};

3. 객체 접근

// 속성 추가
// 배열 아니고 변수라서 값이 1에서 4로 교체 됨
obj.num = 4; 

// 속성 동적 추가
// 속성 키를 만드는 동시에 값 추가
// obj 객체 안에 str이 없었는데 새로 생성해서 문자열 가 추가
obj.str = '가';

// 속성 접근 .(도트연산자)
// obj 객체의 num 속성으로 접근
console.log(obj.num);

// 속성접근 ['키']
// 편한 도트연산자 두고 이렇게 쓸 이유가 없음
console.log(obj4['47']);
console.log(obj4['member-name']);

// 체이닝 접근
// 도트 연산자를 활용하여 객체 멤버에 접근하는 방법
// 마지막에 호출된 메서드나 속성이 객체라면
// 도트 연산자를 활용하여 마지막 도달된 객체 멤버에 접근 할 수 있다.
// obj 객체 안의  objin 속성 안의 arr 속성의 2번 인덱스
let testNum = obj.objin.arr[2];

// 호출(접근) 연산자
obj.getNum(); 
obj.setNum(5);

4. this. (객체 자신의)
 - 전역 스코프에서 사용될 때 / 함수에서 사용될 때 this 는 '전역 객체'를 가리킨다.(window)
 - 객체에 속한 메서드에서 사용될 때 this 는 '메서드가 속한 객체'를 가리킨다.
 - 객체에 속한 메소드의 내부함수에서 사용될 때 this 는 '전역 객체'를 가리킨다.
 - 생성자에서 사용될 때 this 는 생성자로 인해 생성된 '새로운 객체'를 가리킨다.

// this -> 객체 자신 (객체가 생성되었을때)
		
const obj = {
    name : '',
    getName : function(){
        return this.name;
    },
    setName : function(name){
        this.name = name;
    }
}
obj.setName('홍길동');
console.log(obj.getName());

// setName 메소드 안의 매개변수 name과 밖에 있는 속성 name과 같을 경우
// 밖에 있는 속성 name은 객체 자신의 name이기 때문에 this.를 붙여준다.

----------------------------------------------------------------------------

※ this의 문제점 ※
1. 전역 스코프에서 사용될 때 / 함수에서 사용될 때 this 는 '전역 객체'를 가리킨다.(window)
2. 객체에 속한 메서드에서 사용될 때 this 는 '메서드가 속한 객체'를 가리킨다.
3. 객체에 속한 메소드의 내부함수에서 사용될 때 this 는 '전역 객체'를 가리킨다.
4. 생성자에서 사용될 때 this 는 생성자로 인해 생성된 '새로운 객체'를 가리킨다.

// 2번 규칙에 따라 sound 메서드 내의 this는 메서드가 속한 객체 cat에서 name을 가리킬 수 있다. 
const cat = {
    name: 'meow',
    sound: function() {
        console.log(this.name);
    }
};
cat.sound();	// meow 출력

// 하지만 내부함수 내의 this는 3번 규칙에 따라 전역 객체를 가리킨다. 
// 문제는 전역 스코프에 name이라는 변수가 선언되어 있지 않다.
// 그래서 undefined가 출력된다.
const cat1 = {
    name: 'meow',
    sound: function() {
        const sound2 = function() {
            console.log(this.name);
        }
    sound2();
    }
};
cat1.sound();	// undefined

// 이렇게 전역 스코프에 name을 선언해주면 야옹이 출력된다.
var name = '야옹'
var cat1 = {
    name: 'meow',
    sound: function() {
        const sound2 = function() {
        console.log(this.name);
    }
    sound2();
    }
};
cat1.sound();	// 야옹 출력

 

[ 매개변수(Parameter)와 인자(arguments)의 구별 ]

function person(name){
return name;
}

let result = person('홍길동');
console.log (result);

name - 매개변수
'홍길동' - 인자

 

function setName(name){} : 입력된 값에 따라 자동으로 데이터 타입을 정해준다. - () 안에 데이터 타입 없이 매개변수 사용

public String setName(String name){} : 자바는 사용할 값에 따라 직접 데이터 타입을 정해준다. - () 안에 매개변수 사용시에 데이터 타입 + 매개변수 필수