chapter 5

객체

• 추상적 의미
• 실제 존재하는 사물을 의미하고 이름과 값으로 구성된 속성을 가진 자바스크립트의 기본 데이터 타입으로 이야기할 수 있습니다.
• 배열도 객체하고 할 수 있다.
• object
• 키를 사용한다.
• 객체 뒤에 대괄호[…]를 사용하고, 객체의 요소에 접근할 수 있습니다.
• 객체 뒤에 온점(.)을 사용할 수도 있습니다.

키 : 값

속성과 메소드

• 배열 내부에 있는 값을 요소라고 합니다.
• 반면 객체 내부에 있는 값을 속성이라고 합니다.

속성과 메소드 구분하기

• 객체의 속성 중 함수 자료형인 속성을 특별히 메소드라고 부릅니다.

const pet = {
  name: '구름',
  eat: function (food) {},
};
// 메소드를 호출합니다. 
pet.eat(); 

메소드 내부에서 this 키워드 사용하기

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

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

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

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

• 객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것을 ‘동적으로 속성을 추가한다’ 또는 ‘동적으로 속성을 제거한다’고 표현합니다.

동적으로 객체 속성 추가하기

• 객체를 생성한 후 속성을 지정하고 값을 입력하면 됩니다

const student = {};
(student.이름 = '윤인성'),
  (student.취미 = '악기'),
  (student.장래희망 = '생명공학자');

console.log(JSON.stringify(student, null, 2));

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

• 객체의 속성을 제거할 때는 delete 키워드를 사용한다

delete 객체.속성

const student = {};
(student.이름 = '윤인성'),
  (student.취미 = '악기'),
  (student.장래희망 = '생명공학자');

delete student.장래희망
console.log(JSON.stringify(student, null, 2));

메소드 간단 선언 구문

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

화살표 함수를 사용한 메소드

const test = {
  a: function () {
    console.log(this);
  },
  b: () => {
    console.log(this);
  }
}

test.a();
test.b();

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

• 자료는 기본 자료형과 객체 자료형으로 구분할 수 있습니다.
• 기본 자료형이 객체 자료형이 될 수도 있습니다.
• prototype

객체 자료형

• new 키워드를 활용해서 생성합니다
• 속성과 메소드를 가질 수 있는 모든 것
• 배열, 함수등 객체이다.
• 배열인지 확인할려면 Array.isArray() 메소드를 사용합니다.
• 함수는 객체의 특성을 완벽하게 가지고 있으므로 자바스크립트에서는 함수를 일급 객체에 속한다고 표현하기도 한다.

기본자료형

• 실체가 있는 것(undefind와 null 등이 아닌 것) 중에 객체가 아닌 것을 기본 자료형이라고 부른다.
• 숫자, 문자열, 불이 바로 기본 자료형이다.
• 이러한 자료형은 객체가 아니므로 속성을 가질 수 없다.

기본 자료형을 객체로 선언하기

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

• 이렇게 사용하면 숫자 객체, 문자열 객체, 불 객체를 생성할 수 있습니다.

new Number(10)
new String('안녕하세요')
new Boolean(true)

기본 자료형의 일시적 승급

• 기본 자료형의 경우 속성과 메소드를 사용할 수는 있지만, 속성과 메소드를 추가로 가질 수는 없다고 생각하면 됩니다.
• 기본 자료형이 일시적으로 객체 자료형으로 변화하는 것을 의미합니다.

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

• 어떤 객체의 prototype 이라는 속성이 바로 객체 전용 옷이라고 할 수 있습니다.
• prototype객체에 속성과 메소드를 추가하면 모든 객체(와 기본 자료형)에서 해당 속성과 메소드를 사용할 수 있습니다.

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

}

Number 객체

• 객체의 기본 메소드

숫자 N번재 자릿수까지 출력하기 :toFixed

• Number 객체에서 자주 사용하는 메소드는 toFixed()메소드입니다.
• 소수점 이하 몇 자리까지만 출력하고 싶을 때 사용합니다.

Nan과 Infinity 확인하기:isNaN(), isFinite()

• 어떤 숫자가 NaN(Not a Number)인지 또는 Infinity(무한)인지 확인할 때는 Numner.isNaN() 메소드와 Number.isFinite() 메소드를 사용합니다.
• 이 메소드들은 숫자 자료 뒤에 온점을 찍고 사용하는 것이 아니라 Number 뒤에 점을 찍고 사용합니다.
• NaN과 비교하면 모든 값이 false로 나오므로 isNaN() 메소드를 사용해야 NaN인지 확인할 수 있습니다.
• 무한대 숫자는 양의 무한대 숫자와 음의 무한대 숫자로 나뉩니다.
• isFinite() 메소드가 false인 경우는 양의 무한대 숫자와 음의 무한대 숫자 2가지 경우입니다.

n === Infinity || n === -Infinity
// 실행결과 true

String 객체

문자열 양쪽 긑의 공백 없애기 : trim()

• 사용자의 실수 또는 악의적인 목적으로 문자열 앞뒤에 공백이 추가되는 경우가 많으므로 이런 것들을 미리 제거하는 것입니다.
• 문자열의 trim() 메소드를 사용하면 문자열 앞뒤 공백(띄어쓰기, 줄바꿈 등을 제거할 수 있습니다.

"    안녕하세요    "   ->    "안녕하세요"

문자열 특정 기호로 자르기: split()

• 문자열을 매개변수(다른 문자열)로 잘라서 배열을 만들어 리턴하는 메소드입니다.
• 이외에도 length 속성, indexOf() 메소드 등이 있습니다.

JSON 객체 (JavaScript Object Notation)

• 인터넷에서 문자열 데이터를 주고 받을 때 CSV, XML, CSON 등의 다양한 자료 표현 방식을 사용할 수 있습니다.
• 현재 가장 많이 사용되는 자료 표현 방식은 JSON 객체입니다.
• 자바스크립트의 객체처럼 자료를 표현하는 방식
• 규칙
  1. 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있습니다.(함수 등은 사용 불가)
  2. 문자열은 반드시 큰따옴표로 만들어야 합니다.
  3. 키에도 반드시 따옴표를 붙여야 합니다.
• 자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify() 메소드를 사용합니다.
• JSON 문자열을 자바스크립트 객체로 전개할 때는 JSON.parse() 메소드를 사용합니다

Math 객체

• 수학과 관련된 기본적인 연산을 할 때 사용하는 객체
• 객체 속성으로는 pi, e와 같은 수학 상수가 있다.
• 메소드로는 Math.sin(), Math.cos(), Math.tan()와 같은 삼각함수도 있다.
• 랜덤한 숫자를 생성할 때는 Math.random() 메소드를 사용합니다.

외부 script 파일 읽어들이기

• 일단 별도의 자바스크립트 파일을 만들어야 합니다.
• 비주얼 스튜디오 코드에서 main.html과 test.js라는 이름으로 파일을 생성해서 같은 폴더에 넣어준다.
• 확장자가 js인 파일이 바로 읽어들일 외부 자바스크립트 파일이다.

Lodash 라이브러리

• 다른 사람들이 만든 다양한 함수와 클래스를 묶어서 제공해주는 것을 외부 라이브러리라고 부릅니다.
• 유틸리티 라이브러리
  • 개발할 때 보조적으로 사용하는 함수들을 제공해주는 라이브러리입니다.
• CDN
  1. CDN이란 콘텐츠 전송 네트워크라는 의미입니다.
  2. min 버전입니다
     1. min 버전의 자바스크립트 파일은 자바스크립트 코드를 집핑한 파일을 의미합니다.