[JavaScript] 객체

ㅁ객체

객체 기본

• 객체
  • 배열은 요소에 접근할 때 인덱스를 사용하지만 객체는 키(key)를 사용
  • 객체는 중괄호{...}로 생성하며 쉼표,로 연결해서 입력

const product = {
  제품명 : '먹는 샘물'
  유형 : '물'
  성분 : '칼슘, 나트륨, 칼륨, 불소, 마그네슘'
  수원지 : '경기도 남양주시 수동면'
}

• 객체 요소에 접근
  • 대괄호 []사용
  • 온점 . 사용
  • 식별자로 사용할 수 없는 단어를 키로 사용할 때는 문자열을 사용 → 무조건 대괄호 []를 사용해야 객체의 요소에 접근 가능

product['제품명'] 
product['유형'] 
product.성분
product.수원지

속성과 메소드

• 객체의 속성은 모든 형태의 자료값을 가질 수 있음

  • 메소드 : 객체의 속성 중 함수 자료형인 속성

  • 메소드 내부에서의 this 키워드

    • 자기 자신이 가진 속성이라는 것을 표시할 때 this 키워드 사용

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

pet.eat('밥')

• delete : 동적으로 객체 속성 제거

const student={}
student.이름 = 'MJ'
student.취미 = '운동'
student.장래희망 = '건물주'

delete student.이름

• function(){} 형태로 선언하는 익명 함수와 () => {} 형태로 선언하는 화살표 함수는 객체의 메소드로 사용될 때 this 키워드를 다루는 방식이 다름

const test={
  a:function(){        //익명함수로 선언
    console.log(this)
  },
  b:()=>{              //화살표 함수로 선언
    console.log(this)
  }
}

test.a()
test.b()

• 속성은 객체 내부에 이쓴 값
• 메소드는 속성 중에 함수 자료형
• this 키워드는 객체 내부의 메소드에서 객체 자신을 나타내는 키워드

객체 자료형

• 속성과 메소드를 가질 수 있는 모든 것은 객체
  • 배열, 함수
  • 배열인지 확인하려면 Array.isArray() 메소드를 사용 (Array도 메소드를 갖고 있으므로 객체)
  • 함수는 실행이 가능한 객체. JavaScript에서는 함수를 일급 객체에 속한다고 표현

기본 자료형

• 실체가 있는 것중에 객체가 아닌 것
  • 숫자, 문자열, 불 : 객체가 아니므로 속성을 가질 수 없음
• 기본 자료형 객체로 선언

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

const num = new Number(10)
const hihi = new String('안녕하세요')
const bools = new Boolean(true)

• 기본 자료형의 일시적 승급
  • 편리성을 위해 기본 자료형의 속성, 메소드 호출할 때 일시적으로 기본 자료형을 객체로 승급(기본 자료형 뒤에 온점 . )

const h = '안녕하세요'

> h.sample=10
10
> h.sample
undefined

프로토타입으로 메소드 추가

• prototype 객체에 속성과 메소드를 추가하면 모든 객체(와 기본 자료형)에서 해당 속성과 메소드를 사용 가능
• indexOf()메소드로 문자열 내부, 배열 내부에 어떤 자료가 있는지 확인 → 해당 문자열이 시작하는 위치(인덱스)출력, 없으면 -1출력

객체 자료형 이름.prototype.메소드 이름 = function(){}

Number.prototype.power=function(n=2){
  return this.valueOf()**n
}

const a=12
console.log('a.power():',a.power())
console.log('a.power(3):',a.power(3))
console.log('a.power(4):',a.power(4))

• Number 객체
  • 숫자 N번째 자릿수까지 출력 : toFixed()
  • NaN과 Infinity 확인 : isNaN(), isFinite() → Number뒤에 점을 찍고 사용
• String 객체
  • 문자열 양쪽 끝의 공백 없애기 : trim()
  • 문자열을 특정 기호로 자르기 : split() → 문자열을 매개변수(다른 문자열)로 잘라서 배열을 만들어 리턴하는 메소드
• JSON 객체
  • 인터넷에서 문자열로 데이터를 주고받을 때 많이 사용(CSV, XML, CSON등)
  • 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용 가능(함수는 사용 불가)
  • 문자열은 반드시 큰따옴표
  • key에도 반드시 따옴표

[{
  "name": "치킨",
  "price": 18000,
  "publisher": "ㅇㅇ치킨"
}, {
  "name": "신발",
  "price": 26000,
  "publisher": "ㅇㅇ신발"
}]

• JSON.stirngfy() : JavaScript객체를 JSON문자열로 변환할 때 사용하는 메소드

• JSON.parse() : JSON문자열을 자바스크립트 객체로 전개할 때 사용하는 메소드

• Math 객체
  • 수학과 관련된 기본적인 연산
  • pi, e와 같은 수학 상수
  • Math.sin(), Math.cos(), Math.tan()과 같은 삼각함수
  • Math.random() : 0이상 1미만의 랜덤한 숫자 생성