[ 혼공단 / JS ] 5주차 - Chapter 06 객체

💡 진도 : Chapter 06

💡 기본 미션 : 객체, 속성, 메소드가 무엇인지 설명하기

💡 p.288 확인 문제 3번 풀고, 풀이 과정 설명하기

기본 미션

• 객체 : 실제로 존재하는 사물
• 속성 : 객체 내부에 있는 값
• 메소드 : 객체의 속성 중 함수 자료형인 속성

선택 미션

Math 객체를 활용해 사인 90도의 값 (==1)을 구하라!

const degree = 90

const a = Math.sin(degree)
console.log(a)

→ 이렇게 출력하면 0.8939966… 이 출력된다.

그 이유는 JS의 Math.sin() 함수는 라디안값을 사용해 sin값을 계산하기 때문이다~!!!!

여기서 라디안=(각도*파이)/180 이다. 따라서 각도를 라디안으로 변환해줘야 합니다~

const degree = 90;
const radian = (degree * Math.PI) / 180; // 각도를 라디안으로 변환

const a = Math.sin(radian);
console.log(a); // 1

06-1 객체의 기본

• 객체
  • 배열도 하나의 객체이다.
  • 배열 → 인덱스와 요소를 가짐
  • 배열은 인덱스를 사용하지만 객체는 키를 사용함.
  • 객체 선언 예시

  const product = {
  	제품명: '7D 건조 망고',
  	유형: '당절임',
  	성분: '망고, 설탕, 메타중아황산나트륨'
  }
  

  → product[’제품명’] || product.제품명 이렇게 입력하면 요소에 접근할 수 있음
• 속성과 메소드
  • 속성 - 객체 내부에 있는 값, 모든 형태의 자료형을 가질 수 있음
  • 메소드 - 함수 자료형인 속성
  • 자기 자신이 가진 속성을 출력하기 위해선 this 키워드를 사용함.
  • const pet = { name: '구름', eat: function (food) { alert(this.name + '은/는' + food + '을/를 먹습니다.') } } pet.eat('밥')
• 동적으로 객체 속성 추가/제거
  • 동적으로 객체 속성 추가하기
  • JSON.stringify(student, null, 2)
  • 동적으로 객체 속성 제거하기
  • delete 객체.속성
• 객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것 == 동적인 것!

06-2 객체의 속성과 메소드 사용하기

• 객체 자료형
• 속성과 메소드를 가질 수 있는 모든 것은 객체 (배열, 함수도 객체)
• 기본 자료형
• 실체가 있는 것 중 객체가 아닌 것 (숫자, 문자열, 불)
• 기본 자료형을 객체로 선언하기
  • const 객체 = new 객체자료형이름()속성을 가질 수 있게 됨!!
  • → ex ) new Number(10), new String(’안녕하세요’)
• 기본 자료형의 일시적 승급
  • JS는 사용의 편리성을 위해 기본 자료형의 속성과 메소드를 호출할 때 일시적으로 기본 자료형을 객체로 승급시킴
• 프로토타입으로 메소드 추가하기
  • prototype : 객체 전용 옷 → 이 객체에 속성과 메소드를 추가하면 모든 객체에서 해당 속성과 메소드를 사용할 수 있음.
• Number 객체
  • 숫자 n번째 자릿수까지 출력하기: toFixed() (소수점 이하)
• NaN과 Infinity 확인하기: isNaN(), isFinite()
  • m===NaN 이렇게는 비교 못함 → Number.isNaN(m) 이렇게 비교해야함.
• String 객체
  • 문자열 양쪽 끝의 공백 없애기 : trim()
  • stringA.trim() 이런식으로 쓰면 된다~!
• 문자열을 특정 기호로 자르기: split()
  • 문자열을 매개변수로 잘라서 배열을 만들어 리턴
• JSON객체
  • 문자열, 숫자, 불 자료형만 사용 가능, 문자열은 반드시 큰따옴표, 키에도 반드시 따옴표를 붙여야 함.
  • 자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringfy() 메소드를 사용함.
  • JSON문자열을 자바스크립트 객체로 전개할 때는 JSON.parse() 메소드를사용함.
• Math 객체
  • Math.random() → 0≤x<1의 랜덤한 숫자 생성
• 수학과 관련된 기본적인 연산을 할 때 사용
• 외부 script 파일 읽어들이기
  • script 태그를 사용하고 src 속성에 읽어들일 파일의 경로를 입력하면 됨

06-3 객체와 배열 고급

이 부분은 나중에 이어서...

3주차 내용부터 다시 정리하느라 시간이 꽤 많이 걸렸지만,,, 이번주에 안한 부분들 다 정리해야지!

객체 공부를 열 심 히 하 자..........................,