[JavaScript] 배열(array), 객체(object), 클래스(class)

💖 배열(array)

🔥 배열생성

let arr = [];
console.log(arr);	// 0

let nums = [1, 2, 3];
console.log(nums.length);	// 3

🔥 Array 생성자 함수

: Object 생성자 함수를 통해 객체를 생성할 수 있듯이 Array 생성자 함수를 통해 배열을 생성할 수도 있다

let arrNum = new Array(5);

// 배열의 요소 추가
arrNum[0] = 11;
arrNum[1] = 22;
arrNum[2] = 33;

console.log(arrNum);
/*
11
22
33
*/

for (let i = 0; i < arrNum.length; i++) {
	console.log(arrNum[i]); 
}
/*
11
22
33
*/
 	   
for(i in arrNums) {
	console.log(i);
}
/*
1
2
3
*/

🔥 Array.prototype.forEach

: for문을 대체할 수 있는 함수
: 자신 내부에서 반복문을 실행한다

const numbers = {1, 2, 3};
const pows = {};

// for문으로 배열 순회
for(let i = 0; i < numbers.length; i++) {
	pows.push(numbers[i] ** 2);
}
console.log(pows);	// [1, 4, 9]

// forEach 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다.
numbers.forEach(item => pows.push(item ** 2));	// 콜백 함수 3번 호출
console.log(pows);	// [1, 4, 9]

// forEach 메서드는 콜백 함수를 호출하면서 3개(요소값, 인덱스, this)의 인수를 전달한다.
[1, 2, 3].forEach((item, index, arr) => {
	console.log(`요소값: ${item}, 인덱스: ${index}, this: ${JSON.stringify(arr)}`)
});
/*
요소값: 1, 인덱스: 0, this: [1,2,3]
요소값: 2, 인덱스: 1, this: [1,2,3]
요소값: 3, 인덱스: 2, this: [1,2,3]
*/

*JSON.stringify 메서드
: 객체를 JSON 포맷의 문자열로 변환한다.
: 위 예제에서는 arr 배열을 문자열로 출력하기 위해 사용

💖 객체(object)

다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
변경 가능한 값(mutable value)
0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다

프로퍼티

• 키(key) : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
• 값(value) : 자바스크립트에서 사용할 수 있는 모든 값

var person = {
  	// key:value
	name: 'Lee',
  	age: 20
  	sayHello: function() {
    	console.log(`Hello! My name is ${this.name}.`);
    }
};

var counter = {
	num: 0,	// 프로퍼티
  	increase: function() {	// 메서드
    	this.num++;
    }
};

console.log(person.name);	// Lee
console.log(person.age);	// 20
console.log(typeof person); // object

💖 클래스(class)

클래스 선언문도 호이스팅이 발생한다(let, const키워드로 선언한 변수처럼 호이스팅됨)
클래스는 함수이다

클래스의 몸체에 정의할 수 있는 메서드

• constructor(생성자) : 인스턴스를 생성하고 초기화
• 프로토타입 메서드 : 인스턴스로 호출
• 정적 메서드 : 인스턴스를 생성하지 않아도 호출할 수 있는 메서드

// 클래스 선언문
class Person {
	// 생성자
	constructor(name, age) {
    	// 인스턴스 생성 및 초기화
    	this.name = name;
      	this.age = age;
    }
  
  	// 프로토타입 메서드
  	sayHi() {
    	console.log(`Hi! My name is ${this.name}. i'm ${this.age}`);
    }
  
  	// 정적 메서드
  	static sayHello() {
    	console.log('Hello!');
    }
}

// 인스턴스 생성
const me = new Person('Lee', 20);

// 인스턴스의 프로퍼티 참조
console.log(me.name);

// 프로토타입 메서드 호출
me.sayHi();	// Hi! My name is Lee. i'm 20

// 정적 메서드 호출
Person.sayHello();	// Hello!