객체에 대해

🔶 객체란

객체란?

: 다양한 타입의 값을 하나의 변수에 저장할 수 있도록 해주는 데이터 형식임
: 프로퍼티 값에 모든 자료형이 저장되므로 다양한 타입의 값을 한번에 관리할 수 있음.

필요한 이유?

: 각각의 변수에 값을 일일이 저장하는 대신, 하나의 단위로 구조화 할 수 있어 유용함.

• 각각의 변수로 데이터를 관리한다면?

// Julie에 대한 정보들을 각각의 변수를 선언해서 관리함
const age = 20;
const local =  "Korea";
const doing = function () {   
    console.log('study');
  };

→ 이렇게 객체를 사용하면, 한 객체로 Julie에 관한 내용을 관리할 수 있어서 유용함

const Julie = {
	age : 20,
	local : "Korea",
	hobby : "dancing",
    doing: function () {   
    console.log('study');
  },
}

🔶 객체의 property, key, value

객체의 형태

• object = {key : value};
  : 객체는 키와 값, 즉 프로퍼티들의 집합체이다.
  : 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 ”프로퍼티(property)”를 여러 개 넣을 수 있음.

• key엔 일반적으로 문자열 사용함.
  : 네이밍 규칙을 지킨 경우 따옴표 생략 가능 ex) name
  : 네이밍 규칙을 지키지 않은 경우 따옴표 꼭 붙여줘야 함. ex)"@name"

• value엔 “모든 자료형”이 허용.
  : 텍스트, 숫자, 함수, 객체 등등....

// user라는 객체 선언함.
 
let user = { 
  name: 'John',            //  키: "name"    , 값: "John" (자료형 : 문자열)
  age: 30,                 //  키: "age"     , 값: 30 (자료형 : 숫자형)
  activity: function () {  //  키: "activity", 값: 함수 (자료형 : 함수형)
    console.log('surfing');
  },
};

프로퍼티와 메서드

• 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라 부른다.

  • 프로퍼티: 'John' , 30
  • 메서드 : function () { console.log('surfing') }

• 프로퍼티 값: 객체의 상태를 나타내는 “값(data)”

• 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 “동작(behavior)”
  
  

🔶 객체에 접근 하는 두 가지 방법

※ 네이밍 규칙: 변수 이름같이 식별자 이름 지을 때 이 규칙을 따라야 함.

1. 식별자 이름은 데이터를 쉽게 식별할 수 있기위해 서술적이어야 함.
2. 방식 ex) topMenuBtn , numCount
3. 공백 절대 안됨 ex) top menu(x)
4. _ , $를 제외한 특수문자 안됨 ex) topMenu!(x) top-Menu(x) $topMenu(o)
5. 숫자는 첫글자 에서만 안됨 ex) 2topMenu(x) topMenu2(o)

1. 마침표 표기법

• 키 이름이 네이밍 규칙을 준수한 '유효한 변수 식별자’인 경우에 사용함.

var person = {
	name : "Lee",
	age : 20
}

// 1.마침표 표기법으로 접근
console.log(person.name); // Lee
console.log(person.age); // 20

2. 대괄호 표기법

: 대괄호 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어줘야 함!
: ex) ["name"]

<언제 사용하는지?>

1) 프로퍼티 키가 네이밍 규칙을 준수한 이름일 땐, 마침표 표기법이든 대괄호 표기법이든 상관없음.

var person = {
	name : "Lee",
	age : 20
}
	// 2.대괄호 표기법으로 접근도 가능
console.log(person['name']); // Lee
console.log(person['age']); // 20

2) 프로퍼티 키가 네이밍 규칙을 준수하지 않은 이름일 때**

var person = {
	'last^name' : "Lee", // 식별자 이름에 ^라는 특수문자 안되는데 사용함 (네이밍 규칙 준수x)
		1 : 20             // 식별자 이름 첫글자에 숫자형 안되는데 사용함 (네이밍 규칙 준수x)
}
	
console.log(person['last^name']); // Lee
console.log(person['1']); // 20

3) 변수명으로 프로퍼티 키에 접근할 때

• [변수명] ← 따옴표 없이 바로 변수명 씀.
• for (const key in menu) 에서 변수key에 menu객체의 프로퍼티 키가 할당됨.
  : .key로는 접근은 안됨. 객체 안에 key라는 프로퍼티 키가 있어야 접근 가능한 것임.

// menu 객체를 순회하면서 각 프로퍼티 값을 콘솔로 찍어봄.
function multiplyNumeric() {
  const menu = {
    width: 200,
    height: 300,
    title: 'My menu',
  };

  for (const key in menu) {
    console.log(menu[key]); // 200 , 300 , My menu
  }
}

multiplyNumeric();

🔶 객체의 값을 추가,수정, 삭제하는 방법

추가

let person = {
  name: "Kim"
}; 
person.age = 20;

console.log(person); // {name: "Kim", age: 20}

수정

객체의 프로퍼티 키는 유니크해서, 중복 선언하면 나중에 선언한 프로퍼티로 덮어쓰여짐.

var foo = {
  name: 'Lee',
	age: 20
};

foo.name = 'Kim';
console.log(foo); // {name : "Kim, age: 20} 

삭제

var foo = {
  name: 'Lee',
	age: 20
};

delete foo.age;
console.log(foo); // {name: "Kim"}

🔶 배열의 타입이 객체인 이유

typeof [] → object
자바스크립트의 배열은 엄밀히 말해 일반적 의미의 배열이 아니다.
자바스크립트의 배열은 일반적인 배열의 동작을 흉내낸 특수한 “객체”이다.

• 사실, 배열의 인덱스는 프로퍼티 키 이고, 배열의 요소는 프로퍼티 값이다.
  (참고 사이트 : https://poiemaweb.com/js-array-is-not-arrray)

• prototype chain
  : prototype chain 으로 인한 "자바스크립트의 모든 것은 객체다"라는 원리 때문에,
  배열은 확장된 객체인 것임!