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

• ❤️‍🔥TIL : Today I Learned
  
  

객체 { Object }

• 정보를 한번에 담을 수 있는 큰 범위의 데이터가 필요할 때 사용한다.
• 어렵게 표현하면 "물리적으로 전재하거나 추상적으로 생각할 수 있는 것 중에서
  자신의 속성을 갖고있고 다른 것과 식별 가능한 것" 이다.
  
  
• 객체를 생성하는 방법은 크게 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.name + ' 안녕!');
  }
};

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

설명하자면,

사람1 을 만들었다!

사람1은 { 이름, 나이, 안녕이라고말하기(기능) } 3가지의 속성이 있고,

이름은 '승효', 나이는 26, 안녕이라고말할줄 안다!

 

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

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

 

 

---

 

클래스 { Class }

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

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

// class 뒤따라 붙는 텍스트는 클래스 이름이다! 라면만들기 클래스를 만들었다
// construcotr(매개변수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 rainbow = ['빨', '주', '노', '초', '파', '남', '보']

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(색)
}

//=> 빨 주 노 초 파 남 보