[혼공스] 5주차 Chapter 06 객체

기본 미션

객체, 속성, 메소드가 무엇인지 설명하기

객체

• 객체는 속성과 메소드를 가지고 있는 데이터 타입이다. 
• 중괄호 {}를 사용하여 만들 수 있다. 
• 배열처럼 여러가지 자료형을 담을 수 있다.

속성

• 객체의 특징을 나타내는 값이다. 
• 객체의 속성은 키와 값으로 이루어져 있다.
• 속성의 키는 문자열이다.

메서드

• 객체의 속성 중 함수인 속성을 메서드라고 한다.

선택미션

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

• Math.sin()은 매개변수로 radian에 대한 사인 값을 반환한다.
• radian은 각도의 도(°)와 다르게, 원의 반지름과 원주를 기준으로 각도를 측정하는 단위 중 하나다.
• degree는 90으로 주어졌으니, radian은 (degree * Math.PI) / 180로 계산된다.
• 따라서, console.log(Math.sin(radian))은 1을 출력한다.

const degree = 90;
const radian = (degree * Math.PI) / 180;
console.log(Math.sin(radian));

---

학습 기록

객체

• 객체는 키와 값의 쌍으로 구성되며, 배열과 마찬가지로 여러 가지 자료를 한꺼번에 다룰 수 있는 특별한 자료형이다.

객체 생성 방법:

• {} 중괄호로 생성한다.
• 객체의 키는 식별자를 사용한다.
  • (식별자 규칙에 의해 숫자로 시작하거나 $, \_ 외에 특수기호가 올 수 없다.)
• 값에는 숫자, 문자열, 불, 함수 등 다양한 자료형을 사용할 수 있다.

  // 객체 기본 형태
  const object = {
    키: 값,
    키: 값,
  };

객체 값 접근:

• 객체 이름 뒤에 점(.)이나 대괄호[]를 사용해서 값에 접근할 수 있다.

const object = {
  age: 13,
  level: 1,
};

console.log(object["level"]); // 1
object["level"] = 25;
console.log(object["level"]); // 25
console.log(object.age); // 13

속성과 메서드

• 객체 내의 요소를 속성(property)라고 부른다.
• 객체 내부에 있는 함수를 메서드라고 부른다.
• 메서드를 정의할 때는 일반 함수와 화살표 함수 두 가지 방식을 사용할 수 있다.
• 단, 메서드에서 화살표 함수의 경우 this를 사용할 수 없으므로 일반 함수 방식을 사용하길 권장한다.

const character = {
  level: 1,
  class: "마법사",
  fireball: function () {
    console.log(`${this.class}가 파이어볼을 사용하였습니다.`);
  },
  icewall: () => {
    console.log(`${character.class}가 아이스월을 사용하였습니다.`);
  },
};
character.fireball(); // 마법사가 파이어볼을 사용하였습니다.
character.icewall(); // 아이스월을 사용하였습니다.

메서드 내부의 this

• 메서드 내부에서 this를 사용하면 현재 객체 자기 자신을 참조한다.
• 하지만, 화살표 함수는 this가 외부 다른 객체(windows 등)를 참조한다.
  - 이를 익명 함수는 this를 바인딩 하지만 화살표 함수는 this를 바인딩 하지 않는다고 표현한다.
  - this 바인딩 : this를 현재 객체와 연결하는 행위

const character = {
  class: "마법사",
  
  icewall: () => {
    console.log(`${this.class}가 아이스월을 사용하였습니다.`);
  },
};

character.icewall(); // undefined가 아이스월을 사용하였습니다.

 

객체 속성 추가와 삭제

• 객체 이름 뒤에 점(.)이나 대괄호[]를 사용해서 속성을 추가할 수 있다.
• delete 연산자를 사용하여 속성을 제거할 수 있다.

const character = {
  level: 1,
  class: "마법사",
  fireball: function () {
    console.log(`${this.class}가 파이어볼을 사용하였습니다.`);
  },
};

character.hp = 100; // 동적 생성
delete character.hp; // 키와 값을 동적으로 제거

 

기본 자료형과 객체 자료형, 프로토타입

• 자바스크립트의 자료형은 기본 자료형과 객체 자료형으로 구분한다.

기본 자료형

• 기본 자료형은 숫자, 문자열, 불리언 등이다.
• 기본 자료형은 값만 저장하기 때문에 속성과 메서드를 가질 수 없다.

객체 자료형

• 객체 자료형은 함수, 배열, 객체 등이다.
• 스택과 힙을 연결하여 활용하기 때문에 크기를 늘릴 수 있다.
• 속성과 메서드를 가질 수 있다.

Array.isArray()

• 자바스크립트에서는 배열도 객체이기 때문에 typeof를 통해서는 자료형 확인이 어렵다.
• Array.isArray() 메서드를 사용해 배열을 판단할 수 있다.

let arr = [1, 2, 3, 4];
console.log(Array.isArray(arr)); // true

일급 객체(First-Class Object)

• 자바스크립트에서 함수는 '실행이 가능한 객체'라는 특이한 자료형이다.
• typeof 연산자를 사용하면 function을 출력하지만, 객체의 특성을 가지고 있다.
• 변수에 저장하고, 다른 함수에 전달하고, 함수에서 반환할 수도 있다.
• 이러한 성질을 일급객체라 한다.

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

• new 키워드를 사용해 기본 자료형도 객체 자료형으로 바꿔 선언할 수 있다.

let num = new Number(123);
num.color = "blue";
console.log(num); // Number {123, color: "blue"}
console.log(num + 5); // 128

기본 자료형의 일시적 승급

• 자바스크립트는 사용의 편리성을 위해 기본 자료형의 속성과 메서드를 호출할 때 일시적으로 기본 자료형을 객체로 승급시킨다.
  • (자료형 뒤에 점을 찍고 무엇인가 하려고 할 때) 
• 하지만 이는 일시적인 승급으로 문장이 종료되면 없어진다.

const str = "문자열입니다.";
str.sample = 20;
console.log(str.sample); // undefined

교재 외 래퍼 객체

• new 키워드로 생성한 자료형을 래퍼 객체(Wrapper Object)라 한다.
• 이는 아래와 같은 여러 이유로 권장하지 않다.
  • 타입이 달라져 typeof로 비교가 불가능하다.
  • 비교 연산이 어렵다.
  • 자바스크립트 엔진 자체에서 필요시 래퍼 객체로 임시 생성했다가 삭제한다.(ex. length 메서드)

프로토타입(Prototype)

• 프로토타입은 기본 자료형에 추가적인 속성과 메서드를 부여할 수 있는 기능이다.
• 프로토타입을 활용하면 기본 자료형에 사용자 정의 메서드를 추가할 수 있다.
• 하지만 최근에는 프로토타입을 직접 수정하는 방식이 위험할 수 있어 사용이 줄어들고 있다.
• 기본적으로 존재하지 않는 메서드인데 사용하고 있는 코드를 본다면 prototype은 아닌지 확인해보자.

String.prototype.contain = function (str) {
  return this.indexOf(str) >= 0;
};

const a = "문자열";
console.log(`a.contain('문자'): ${a.contain("문자")}`); // a.contain('문자'): true

 

다양한 메서드 맛보기

Number 객체 메서드

toFixed()

• 숫자 N번째 자릿수까지 출력한다.
• 문자열로 변환하면서 반올림하여 출력한다.

const num = 123.0987;
num.toFixed(2); // 123.10

isNaN()

• 매개변수의 값이 NaN이면 true를, 아니라면 false를 반환한다.

const num = Number("문자열");
Number.isNaN(num); // true

isFinite()

• 무한대의 값을 inFinity라고 한다.
• Infinity는 양과 음의 2가지 형태로 나뉜다.
• isFinite는 유한한 숫자이면 true, Infinity이면 false를 반환한다.

let n = Infinity;
let m = -10 / 0; // - Infinity

console.log(n === m); // false
console.log(n === Infinity); // true

Number.isFinite(n); // false

String 객체 메서드

trim()

• 앞, 뒤의 공백을 제거한다.
• 웹 개발에서 입력을 받는 경우가 굉장히 많기 때문에 자주 사용하는 메서드다.

let str = "       문자          ";
console.log(str.trim()); // 문자

split()

• 특정 기준으로 배열을 만들고 싶을 때 사용한다.
• 필수로 알고 있어야 할 메서드 중 하나다.

  let str = "15.12.25,크리스마스,기념일";
  console.log(str.split(",")); // ['15.12.25', '크리스마스', '기념일']
  str = "15.12.25 크리스마스 기념일";
  console.log(str.split(" ")); // ['15.12.25', '크리스마스', '기념일']

Math 객체 메서드

내림: Math.floor(), 올림: Math.ceil(), 반올림: Math.round()

• 매개변수로 값을 넣으면 내림, 올림, 반올림된 결과값을 반환한다.

Math.floor(34.12); // 34

Math.ceil(34.12); // 35

Math.round(34.12); // 34

최대값: Math.max(), 최소값: Math.min()

• 배열의 요소에서 값을 도출하는 경우가 많으므로 전개연산자를 함께 기억하도록 한다.

Math.max(12, 34, 56); // 56

let arr = [12, 34, 56];

Math.max(...arr); // 56

랜덤한 숫자 생성: Math.random()

• 0 이상, 1 미만의 랜덤한 숫자를 생성한다.
• Math.floor와 함께 사용해 소수점을 없앤 형태로 많이 사용한다.

Math.floor(Math.random() * 10); // 0~9까지 생성됨
Math.floor(Math.random() * 50); // 0~50까지 생성됨
Math.floor(Math.random() * 10) + 1; // 1부터 10까지 생성됨
Math.floor(Math.random() * (max - min + 1)) + min; // min이상 max미만 랜덤하게 생성하는 공식

 

자바스크립트 라이브러리 활용

• 다른 개발자가 미리 여러 클래스나 함수들을 만들어 놓은 것을 라이브러리 라고 한다.
• 라이브러리는 파일을 다운로드 받거나 CDN 링크를 사용하는 방법이 있다.
• src 속성에 다운로드 받은 파일 자체를 경로지정하거나 CDN의 경로를 지정한다.

유용한 라이브러리

• Lodash - 집합처리나 배열처리와 관련해 유용한 기능을 제공한다.
• Luxon - 시간을 처리할 때 유용하며, '타임존 세팅', '지금부터 몇시간 후' 같은 처리에 유용하다.
• Handsontable - 웹페이지에 스프레드시트를 출력한다.
• D3.js / Chart.js - 데이터 시각화에 유용하다.
• Three.js -  3차원 그래픽을 다룬다.

 

객체의 기본 속성 지정하기

매개변수로 객체를 지정하는 방법

• 일반적으로 함수를 호출할 때 호출코드만으로는 각 매개변수가 무슨 역할을 하는지 알 수 없다.

const sendMail = function (from, to, content) {
  return `${from}는 ${to}에게 '${content}'라고 메일을 보냅니다.`;
};

console.log(sendMail("나", "첫사랑", "잘지내"));
// "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다."

• 매개변수로 객체를 전달하고, 함수에서 각 매개변수를 처리하도록 하면 좀 더 명확한 코드 작성이 가능하다.

const sendMail = function (object) {
  return `${object.from}는 ${object.to}에게 '${object.content}'라고 메일을 보냅니다.`;
};

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다."

매개변수의 기본값 지정하기

• 아래와 같은 기본형은 매개변수 자체에 기본 값을 지정하면 된다.
• 하지만 객체를 매개변수로 전달하게 되면 기본값을 지정하기 어렵다.

let sendMail = function (from, to, content, status = "수취인불명") {
  return `${from}는 ${to}에게 '${content}'라고 메일을 보냅니다.`;
};

console.log(sendMail("나", "첫사랑", "잘지내"));
// "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다."

객체를 매개변수로 전달할 때 기본값 지정하기

과거방법1: undefined 체크 방식

• 자바스크립트는 정의되지 않은 속성을 출력하면 undefined가 출력된다.
• 이를 활용해 기본값을 설정한다.

const sendMail = function (object) {
  object.status = object.status !== undefined ? object.status : "이상 없음";

  return `${object.from}는 ${object.to}에게 '${object.content}'라고 메일을 보냅니다.`;
};

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다."

과거방법2: Falsy 체크 방식

• Falsy값을 체크해서 기본값을 설정한다.
• 단, 빈 문자열이나 0도 Falsy 값으로 체크되니 이런 값이 오지 않을 것이 확실해야 한다.

 

const sendMail = function (object) {
  object.status = object.status ? object.status : "이상 없음";

  return `${object.from}는 ${object.to}에게 '${object.content}'라고 메일을 보냅니다.`;
};

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다."

과거방법3: 조건부 연산자 + 짧은 조건문

• 왼쪽 피연산자가 Falsy 값이면 오른쪽 값을 반환함.
• Falsy 체크 방식처럼 0, false, "" 등도 기본값이 적용되는 문제가 있다.

const sendMail = function (object) {
  object.status = object.status || object.status : "이상 없음";

  return `${object.from}는 ${object.to}에게 '${object.content}'라고 메일을 보냅니다.`;
};

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다."

현대방법1: 전개연산자 활용

• 객체에 기본값인 속성과 기존 객체를 전개연산자로 묶는다.
• 이 때 기존 객체에 동일한 속성명이 있으면 값을 덮어쓰게 된다.
• 동일한 속성이 없다면 기본값으로 추가한 속성이 출력된다.

const sendMail = function (object) {
  object = { status: "이상없음", ...object };

  return `${object.from}는 ${object.to}에게 '${object.content}'라고 메일을 보냅니다. 전송:${object.status}`;
};

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다. 전송:이상없음"

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
    status: "수취인불명",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다. 전송:수취인불명"

현대방법2: 매개변수 구조 분해 할당 활용

• 함수 매개변수에서 직접 구조 분해 할당을 사용하여 기본값을 설정한다.

const sendMail = function ({ from, to, content, status = "이상없음" }) {
  return `${from}는 ${to}에게 '${content}'라고 메일을 보냅니다. 전송:${status}`;
};

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다. 전송:이상없음"

현대방법3: 전개 연산자와 구조 분해 할당 병행

• 전개 연산자로 기본값을 포함한 새로운 객체를 만들고, 구조 분해 할당으로 필요한 속성만 추출한다.
• 객체를 수정하지 않고 안전하게 기본값을 추가할 수 있으며, 선택적으로 필요한 속성만 사용한다.
• Node.js 등에서 자주 사용되는 패턴으로 기억하도록 한다.

const sendMail = function (object) {
  const { from, to, content } = { status: "이상없음", ...object };

  return `${from}는 ${to}에게 '${content}'라고 메일을 보냅니다. 전송:${status}`;
};

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다. 전송:이상없음"