[JavaScript] 객체와 프로퍼티

'자바스크립트의 거의 모든 것이 다 객체다!'

✨객체(Object)

: 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙이는 것

- 여러가지 값을 한 번에 저장하고 싶을 때 사용

- key와 value를 콜론(:)으로 구분하는 프로퍼티들의 집합

 

- 중괄호{ } 안에 쉼표로 구분해서 저장해서 사용

- key-value로 이루어진 한 쌍을 객체의 속성(Property)이라고 함

- 프로퍼티 네임(key)은 문자열 타입을 가지고 있음 (따옴표' '로 감싸주지 않고 생략해도 JS가 암묵적으로 문자열로 형 변환)

- 프로퍼티 value 값은 모든 자료형을 사용할 수 있음! (문자열, 숫자, 불린, null, 객체)

- 이 값의 자료형은 object(객체)이며, 객체 안에 객체를 넣을 수도 있음

 

❗Property Name 주의사항

1. 첫 번째 글자는 반드시 문자, 밑줄(_), $중 하나로 시작
2. 띄어쓰기 금지
3. 하이픈(-) 금지
=> 이런 규칙을 벗어나는 경우, 반드시 따옴표로 감싸줘야 함
(띄어쓰기가 있거나, 하이픈(-)이 있거나, 네임 첫 글자에 숫자가 들어갈 경우)

 

---

객체에서 데이터 접근하기

객체도 결국 값이기 때문에 먼저 변수에 할당해 주면서 이름을 만들어줘야 함

 

 

👉객체의 프로퍼티에 접근하기

1) 점 표기법

- 객체 이름 다음에 마침표를 찍고, 따옴표 없이 프로퍼티 네임 입력하는 방식 (가장 간단하고 많이 사용하는 방식)

- 따옴표를 생략할 수 없는 프로퍼티 네임으로는 접근할 수 없음

 

↓ 점 표기법으로 접근이 불가능한 상황에서 사용 ↓

 

2) 대괄호 표기법

- 객체 이름 다음에 대괄호를 열고 그 안에 프로퍼티 네임을 문자열로 작성하는 방식

- 프로퍼티 네임을 좀 더 유연하게 구성할 수 있다는 장점이 있음

 

- 문자열로 만들 수 있는 어떤 방법이든 사용할 수 있으며, 변수에 담긴 값도 활용할 수 있음

 

 

👉객체 안의 객체 접근하기

프로퍼티 네임을 계속 연결해서 접근하면 됨 (프로퍼티 네임 형식에 따라 접근)

console.log(codeit.bestCourse.title);
console.log(codeit.bestCourse['title']);

 

---

객체 프로퍼티 수정

해당 프로퍼티에 접근해서 새로운 값 할당 (변수의 값 재할당같은)

console.log(codeit.name); // 코드잇
codeit.name = 'code';
console.log(codeit.name); // code

객체 프로퍼티 추가

console.log(codeit.age); // undefined
codeit.age = 17;
console.log(codeit.age); // 17

// 대괄호 표기법
codeit['default value'] = '기본값'; 
console.log(codeit['default value']); // 기본값

객체 프로퍼티 삭제

delete 키워드 다음에 프로퍼티 접근 => 삭제

delete codeit.worstCourse;
console.log(codeit.worstCourse); // undefined

 

---

프로퍼티 존재 여부 확인

console.log(codeit.name !== undefined); // true

프로퍼티 값과 undefined를 불일치 비교해서 객체의 프로퍼티 존재 여부 확인할 수 있음

(존재하지 않는 프로퍼티 값은 undefined가 나옴)

 

=> undefined 말고 in 연산자를 통해서도 프로퍼티의 존재 여부 확인 가능

// 'propertyName' in object
console.log('name' in codeit) // true

프로퍼티 네임 문자열로 작성 후, in 연산자 통해 확인할 객체 작성

=> 객체 안에 'name'이라는 이름을 가진 프로퍼티가 있는지 확인해서 불린 형태로 값 리턴

 

in 연산자 사용 이유

실수로 프로퍼티에 undefined 값을 할당했거나, 다른 함수나 변수에 의해서 의도치 않게 undefined 값이 할당된 경우 undefined 불일치로 비교하면 false로 나옴
=> 좀 더 안전하게 프로퍼티 값을 확인하기 위해 in 연산자 활용

 

불린 값을 리턴하므로 if문에서 조건 부분에 활용하기도 좋음

 

---

객체의 메소드

연관성이 있는 여러 함수들을 하나로 묶고 싶을 때 객체 사용할 경우,

프로퍼티 값으로 함수 넣어주면 됨 => 객체의 메소드

// 메소드 (Method)
let greetings = { // 프로퍼티 값으로 함수 정의
  sayHello: function (name) { // 프로퍼티 네임이 함수 이름 대신해 줌
    console.log(`Hello ${name}!`)
  },
  sayHi: function() {
    console.log('Hi!')
  }
};

greetings.sayHello('Song'); // Hello Song!
greetings['sayHello']('Song'); // Hello Song!

(=> console.log도 console이라는 객체의 log라는 메소드)

내장 객체(Standard built-in objects): 자바스크립트가 미리 가지고 있는 객체

 

메소드 사용 이유❓❓

메소드는 어떤 객체의 고유한 동작으로서, 함수에 의미를 부여할 수 있기 때문

=> 어떤 객체의 메소드인지에 따라서 그 객체에 맞는 동작을 할 때 메소드 사용

1) 메소드 활용 시, 다른 함수의 이름 중복을 피할 수도 있고, 객체에 집중해서 함수의 동작 부분 작성 가능
2) 사용할 때도 객체의 고유한 동작으로 구분할 수 있기 때문에 좀 더 의미있는 코드로 활용 가능

let myVoca = {
  addVoca: function (key, value) {
    // 객체[key] = value로 써주면 key:value 쌍으로 객체에 저장됨
    myVoca[key] = value; 
  },
  deleteVoca: function (key) {
    delete myVoca[key];
  },
  printVoca: function (key) {
    console.log(`"${key}"의 뜻은 "${myVoca[key]}"입니다.`);
  },
};

// addVoca메소드 테스트 코드
myVoca.addVoca('parameter', '매개 변수');
myVoca.addVoca('element', '요소');
myVoca.addVoca('property', '속성');
console.log(myVoca);

// deleteVoca메소드 테스트 코드
myVoca.deleteVoca('parameter');
myVoca.deleteVoca('element');
console.log(myVoca);

// printVoca메소드 테스트 코드
myVoca.printVoca('property');

※ 파라미터로 다른 변수에 담긴 값을 가져올 때는 대괄호 표기법 사용

점 표기법으로 key 값에 접근하면, 파라미터 key를 가리키는 것이 아니라 

문자 그대로 key라는 프로퍼티 이름을 가진 프로퍼티 값에 접근하는 것과 같은 의미

---

for..in 반복문

객체 안에 있는 프로퍼티들을 가지고 반복적인 동작을 수행할 때 사용 (객체 내부에 있는 모든 프로퍼티들을 하나씩 다룰 수 있음)

// 동작 방식
for (변수 in 객체) { // in 다음에 반복할 객체를 넣어주면, 객체에 프로퍼티 네임이 변수에 할당
  동작부분           // 객체에 프로퍼티 개수만큼 반복 동작
}

// 예시 코드
for (let key in code) { // 임의의 변수이므로 그때그때 상황에 맞는 변수 이름 지어주면 됨
  console.log(key); // 각 프로퍼티 네임들이 순서대로 출력
  console.log(code[key]); // 대괄호 표기법으로 프로퍼티 값에도 접근 가능
}