[ONEBITE-REACT] JS 기본 - 객체 (Object)

codeConnection 2024. 3. 12.

의미

자바스크립트의 데이터 타입에는 원시 타입과 객체 타입이 있었다.
원시으로는 Number, String, Boolean, Null, Undefined 등이 있었고, 객체 타입에는 Array, Function, RegexExp가 있었다.

객체 타입은 여러가지 값을 동시에 저장할 수 있는 자료형을 말한다.

객체를 이용하면 현실세계에 존재하는 어떤 사물이나 개념을 표현하기 용이하다.
예를 들어 장원영이라는 사람이 있는데, 이 사람의 이름, 나이, 사는곳, 그룹명을 하나의 변수에 담을 수 있는 것이다.

let wonYoung = {
    name: "장원영",
    age: 21,
    location: "용산",
    height: 173
}

객체 생성 방법

객체를 생성하는 방법에는 여러가지가 있다.

객체 리터럴(Obejct Literal)
- const 변수명 = { key1:value1, key2:value2 }

let wonYoung = {
    name: "장원영",
    age: 21,
    location: "용산",
    height: 173
}

-   변수선언 후 중괄호를 열고 그 안에서 key:value가 쌍을 이룬다. 여기서 key:value를 객체 프로퍼티라고 하며,
    key가 name이면 name 프로퍼티라고 한다.
-   value에는 string이 와도 되고 number가 와도 되며 object(객체)가 와도 되고 함수가 와도 되고 모든 것을 값으로 할당할 수 있다.
-   가장 직관적이고 간편해서 이 방법을 주로 사용한다.

생성자 함수(Constructor Function)
- 함수를 정의하고 new 키워드를 사용하여 함수를 호출하고 객체를 생성하는 방법이다.
- 함수 내부에서는 this 키워드를 사용해서 새로운 객체의 속성을 설정한다.
- 복잡해서 잘 사용하지 않는다.

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}
const person1 = new Person('John', 30, 'male');

Object.creat() 메서드
- 이 메서드를 사용해서 새로운 객체를 사용하고 선택적으로 프로토타입을 지정할 수 있다.

const person = Object.create(null);  
person.name = 'John';  
person.age = 30;  
person.gender = 'male';

Class
- ES6부터 도입되었다.
- 클래스 내부에서 생성자(constructor)를 정의하고 new 키워드를 사용하여 클래스를 호출하고 객체를 생성한다.

class Person {  
	constructor(name, age, gender) {  
		this.name = name;  
		this.age = age;  
		this.gender = gender;  
	}  
}

const person1 = new Person('John', 30, 'male');

지금 단계에서는 1번의 객체 리터럴 방법만 익혀도 된다.

객체 프로퍼티를 다루는 방법

특정 프로퍼티에 접근하는 방법

점 표기법(Dot Notation)

객체의 변수명 뒤에 . 점을 붙이고 속성의 key를 입력하여 해당 프로퍼티에 접근할 수 있다.

console.log(wonYoung.name);

점 표기법은 간결해서 가독성이 좋다는 장점이 있지만 속성 이름이 변수 이름과 동일한 경우에만 사용할 수 있다.
즉, 정적인 속성 이름에만 사용할 수 있다.

이를 이해하기 위해서는 정적인 속성 이름(Static Property Name)과 동적인 속성 이름(Dynamic Property Name)의 차이를 알아야 한다.

정적인 속성 이름(Static Property Name)

let wonYoung = {  
	name: "장원영",  
	age: 21,  
	location: "용산",  
	height: 173  
}

console.log(wonYoung.name);

위의 코드에서는 wonYoung.name으로 wonYoung이라는 변수의 name이라는 key에 접근했는데 name이라는 키는 이미 wonYoung이라는 객체 내에서 key로 지정되었기 때문에 바뀔 일이 없다. 이것을 정적인 속성 이름이라 하고, 이렇게 key가 이미 설정되어 바뀔 일이 없을 때는 점 표기법으로 key를 불러올 수 있다.

하지만 아래의 경우에는 조금 다르다.

let wonYoung = {  
    [name]: '장원영',  
    age: 21  
}

name = memberName;

console.log(wonYoung.memberName);

name이라는 키를 대괄호로 묶었고 외부에서 key 값을 별도로 할당하는 형태가 된다.
따라서 이 key는 계속 변할 수 있기 때문에 점 표기법으로는 프로퍼티에 접근할 수 없다.

괄호 표기법(Bracket Notation)

괄호 표기법은 점 표기법과 다르게 동적인 속성 이름에 접근할 때 사용한다.
기본사용법은 변수명:["key명"] 이다.따옴표가 누락되면 key값이 아닌 변수명으로 이해하게 된다.
"key값"이 아닌 변수명으로 인식시키는 경우는 이렇게 응용이 가능하다. 그 변수를 계속해서 동적으로 값을 바꿔주면서 key와 value를 추가하는 것이다.

예를 들어서 창고의 재고를 관리하는 객체를 생성한다고 가정해보겠다.

const inventory = {};

위와 같이 객체를 선언만 하고 아무런 값도 초기화하지 않는다.
이 상태에서 동적으로 변수를 선언하듯 key와 value를 계속해서 할당할 수 있다.

const inventory = {};

let itemName1 = "사과";  
let itemQuantity1 = 10;  
inventory\[itemName1\] = itemQuantity1;

console.log(inventory); // {사과: 10}

// 계속해서 추가할 수 있다.

let itemName2 = "바나나";  
let itemQuantity2 = 5;  
inventory\[itemName2\] = itemQuantity2;

console.log(inventory); // {사과: 10, 바나나: 5}

위처럼 괄호 표기법은 key와 value가 계속 변경해야 하는 동적인 속성 이름에 사용하기에 유리하다.

새로운 프로퍼티를 추가하는 방법

wonYoung.job = "singer";  
wonYoung["favoriteFood"] = "Sushi";

위와 같이 점 표기법으로는 변수명.key = value 괄호 표기법으로는 변수명["key"] = value 형태로 프로퍼티를 새롭게 계속 추가해줄 수 있다.

프로퍼티를 수정하는 방법

프로퍼티의 key를 수정하는 방법

변수명.바꿀key = 변수명.원래key;
delete 변수명.원래key;

const wonYoung = {  
	name: "장원영",  
	age: 21,  
	job: "singer"  
}

wonYoung.koreanName = wonYoung.name;

console.log(wonYoung); // {name: '장원영', age: 21, job: 'singer', koreanName: '장원영'}

위 코드에서는 원래 key를 삭제해주는 delete wonYoung.name; 을 넣지 않아서 koreanName이라는 키가 하나 더 추가되었다.
delete를 추가하면 아래와 같이 의도한 대로 name이라는 key가 koreanName이라는 key로 바뀌게 된다.

다만 바꾼 key는 조회할 때 가장 마지막에 배열된다.

const wonYoung = {  
	name: "장원영",  
	age: 21,  
	job: "singer"  
}

wonYoung.koreanName = wonYoung.name;  
delete wonYoung.name;

console.log(wonYoung); // {age: 21, job: 'singer', koreanName: '장원영'}

프로퍼티의 value를 수정하는 방법

점 표기법 : 변수명.key = 바꿀 값
괄호 표기법 : 변수명["key"] = 바꿀 값

프로퍼티를 삭제하는 방법

점 표기법 : delete 변수명.key;
괄호 표기법 : delete 변수명["key"];

프로퍼티의 존재 유무를 확인하는 방법

in 연산자

'확인할 프로퍼티명' in 변수명

const wonYoung = {  
	name: "장원영",  
	age: 21,  
	job: "singer"  
}

console.log('name' in wonYoung); // true

hasOwnProperty() 메서드

변수명.hasOwnProperty('확인할 프로퍼티명'))
이 메서드를 사용하여 프로퍼티를 확인하는 경우 프로토타입 체인을 통해 상속받은 속성인지는 확인하지 않고, 확인하려는 프로퍼티가 객체의 직접적인 프로퍼티인지 여부만 확인한다.

const wonYoung = {  
	name: "장원영",  
	age: 21,  
	job: "singer"  
}

console.log(wonYoung.hasOwnProperty('name')); // true

undefined 체크

변수명.확인할 프로퍼티명 !== undefined

확인할 프로퍼티가 undefined 상태가 아니라면 true를 나타내라는 식을 통해 프로퍼티가 존재하는지 확인해볼 수 있다.
확인할 property가 undefined 상태라면 존재하지 않는 것이기 때문에 !== 비동등 연산자를 사용하여 확인할 수 있다.

상수 객체

변수는 var, let으로 선언하는 것을 의미하고 상수는 const로 선언하는 것을 의미한다.

변수는 변할 수 있는 값이고, 상수는 변하지 않는 값이다. 그런데 여기서 값이 변하지 않는다는 의미는 이미 선언된 상수에 새로운 값을 할당할 수 없다는 의미이고 이미 선언된 상수의 프로퍼티를 수정하거나 삭제하는 것이 불가능하다는 것은 아니다.

따라서 상수로 선언된 객체에서도 이미 할당된 key와 value를 수정하거나 삭제하는 것은 가능하다.

const wonYoung = {
    name: "장원영",
    age: 21,
    job: "singer"
}


wonYoung.name = "WonYoung"; // 수정. 가능.
wonYoung.job = "가수"; // 수정. 가능.
delete wonYoung.age; // 삭제. 가능.

console.log(wonYoung); // {name: 'WonYoung', job: '가수'}

wonYoung = {town : "용산"}; // 에러

메서드 (method)

프로퍼티가 함수인 것을 일컫는다.

const wonYoung = {
    name: "장원영",
    age: 21,
    job: "singer",
    
    // 프로퍼티가 함수인 것 = 메서드
    sayHi: function() {
        console.log("안녕하세요");
    }
}

wonYoung.sayHi(); // "안녕하세요"

객체에서 프로퍼티는 보통 key: value;로 쌍을 이루지만 위의 코드를 보면

sayHi: function() {}와 같이 함수로 설정되었다. 이것을 메서드라 한다.

이 메서드는 화살표 함수로도 표현 가능하고, 화살표와 콜론도 삭제해서 더 축약해서 사용할 수 있다.

이를 메서드 선언이라 한다.

즉 methodName() {} 와 같이 축약된 형태로 선언 가능하다.

// 화살표 함수로 변경
const wonYoung = {
    name: "장원영",
    age: 21,
    job: "singer",
    
    // 프로퍼티가 함수인 것 = 메서드
    sayHi: () => {
        console.log("안녕하세요");
    }
}

wonYoung.sayHi(); // "안녕하세요"

// 메서드 선언 (화살표도 삭제하고 key와 value를 구분하는 : 콜론도 삭제)
const wonYoung = {
    name: "장원영",
    age: 21,
    job: "singer",
    
    // 메서드 선언
    sayHi() {
        console.log("안녕하세요");
    }
}

wonYoung.sayHi(); // "안녕하세요"

이렇게 선언된 메서드는 점 표기법이나 괄호 표기법으로 호출도 가능하다.

wonYoung.sayHi(); // 점 표기법 호출
wonYoung["sayHi"](); // 괄호 표기법 호출, 함수의 () 소괄호가 대괄호 밖으로 나감에 유의.

'Programing > React' 카테고리의 다른 글

[ONEBITE-REACT] JS 심화 - Truthy와 Falsy (0)	2024.03.12
[ONEBITE-REACT] JS 기본 - 배열 (Array) (0)	2024.03.12
[ONEBITE-REACT] JS 기본 - 스코프 (Scope) (0)	2024.03.12
[ONEBITE-REACT] JS 기본 - 콜백 함수 (Callback Function) (0)	2024.03.12
[ONEBITE-REACT] JS 기본 - 함수 표현식(Function Expression)과 화살표 함수(Arrow Function) (0)	2024.03.11

[ONEBITE-REACT] JS 기본 - 객체 (Object)

의미

객체 생성 방법

객체 프로퍼티를 다루는 방법

특정 프로퍼티에 접근하는 방법

점 표기법(Dot Notation)

괄호 표기법(Bracket Notation)

새로운 프로퍼티를 추가하는 방법

프로퍼티를 수정하는 방법

프로퍼티의 key를 수정하는 방법

프로퍼티의 value를 수정하는 방법

프로퍼티를 삭제하는 방법

프로퍼티의 존재 유무를 확인하는 방법

in 연산자

hasOwnProperty() 메서드

undefined 체크

상수 객체

메서드 (method)

'Programing > React' 카테고리의 다른 글

댓글

티스토리툴바

[ONEBITE-REACT] JS 기본 - 객체 (Object)

의미

객체 생성 방법

객체 프로퍼티를 다루는 방법

특정 프로퍼티에 접근하는 방법

점 표기법(Dot Notation)

괄호 표기법(Bracket Notation)

새로운 프로퍼티를 추가하는 방법

프로퍼티를 수정하는 방법

프로퍼티의 key를 수정하는 방법

프로퍼티의 value를 수정하는 방법

프로퍼티를 삭제하는 방법

프로퍼티의 존재 유무를 확인하는 방법

in 연산자

hasOwnProperty() 메서드

undefined 체크

상수 객체

메서드 (method)

'Programing > React' 카테고리의 다른 글

관련글

댓글

티스토리툴바