JavaScript Objects

Minju Kim·2022년 2월 8일

목록 보기

2/7

객체 그게 뭐냐구?

#1
🏨 방금 내가 호텔을 인수받았다고 해 보자.
나는 일단 🦸‍♂️벨보이 한 명을 고용할 것이다.

let bellBoy1 = {
  name : "Timmy",
  age : 19,
  hasWorkPermit: true,
  language: ["French","English"]
}

#2
그런데, 호텔이 너무 잘 되는 것이다. 그래서 벨보이를 3명, 5명 100명 고용하게 되었다!. 🦸‍♂️🦸‍♂️🦸‍♂️🦸‍♂️🦸‍♂️🦸‍♂️🦸‍♂️🦸‍♂️
그런데, 얘네들의 정보를 하나하나 다 적으려면 매번, 괄호를 열어서, 키 값을 적고, 정보를 적고,, 휴, 이걸 언제 다 하나!
그래서 나는 벨보이를 만드는 공장(Constructor Function)을 만들기로 한다.

function BellBoy (name, age, hasWorkPermit, languages){
  this.name = name;
  this.age = age;
  this.hasWorkPermit = hasWorkPermit;
  this.language = languages;
}

#3
그러면 이제 내가 만든 그 공장에서 다음과 같이 간단하게 써도, 벨보이를 만들수 있게 된다. (Initialise Object)

const bellBoy2 = new BellBoy("Jimmy", 21, true, ["English, German"];
const bellBoy3 = new BellBoy("Henry", 24, true, ["Dutch", "French"];

여기서 주목할 것은 new를 사용한다는 점과 Bellboy에서 첫 글자가 대문자라는 것이다.

#4
지금까지는 벨보이의 프로퍼티만 공장에 넣어두었다. 그런데 가방을 가져오는 기술을 가르쳐 주고, 그 행동을 하게 만들려고 한다. 자, 마지막 줄을 다음과 같이 추가한다.

function BellBoy (name, age, hasWorkPermit, languages){
  this.name = name;
  this.age = age;
  this.hasWorkPermit = hasWorkPermit;
  this.language = languages;
  this.moveBag = function(){
  	//move the bag from the lobby to the room
  }
}

#5
이젠 다른 벨보이에게도 똑같이 가방을 가져오라고 시킬 수 있다!!

const bellboy3 = new BellBoy("Jake", 13, true, ["English"]);
bellboy3.moveBag();

이렇게 이해한 내용을, 코어 자바스크립트를 보며 조금 더 세세하게 이해해 보자. (다음은 원문의 글을 혼자 이해하기 위해 콘솔에 입력해보며 정리한 내용)

객체

1. 객체 basics

1. 리터럴과 프로퍼티(다시 말해, { }괄호와 그 안에 들어가는 ‘키:값’)

1-1 . 기본 구성

객체의 기본 구성은 다음과 같다.

let user = {        // 중괄호로 객체 만들기
	name: "Minju",    // 프로퍼티 -> 키 : 밸류
	age : 30
};

1-2. 프로퍼티 삭제하기

delete 연산자를 이용하여 프로퍼티를 삭제할 수 있다.

delete user.age;

1-3. 여러 단어를 조합해 프로퍼티 이름을 만든 경우, 이름을 따옴표로 묶어줘야 한다.

let user = {
	"likes bread" ; true, //복수의 단어는 따옴표로 묶어준다.
	 name: "Minji"
}

2. 대괄호 표기법

바로 위의 1-3. 내용과 같이 여러단어를 조합해 프로퍼티 키를 만든 경우에는, 점 표기법으로 프로퍼티 값을 읽을 수 없다. 이 대 사용하는게 바로 대괄호 표기법!

let user = {};

//set
user["likes bread"] = true;

//get
alert(user["likes bread"]); // true

이를 사용하면 아래 예시에서 변수를 키로 사용한 것과 같이, 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있다. 예를 들어, 변수 key는 런타임에 평가되기 때문에 사용자 입력 값에 따라 값이 변경될 수 있다. 어떤 경우든, 평가가 끝난 이후의 결과가 프로퍼티의 키로 사용된다. 바로 아래와 같이!

// 문자열을 조합한 키
let key = "likes bread";
user[key] = true;  // user["likes bread"] = true;와 같다.

// 변수 key의 평가가 끝난 이후의 결과가 프로퍼티의 키로 사용됨
let user = {
	name : "Minju",
	age : 30
};

let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?");
alert(user[key]);  // Minju (프롬트 창에 name을 입력한 경우)
alert(user.key); // undefined (점 표기법은 이 방법을 쓸 수 없다.)

3. 단축 프로퍼티

프로퍼티 값을 기존 변수에서 받아와 사용하는 경우에, 즉 이름과 값이 변수의 이름과 동일할때 프포퍼티 값 단축 구문을 사용해 코드를 짧게 줄인다.

function makeUser(name, age){
	return {
			name: name,
			age: age, 
	};
}

// 단축 프로퍼티를 사용한 예
function makeUser(name, age){
	return{
		name,
		age,
	};
}

4. 프로퍼티 이름의 제약사항

은 없다. 딱 하나, __proto__ 를 제외하고 나머지는 let for return같은 애들을 사용해도 상관없다.

그리고 프로퍼티의 키는 string이라고 했으니 숫자를 넣어도 자동으로 문자로 변환된다.

5. ‘in’연산자로 프로퍼티 존재 여부 확인하기

자바스크립트의 특징 중 하나는, 존재하지 않는 프로퍼티에 접근하려 해도 에러가 나기보다는 undefined를 반환한다는 점이다. 따라서 ‘in’연산자를 통해 존재 여부를 확실하게 검사할 수 있다.

// 기본 문법
"key" in object

//사용 예시
let user = { name: "Minju", age: 30 };
console.log("name" in user); // true

6. ‘for...in’ 반복문

을 사용하여 객체의 모든 키를 순회할 수 있다.

let user = {
	name: "Minju",
	age : 30,
	isWoman : true,
}

for (let key in user) { // 반복변수를 선언(let key)했다는 점을 주목하자.
	console.log(key); // "name", "age", "isWoman"
}

2. 참조에 의한 객체 복사

객체는 원시타입과 다르게 ‘참조에 의해'저장되고 복사된다. 객체를 서랍장에 비유하면, 변수는 서랍장을 열 수 있는 열쇠라고 할 수 있다. 아래 예제를 보자.

let user = { name: 'Minju'};

let admin = user;

admin.name = "Minji";

console.log(user.name) // !!'Minju'가 출력된다!

1. 객체 복사, 병합과 Object.assign

위에서처럼, 객체가 할당된 변수를 복사하면, 동일한 객체에 대한 참조 값이 하나 더 만들어진다.

그런데, 객체 자체를 하나 더 만들고 싶다면 어떻게 해야 하는가? 방법은 있는데 사실 객체를 복제해야 할 일은 거의 없다. 참조값 복사로 해결 가능한 일이 대다수이기 때문.

그 전에 먼저 객체를 병합해주는 object.assign을 살펴보자

//Object.assign 기본 syntax
Object.assign(dest,[src1, src2,...])

// assign 메서드를 사용해 여러객체를 하나로 병합
let user = {name: "Minju"}

let permissions1 = {canView: true};
let permissions2 = {canEdit: false};

Object.assign(user, permissions1, permissions2);

// now user = {name: "Minju", canView: true, canEdit: false}

2. 중첩 객체 복사

만약에 우리가 복사하고자 하는 user가 다른 객체에 의한 참조값이라면? 즉 안에 객체가 또 하나 들어있다면? 복사를 시도해보자

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

let clone = Object.assign({}, user);

console.log(clone.sizes) // user의 size와 똑같이 나온다.

user.sizes는 객체이기 때문에 참조값이 복사되어, clone과 user는 같은 sizes를 공유하게 된다. 이를 ‘얕은 복사'라고 한다.

이 문제를 해결하려면 ‘깊은 복사'를 가능하게 해주는 자바스크립트 라이브러리를 사용하도록 한다.

3. 메서드와 this

객체 프로퍼티에 저장된 함수를 ‘메서드'라고 한다.
메서드는 this로 객체를 참조한다.
함수를 선언할 때 this를 사용할 수 있다. 다만, 함수가 호출되기 전까지 this엔 값이 할당되지 않는다.
함수를 객체 프로퍼티에 저장해 object.method()같이 메서드 형태로 호출하면, this는 object를 참조한다.

💡자꾸 헷갈려하는 메서드 단축 구문!

user = {
	sayHi: function(){
		alert("Hello");
  }
};

// 단축구문 사용한 예
user = {
	sayHi() {
		alert("Hello");
	}
};

Minju Kim

⚓ A smooth sea never made a skillful mariner

이전 포스트

DOM이란 무엇인가?

다음 포스트