객체 object

객체 object
실제로 존재하는 사물을 의미하는 추상적 개념이고
이름과 값으로 구성된 속성을 가진 자바스크리브의 기본 데이터 타입

// 4개모두 속성(property)
이름 : 구름
나이 : 7살
// 아래 두개는 메소드 : 동작이 가능한 함수인 속성
산책하기()
밥먹기()

자바스크립트에서 여러 자료를 다룰 때에는 객체를 사용한다
배열도 객체이기 때문에 여러자료를 다룰 수 있었다

배열 내용 간략히

const array = ['사과', '바나나', '망고', '딸기']

배열에는 인덱스와 요소가 있어서 각각의 요소를 사용하려면 배열이름 뒤에 인덱스로 접근한다

array[0] array[1]

배열은 객체를 기반으로 만들어졌으므로 배열과 객체는 상당히 비슷하지만
배열은 요소에 접근할 때 인덱스를 사용하지만
객체는 키를 사용해서 요소에 접근한다

const product = {
  제품명 : '7D 건조 망고',
  유형 : '당절임',
  성분 : '망고, 설탕, 메타중아황산나트륨, 치자황색소',
  원산지 : '필리핀'
}

키	속성
제품명	7D 건조 망고
유형	당절임
성분	망고, 설탕, 메타중아황산나트륨, 치자황색소
원산지	필리핀

배열과 마찬가지로 객체 뒤에 대괄호나 온점을 사용해서
키를 입력하면 객체의 요소에 접근할 수 있다

온점을 가용하면 보조기능을 활용할 수 앗어서 더 많이 사용된다

// [] 사용
product['제품명'] // 7D 건조 망고
product['유형'] // 당절임
product['성분'] // 망고, 설탕, 메타중아황산나트륨, 치자황색소
product['원산지']  // 필리핀

// . 사용
product.제품명 // 7D 건조 망고
product.유형 // 당절임
product.성분 // 망고, 설탕, 메타중아황산나트륨, 치자황색소
product.원산지  // 필리핀

식별자로 사용할 수 없는 단어를 키로 사용할 때에는 문자열로 사용 해야 한다
식별자가 아닌 문자열을 키로 사용했을 때에는 무조건 대괄호를 사용 해서 객체의 요소에 접근할 수 있다

const object = {
  "with space": 273,
  "whit ~!@#$%^^&Y*()": 52
}

object['with space']
object['whit ~!@#$%^^&Y*()']

메소드 내부에서 this 키워드 사용하기
메소드 내에서 자기자신이 가진 속성을 출력하고 싶을 때에는
this 키워드를 이용해서 자기 자신이 가진 속성임을 분명하게 표시해야 한다

const pet = {
  name : '구름'
  eat : function(food) {
    alert(this.name + '은/는' + food + '을/를 먹습니다.')
  }
}

pet.eat('밥')
// 구름은/는 밥을/를 먹습니다

동적으로 객체 속성 추가/제거

객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것을
동적을 속성으로 추가한다, 동적으로 속성을 제거한다고 표현한다

객체를 생성한 이후에 속성을 지정하고 값을 지정하면 된다

// 객체 선언
const student = {}
student.이름 = '윤인성'
student.취미 = '악기'
student.장래희망 = '생명공학자'

// JSON.stringfy() 메소드는 콘솔출력에서 쉽게 볼 수 있는 방법이라고만 알자 ㅠㅠ
console.log(JSON.stringfy(student, null, 2))

/* 실행결과
{
  '이름' : '윤인성',
  '취미' : '악기',
  '장래희망' : '생명공학자'
}
*/

동적으로 객체 속성 제거하기

delete 키워드를 사용한다

delete 객체.속성

// 객체 선언
const student = {}
student.이름 = '윤인성'
student.취미 = '악기'
student.장래희망 = '생명공학자'

// 객체의 속성 제거
delete.student.장래희망

//student 객체 출력
console.log(JSON.stringfy(student, null, 2))

/* 실행결과
{
  '이름' : '윤인성',
  '취미' : '악기',
}
*/

메소드 간단 선언 구문

원래는 function() { } 형태로 메소드를 선언할 수 있는데
최신 자바스크립트에서는 메소드를 조금 더 쉽게 선언이 가능한 구문이 있다

// 변수 선언
const pet = {
  name : '구름', 
  eat (food) {
    alert(this.name +'은/는' + food + '을/를 먹습니다.')
  }
}

// 메소드 호출
pet.eat('밥')

/* 실행결과
구름은/는 밥을/를 먹습니다
*/

현대 프로그래밍 언어는 모두 객체 지향이라는 패러다임을 기반으로 한다
그래서 모든 개발이 객체로 이루어진다

자바스크립트에서 사용하는 자료형
1. 기본 자료형
숫자
문자열
불
2. 객체 자료형
함수
배열
속성과 메소드를 가질 수 있는 모든 것

a라는 이름의 배열을 선언하고
배열에 속성을 지정한 후 확인해보면
배열이 속성을 가질 수 있다는 것을 알 수 있다

> const a = []
// undefined

> a.sample = 10
// 10 : 속성 추가하기

> a.sample
// 10 : 속성이 추가됨

함수도 선언하고 함수에 속성을 지저한 후 확인해보면
함수가 속성을 가질 수 있다는 것을 알 수 있다

> function b () { }
// undefined

> b.sample = 10
// 10

> b.sample
// 10

typeof 연산자를 사용해서 배열의 자료형을 확인해보면 object 라고 객체가 출력된다
그래서 배열인지 확인해보려면 Array.isArray() 메소드를사용한다

> typeof a
// 'object'

> Array.isArray(a)
// true

함수는 실행이 가능한 객체라는 특이한 자료
typeof 연산자를 사용해서 자료형을 확인해보면 function 을 출력한다
함수는 객체의 특성을 완벽하게 가지고 있으므로
자바스크립트에서는 함수를 일급객체에 속한다고 표현한다

> typeof b
// "function"

기본자료형

실체가 있는 것 중에서 객체라 아닌 것을 기본자료형이라고 하는데
숫자, 문자열, 불이 포함된다

실체가 있는것 : undefined, null

이러한 자료형들은 객체가 아니기 때문에 속성을 가질 수 없다

> const c = 273
// undefined

> c.sample = 10
// 10 : 속성을 만들 수 있는 것처럼 보인다

> c.sample
// undefined : 실제로는 속성이 만들어지지 않는다

c.sample = 10 은 속성을 추가하는 것 처럼 보이지만
c.sample이 undefined 으로 나오기 때문에 속성이 추가되지 않았음을 알 수 있다
문자열과 불 자료형도 기본 자료형이라 동일하다

> const d = '안녕하세요'
// undefined

> d.sample = 10
// 10

> d.sample
// undefined : 실제 속성이 추가되지 않았다

// 불 자료형
> const e = true
// undefined

> e.sample = 10
// 10

> e.sample
// undefined : 실제 속성이 추가되지 않았다

이러한 기본 자료형들을 객체로 선언하고 싶다면
숫자, 문자, 열, 불 등의 자료형으로 변환하는 함수를 사용하면 된다

const 객체 = new 객체 자료형이름()

new Number(10)
new String('hello')
new Boolean(true)

단순한 기본 자료형이 아니게 되서 위와 같은 함수를 사용해서 숫자를 생성하면
숫자와 관련된 연산자도 모두 활용이 가능하고 속성과 메소드도 당연히 같이 활용할 수 있다

> const f = new Number(273)
// undefined

> typeof f
// 'object'

> f.sample = 10
// 10

> f.sample
// 10 : 속성을 가질 수 있게 되었다

> f
Number {273, sample: 10}
// 콘솔에서 단순하게 f를 출력하면 객체 형태로 출력된다

/* 숫자와 동일하게 활용할 수 있고
valueOd() 메소드를 사용해서 값을 추출할 수도 있다 */

> f + 0
// 273

> f.valueOf()
// 273

new 키워드를 사용하지 않으면
함수가 자료형 변환기능으로 작동한다

> const g = Number(273)
// undefined

> typeof g
// "number" : 객체가 아니다

기본 자료형의 일시적 승급 261p