자바스크립트 문법 (4/4) - 객체, 클래스, 배열

2022년 11월 9일 · 약 4분

Seung hyo, Lee

Front End Engineer @ Assistfit

❤️‍🔥 TIL : Today I Learned

오늘 정리할 내용

객체, 클래스, 배열을 라면 예제로 정리한다.

객체

정보를 한번에 담을 수 있는 큰 범위의 데이터가 필요할 때 사용한다.
어렵게 표현하면 "물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 갖고있고 다른 것과 식별 가능한 것" 이다.
객체를 생성하는 방법은 크게 3가지가 있지만 가장 효과적인 리터럴 방식을 포스팅하겠다!

// 영어 버전
const person1 = {
  name: "seung hyo",
  age: 26,
  sayHello: function () {
    console.log(this.name + "Hello!");
  },
};

console.log(person1);
person1.sayHello();

// 한글 버전
const 사람1 = {
  이름: "승효",
  나이: 26,
  안녕이라고말하기: function () {
    console.log(this.이름 + " 안녕!");
  },
};

console.log(사람1);
사람1.안녕이라고말하기();

설명하자면, 사람1 을 만들었다!

사람1은 { 이름, 나이, 안녕이라고말하기(기능) } 3가지의 속성이 있고, 이름은 '승효', 나이는 26, 안녕이라고 말할 줄 안다!

그런데 우리는 아직 사람1만 만들었다. 사람2, 사람3, 사람4 등 연속적인 '사람' 을 만들려고 하면 위와 같은 리터럴방식으로 반복되는 동작이 생긴다..

그래서 클래스라는 기능을 이용하면 간편하게 사람을 여럿 만들 수 있다!

클래스 { Class }

클래스를 미리 정의해 놓으면 필요할 때 마다 클래스를 사용해서 동일한 속성을 가진 객체를 만들 수 있다.

// 클래스 (Class)  선언
class 라면만들기 {
  constructor(맛, 면발, 가격) {
    this.맛 = 맛;
    this.면발 = 면발;
    this.가격 = 가격;
  }
}

// class 뒤따라 붙는 텍스트는 클래스 이름이다! 라면만들기 클래스를 만들었다
// constructor(매개변수1, 매개변수2, 매개변수3)
// constructor 는 '생성자' 절대값이다.

// 클래스가 있으면 이 것을 이용해 라면(객체)을(를) 계속 만들 수 있다!!
const 매운라면 = new 라면만들기("매운맛", "보통", "4000");
const 안매운라면 = new 라면만들기("안매운맛", "얇음", "3000");

그런데 라면만들기 클래스에는 데이터(값)을 나타내는 속성 뿐만 아니라 함수와 같이 특정코드를 실행 할 수 있는 메소드를 정의할 수도 있습니다.

// 클래스 + 메소드
class 라면만들기 {
  constructor(맛, 면발, 가격) {
    this.맛 = 맛;
    this.면발 = 면발;
    this.가격 = 가격;
  }
  재채기() {
    console.log(`${this.맛}스프가 코에 들어갔습니다! 에취!!!`);
  }
}

const 매운라면 = new 라면만들기("매운맛", "보통", "4000");
매운라면.재채기();
/*
=> 매운맛스프가 코에 들어갔습니다! 에취!!!
*/

객체 리터럴 ( Object Literal ) - 위에서 설명했으나, 자주쓰여서 다시 라면으로 반복설명! 빠르고 가독성 좋지만, 1회성이다. 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있다. (위 클래스와 비교해보자!)

// 객체 리터럴 (object literal)
const 순한맛라면 = {
  맛: "순한맛",
  면발: "굵음",
  가격: 6000,
  다시마투하() {
    console.log(`${this.맛}라면에 별첨된 다시마를 넣었습니다.`);
  },
};
// 객체 선언과 생성을 동시에 했고, 메소드 호출 가능

순한맛라면.다시마투하();

// => 순한맛라면에 별첨된 다시마를 넣었습니다.

배열 [ Array ]

객체는 서로 다른 타입의 데이터를 가지고 있지만, 같은 형식의 많은 데이터를 저장할 때에는 배열을 사용한다. 생성 방법은 2가지다.

// 1. Array 라는 클래스로 객체를 만들 수 있다.(js 내장 함수)
const arr1 = new Array(1, 2, 3, 4, 5);

// 2. 변수선언 후 대괄호 안에 같은 타입의 데이터를 (가능한)순서대로 할당
const arr2 = [1, 2, 3, 4, 5];

노트

배열 안의 데이터 각각을 요소(element)라고 한다. 배열은 index 라는 속성으로 순차적 접근이 가능하다.

array[index] 💥 index는 항상 0부터 시작 💥

// 배열 (Array)
const 무지개 = ["빨", "주", "노", "초", "파", "남", "보"];

console.log(무지개[0]);
console.log(무지개[1]);
console.log(무지개[2]);
console.log(무지개[3]);
console.log(무지개[4]);
console.log(무지개[5]);
console.log(무지개[6]);
console.log(무지개[7]); // undefined

// => 빨, 주, 노, 초, 파, 남, 보, undefined

배열의 길이 : 위 무지개 배열은 데이터가 7개라서 우리 눈으로 셀 수 있지만, 훨씬 길 경우에는 숫자 세기도 힘들다.. 이 때 사용하는 것이 length라는 속성이다!

// 배열의 마지막 요소 꺼내기
console.log(무지개[무지개.length - 1]);

// => '보'

요소의 추가와 삭제는 push 와 pop 이라는 메소드가 있습니다!

// push('추가할 요소') = 배열의 맨 마지막에 추가됨.
무지개.push("검정");
console.log(무지개);

// => ['빨', '주', '노', '초', '파', '남', '보', '검정']

// ----------------------------------------------------

// pop() = 배열의 맨 마지막요소가 삭제됨.
무지개.pop();
console.log(무지개);

// => ['빨', '주', '노', '초', '파', '남', '보']

배열과 반복문

배열의 요소들을 각각 하나씩 꺼내서 출력!

// 배열과 반복문!
for (let i = 0; i < 무지개.length; i++) {
  console.log(무지개[i]);
}

// => 빨 주 노 초 파 남 보

여기서 더 간단하게 + 자주 쓰여요.

for (const 색 of 무지개) {
  console.log(색);
}

// => 빨 주 노 초 파 남 보

객체 ​

클래스 { Class }​

배열 [ Array ]​

객체

클래스 { Class }

배열 [ Array ]