자바스크립트_기초_4.1

HwiJeongLee·2021년 9월 8일

기초 자바스크립트

자바스크립트

목록 보기

24/28

객체

자바스크립트에는 8가지 자료형이 있습니다.
자료형은 크게 원시형(7개)과 객체형(1개)으로 구분할 수 있습니다.

🎁원시형
하나의 데이터만 담을 수 있는 자료형

🎁원시형의 종류
Boolean, Null, Undefined, Number, BigInt, String, Symbol

객체형과 프로퍼티

객체형은 원시형과는 다르게 다양한 데이터를 담을 수 있습니다.
즉, 키로 구분된 데이터 집합이나 복잡한 개체를 저장할 수 있습니다.

객체는 중괄호 {}를 이용해서 만듭니다.
중괄호 안에는 '키 : 값' 쌍으로 구성된 프로퍼티(property)를 여러개 넣을 수 있습니다. 키는 문자형, 값은 모든 자료형이 허용됩니다.

객체에선 키를 이용해 프로퍼티를 쉽게 탐색, 추가, 삭제할 수 있습니다.

빈 객체를 생성하는 방법은 두가지가 있습니다.

let user = new Object(); // 1) 객체 생성자 문법
let user = {}; // 2) //객체 리터럴 문법

중괄호를 이용해 객체를 선언하는 것을 객체 리터럴이라고 하고 객체를 선언할 때 주로 사용합니다.

let user = {
    // 첫번째 프로퍼티 -> 키는 name , 값은 hwi
    name : "Hwi", 
    // 두번째 프로퍼티 -> 키는 age, 값은 25
    age : 25, 
    // 세번째 프로퍼티 -> 키는 my motto, 값은 Love myself
	"my motto" : "Love myself",
}

alert(user.name) // Hwi
alert(user.age) // 25

// ❗아래 코드는 에러를 발생시킵니다.
user.my motto = "Don't Worry Be Happy" 

// 공백이 포함된 키의 경우 대괄호 표기법으로 값을 조회, 수정, 삭제합니다.
user["my motto"] = "Don't Worry Be Happy"

앞에서 언급한 것과 같이 키는 문자열, 값은 모든 자료형으로 표현할 수 있습니다.

세번째 프로퍼티 처럼 키 값에 공백을 포함해야 한다면 " "으로 묶어서 키를 표현합니다.
이 때 키 값을 조회, 수정, 삭제하기 위해서는 대괄호 표기법을 사용할 수 있습니다.

// user["my motto"] = "lalala" 와 같습니다.
let key = "my motto"
user[key] = "lalala"

key = "name"
alert(user[key]) // name에 저장된 값이 출력됩니다.
alert(user.key) // 오류가 발생합니다. 즉, 점 표기법은 불가능합니다.

객체의 끝이 쉼표로 끝날 수도 있습니다.
이렇게 마지막에 있는 쉼표를 ‘trailing(길게 늘어지는)’ 혹은 ‘hanging(매달리는)’ 쉼표라고 합니다. 모든 프로퍼티가 유사한 형태를 보여서 프로퍼티 추가, 삭제, 이동하는 것이 쉬워집니다.

delete연산자를 사용하면 프로퍼티를 삭제할 수 있습니다.

delete user.age // 키가 age인 프로퍼티 삭제

상수 객체는 수정될 수 있습니다.
일반적으로 const는 상수로 수정이 불가능합니다.
const user = {
  name: "Hwi"
};

user.name = "Jeong"; // name의 값이 Jeong으로 변경됩니다.

alert(user.name); // Jeong
const는 user의 값을 고정할 뿐 그 안의 내용은 고정하지 않습니다.
즉 user = ...를 전체적으로 설정하려고 할 때만 오류가 발생합니다.

계산된 프로퍼티

let fruit = prompt("어떤 과일을 구매하시겠습니까?","apple");
let bag = {
	// 변수 fruit에서 프로퍼티 이름을 동적으로 받아온다.
	[fruit] : 5; 
}

// 만약 fruit에 apple이 할당되었다면 5 출력, 그 외는 undefined 출력
alert(bag.apple)

let book = prompt("어떤 책을 구매하시겠습니까?","fiction book");
// 변수 book을 이용해 프로퍼티 이름을 만들었습니다.
bag[book] = 4

대괄호 표기법은 프로퍼티 이름과 값의 제약을 없애주므로 점 표기법보다 강력합니다. 하지만 작성하기 번거롭다는 단점이 있습니다.

그렇기 때문에 프로퍼티 이름이 확정되거나 단순하면 점 표기법을 사용하다가 복잡한 상황이 생기면 대괄호 표기법으로 바꾸는 것이 일반적입니다.

단축 프로퍼티

프로퍼티 값을 기존 변수에서 받아와서 사용하기도 합니다.

function makeUser(name, age){
	return{
    	name : name,
        age : age,
        /// etc...
    }
}

let user = makeUser("Hwi",25);
alert(user.name) // Hwi

위의 프로퍼티들은 이름과 값이 변수의 이름과 동일합니다. 이럴 때는 아래 코드와 같이 name:name 대신 name만 적어줘도 프로퍼티를 설정할 수 있습니다.

function makeUser(name, age){
	return{
    	name , // name: name 
        age , // age: age
        /// etc...
    }
}

프로퍼티 키 이름의 제약사항

변수는 for,let,return과 같은 예약어를 사용하면 안됩니다.
❗ 하지만 객체 프로퍼티는 이런 제약이 없습니다.

키 값은 어떤 문자형, 심볼형이든 프로퍼티 키가 될 수 있습니다.
문자형, 심볼형이 아닌 다른 키 이름은 문자열로 자동 형 변환됩니다.

객체 프로퍼티 키에 쓸 수 있는 문자열에는 제약이 없습니다.
하지만 단 하나, __proto__는 특별 대우를 받습니다. 이는 추후 더 자세하게 다뤄질 예정입니다.

'in' 연산자

자바스크립트 객체의 중요한 특징 중 하나는 존재하지 않는 프로퍼티에 접근하려고 해도 에러가 발생하지 않고 undefined를 반환하는 것입니다.

이 때 in 연산자를 사용하면 프로퍼티 존재 여부를 확인할 수 있습니다.

let user = {name : "Jhon", age : 20}

// 이 때 프로퍼티 이름을 큰따옴표로 감싸주어야 오류가 줄어듭니다.
alert("name" in user) // true
alert("age" in user) // false

for...in 반복문

for...in 반복문을 사용하면 객체의 모든 키를 순회할 수 있습니다.

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // 키
  alert( key );  // name, age, isAdmin
  // 키에 해당하는 값
  alert( user[key] ); // John, 30, true
}