[JS/Basic/객체] 자바스크립트 객체

프로그래밍에서 "객체"는 아주 많이 나오는 개념입니다. 오늘은 JavaScript에서 객체를 어떻게 구현했는지 알아보죠! 

---

객체(Object)

• 객체는 {} 중괄호 안에  "키 : 값"의 쌍으로 구현되는 자바스크립의 "자료형" 입니다.

중괄호로 선언하는 방법 외에도, new Object()라는 방법도 있지만, 대부분 객체 리터럴(중괄호)를 이용합니다. 중괄호를 이용해 선언한 객체를 "객체 리터럴"이라고 합니다.  

const mapin = new Object(); //'객체 생성자'
const mapin2 = {}; // '객체 리터럴 '

• "키 : 값"의 쌍은 Property라고 하고, 한 객체에는 여러 개의 Property가 있을 수 있습니다.
• 키엔 문자형, 값엔 모든 자료형(배열,문자열,함수 등등)이 허용됩니다.

객체의 구조

위의 객체 구조를 좀 더 발전시켜, 코드로 작성한다면 아래와 같이 됩니다.

const mapin = {
	name:["Mapin","King"],
    age:24,
    major:"computer Science",
    gender:"male",
    interest:['hiphop','programming'],
    bio:function(){
    	alert(this.name[0] + ' '+this.name[1] + "is'+this.age+"years old. He likes+this.interests[0]');     
    }
    
}

객체(Object)의 호출/접근

• 객체에 담긴 값을 사용하고 싶다면,  객체의 "Key"에 접근을 하면 된다. 
• "Key"에 접근하는 방법은 2가지가 있습니다.  ".(점)"을 이용하는 dot notation, "[](괄호)"를 이용하는 Bracket notation이 있습니다. 
• 둘은 차이점이 분명 존재하지만, 대부분의 상황에서는 무엇을 써도 상관없긴 합니다 .

//dot notation
console.log(mapin.name)
console.log(mapin.bio())

//bracket notation

console.log(mapin["name"]);
console.log(mapin["bio"]());

 

* Dot notation vs Bracket notation

• 대부분의 상황에서는 둘을 같이 쓸 수 있습니다만, 둘의 미묘한 차이가 있습니다.
• 우선, Dot notation은 변수로 불러올 수가 없습니다(return undefined). Bracket notation은 변수를 이용해서 부를 수 있습니다.

const mapin ={
	age:24,
    name:"mapin",
    gender:"male",
}

let mapinGender = "gender"

//This code undefined!
console.log(mapin.mapinGender);

//This code Correct

cosole.log(mapin[mapinGender]); //male

• 정리하자면 , Dot notation은 뒤에 있는 걸 무적권 키로 인식합니다. 위와 같이 mapin.mapinGender은 mapin객체에 "mapinGender"라는 Key가 있는지 확인을 하는겁니다. 반면에, Bracket notation은 mapinGender안에 있는 값(변수의 value)을 key로 이용하여 찾게 됩니다.

Computed Property

•  객체 내부의 key값은 "문자열"이라고 했지만, 대괄호에 싸여져 있는 경우가 있습니다. 
• 이 경우는, key 값을 "변수"로 내가 받겠다는 의미로 , 입력되는 변수를 key로 Property를 만드는 방법 중 하나입니다.

let order = prompt("무엇을 사실 건가요?","Tshirt");

let mapin = {
	[order]:1,
};

• key값을 변수로 사용해서 , 할당하는 다른방법도 있죠!  "객체.key =  값" 과 같이 , 할당 연산자를 이용하면 됩니다.

let order = prompt("무엇을 사실껀가요?","Tshirt");

let mapin ={
}
mapin[order] = 1

둘 중에 자신이 잘 할 수 있는 방법으로 쓰면 됩니다. 가독성도 물론 중요하지만 , 우선적으로 동작이 잘되는게 중요하기 때문에 자신에게 맞는 방법을 선택하고 , 둘 다 이해는 할 수 있도록 하는 것이 좋습니다 :)

 

단축 프로퍼티(Property shorthand)

• 코딩을 하다보면 Property 값을 변수에서 받아와 사용하는 경우는 아주아주 빈번하게 발생합니다.  아래와 같이 말이죠!

function Login(Id,Pw){
    	return{
        	Id:Id,
            	Pw:Pw,
            ...//기타정보들
        }
}

let LoginState = Login("hello",1234);

• 이름(key)과 값(value)이 변수의 이름(Parameter,variable)과 동일한 경우, 프로그래머들은 아래와 같이 축약을 할 수 있도록 만들어 놨습니다!(ES6)

function Login(Id,Pw){
    	return{
        	Id, // Id:Id 와 같음
            	Pw, //Pw:Pw와 같음
        }
}

let LoginState = Login("hello",1234);

객체의 순회,탐색

• 객체를 다룰 때는 , for ~in 문이나, 연산자 "In"을 많이 쓰게됩니다.
• 하지만, 일반적인 for문을 사용할 수도 있고, 이것도 자신이 잘할 수 있는 방법으로 일단 구현하면 됩니다.

function makeUser(userId,userPw,name){
	return {
    	userId,
    	userPw,
    	name,
    }
}

const user1 = makeUser("mapin",1234,머핀);

// 객체의 순회
for (let key in user1){
	if("age" in user1){
    	console.log("나이정보 있음");
    }
	console.log(user1[key])
}