Chapter 06. 객체

• 요소 : 배열 내부에 있는 값
• 속성 : 객체 내부에 있는 값
• 메소드 : 속성 중에 동작(함수 자료형)인 것
• this 키워드 : 객체 내부의 메소드에서 객체 자신을 나타내는 키워드
• 객체 속성 추가
  객체.속성 = '값'
• 객체 속성 제거
  delete 객체.속성

 

객체(object)

이름(name) + 값(value)으로 구성된 속성(property)을 가진 데이터 타입

접근 시 키key 사용

 

배열(array)

배열도 객체

접근 시 인덱스 사용

인덱스(index) + 요소(element)

배열인지 확인하려면 Array.isArray()

new Array()를 사용하여 배열의 크기를 지정할 수 있음. let numbers = new Array(5);

 

메소드 내부의 this

() => {} 형태로 선언하는 화살표 함수의 this는
경우에 따라 window객체를 출력하므로, 특별한 이유가 있지 않은 한 화살표 함수를 메소드로 사용하지 않는 편

 

자료형

• 기본 자료형(primitives) : 숫자, 문자열, 불. 객체가 아니므로 속성을 가질 수 없음
  const 객체 = new 객체 자료형 이름() 으로 객체로 선언할 수 있음. 그럼 관련 속성과 메소드 활용할 수 있음
  new Number(10)
  new String('안녕핫세요')
  new Boolean(true)
• 객체 자료형(object): 함수, 배열 등 전부. 속성과 메소드를 가질 수 있는 모든 것은 객체

 

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

prototype객체에서 추가하면 모든 객체에서 해당 속성과 메소드를 사용 가능

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

 

Number 객체

• 숫자자료.toFixed() : 숫자 N번째 자리수까지 출력
• Number.isNaN() : NaN과 비교하면 모든 값이 false로 나오므로 비교연산자로 비교할 수 없고 inNaN() 메소드 사용해야함
• Number.isFinite() : 비교 연산자로 비교 가능. false인 경우 양의 무한대 숫자와 음의 무한대 숫자로 나뉨
  n === Infinity || n === -Infinity

 

String 객체

• 문자자료.trim() : 문자열 앞 뒤 공백이 제거
• 문자열.split('\n줄바꿈') : 매개변수(다른 문자열)로 잘라서 배열을 만들어 리턴
• 문자열.length
• 문자열.indexOf() : 배열 내부에 어떤 문자열, 자료가 있는지 확인할 때  배열.indexOf('찾을문자열')
  문자열.indexOf('문자열') >= 0   의 코드를 사용하면 포함유무를 true/false로 얻을 수 있음

JSON(JavaScript Object Notation) 객체

인터넷에서 문자열로 데이터를 주고 받을 때 자바스크립트의 객체처럼 자료를 표현하는 방식

• JSON.stringify(데이터, null, 2 들여쓰기 칸수) : 자바스크립트 객체를 JSON 문자열로 변환
• JSON.parse() : JSON 문자열을 자바스크립트 객체로 전개

 

Math 객체

• Math.random()                   : 0 <= 결과 < 1의 범위
• Math.random() * 10            : 0 <= 결과 < 10의 범위
• Math.random() * 10 - 5       : -5 <= 결과 < 5의 범위

 

Lodash 라이브러리

_.sortBy(자료, (매개변수) => 매개변수.속성) // 속성 기준으로 정렬한 결과를 출력

 

기타 라이브러리

• Luxon, date-fns : 날짜와 시간
• Handsontable : 스프레드시트
• D3.js, ChartJS : 그래프 
• Three.js : 3차원 그래픽

 

---

속성 존재 여부 확인

객체에 없는 속성에 접근하면 undefined 자료형이 나오기 때문에
조건문으로 속성 존재 여부를 확인할 수 있음

if (object.name !== undefined) {} else {}

if (object.name) {} else {} // 속성이 false로 변환될 수 있는 값이 아닐 때 사용 가능한 방식

object.name || console.log('name 속성이 없습니다')

 

기본 속성 지정

object.name = object.name !== undefined ? object.name : '제목 미정'

object.name = object.name || '제목 미정' // 속성이 false로 변환될 수 있는 값이 아닐 때 사용 가능한 방식

 

다중 할당

배열과 객체 하나로 여러 변수에 값을 할당하는 것

• [식별자, 식별자, 식별자, ...] = 배열
  let [a, b] = [1, 2] // a = 1, b = 2가 할당됨
• { 속성 이름, 속성 이름} = 객체
  const { name, price } = object // name 속성과 price 속성을 그대로 꺼냄
• { 식별자=속성 이름, 식별자=속성 이름 } = 객체
  const { a=name, b=price } = object // name 속성을 a라는 이름으로, price 속성을 b라는 이름으로 그대로 꺼냄

 

배열, 객체 전개 연산자

[...배열] // 깊은 복사

{...객체}

 

• 얕은 복사(참조 복사) : 복사하는 행위가 단순하게 다른 이름 붙이는 형태로 동작하는 복사를 의미
• 깊은 복사 : 복사 후 두 객체를 완전하게 독립적으로 사용할 수 있는 복사

 

 

 

---

1. 객체 생성

기본적인 객체 생성

let person = {

    name: "홍길동",

    age: 30,

    gender: "남자"

  };

 

생성자 함수를 사용한 객체 생성

function Person(name, age, gender) {

    this.name = name;

    this.age = age;

    this.gender = gender;

  }

 

  let person1 = new Person("홍길동", 30, "남자");

  let person2 = new Person("홍길순", 25, "여자");

 

2. 객체 속성 접근

person.name // "홍길동"

person["name"] // "홍길동"

 

3. 객체 메소드

• Object.keys() 메소드
  let keys = Object.keys(person); // ["name", "age", "gender"]
• Object.values() 메소드
  let values = Object.values(person); // ["홍길동", 30, "남자"]
• Object.entries() 메소드 : 객체의 속성 이름과 속성 값들을 2차원 배열로 반환함
  let entries = Object.entries(person);
• Object.assign() 메소드 : 기존 객체를 복사하여 새로운 객체를 만듦
  let newPerson = Object.assign({}, person, { age: 35 }); // { name: "홍길동", age: 35, gender: "남자" }
• 객체 비교 : 객체를 비교할 때는 일반적으로 === 연산자를 사용할 수 없습니다. 대신 JSON.stringify() 함수를 사용하여 객체를 문자열로 변환한 후, 문자열 비교를 합니다.
  JSON.stringify(person1) === JSON.stringify(person2)
  
• 객체 병합 : 객체 병합을 할 때는 전개 연산자(...)를 사용
  let mergedPerson = {...person1, ...person2};
  

 

 

 

 

---

배열 메소드

• push() 메소드 : 배열의 끝에 요소를 추가
• pop() 메소드 : 배열의 마지막 요소를 삭제
• shift() 메소드 : 배열의 첫 번째 요소를 삭제
• unshift() 메소드 : 배열의 맨 앞에 요소를 추가
• splice() 메소드 : 배열의 요소를 삭제하거나, 새로운 요소를 추가할 수 있다
  fruits.splice(1, 1, "포도");
• slice() 메소드 : 배열의 일부분을 새로운 배열로 만듦
  let slicedFruits = fruits.slice(1, 2);

 

콜백함수를 받는 메소드

매개변수 자리에 함수를 넣는 것을 콜백 함수라 함

 

forEach() 메소드

[배열].forEach(function (item) {

    console.log(item);

});

 

map() 메소드 : 결과를 새로운 배열로 반환

반드시 return문을 가져야 함. 새로운 배열을 변수에 받아야 함

let newNumbers = [배열].map(function (item) {

    return item * 2

});

 

filter() 메소드

return이 필요한데 조건문이 들어감. 새로운 배열을 변수에 받아야 함

let filteredNumbers = [배열].filter(function (item) {

    return item === 5;

});

 

find() 메소드 : 결과가 true인 첫 번째 요소를 반환

let result = [배열].find(function (item) {

    return item > 3;

});