Vanilla JS - 2. 객체, 배열

활용한 사이트

CodeSandbox: Online Code Editor and IDE for Rapid Web Development

객체

• 변수 혹은 상수를 사용할 때 하나의 이름에 여러 종류의 값을 넣을 수 있다.
• 객체를 선언 할 때에는 { } 문자 안에 원하는 값을 넣어주면 된다.
• 값을 집어 넣을 때에는 (키: 원하는 값) 형태로 넣으며 키에 해당하는 부분은 공백이 없어야 한다. 만약 공백이 있어야 하는 상황이라면 따옴표로 감싸서 문자열로 넣어준다.

const dog = { name: '멍멍이', age: 2 }; 
const sample{ 'key space': true }; 
console.log(dog.name); 
console.log(dog.age); 

// 출력 결과 
멍멍이 
2

 

객체 비구조화 할당

const ironMan = { 
	name: '토니 스타크',
	actor: '로버트 다우니 주니어', 
    alias: '아이언맨'
}; 
    
const captainAmerica = { 
	name: '스티븐 로저스', 
    actor: '크리스 에반스', 
    alias: '캡틴 아메리카' 
}; 

function print({ alias, name, actor }) { 
	const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`; 
	console.log(text); 
} 

print(ironMan); 
print(captainAmerica);

 

객체 안에 함수 넣기

• 객체 안에 함수를 넣을 때, 화살표 함수로 선언한다면 제대로 작동하지 않는다.
• 이유는, function으로 선언한 함수는 this가 자신이 속한 객체를 제대로 가르키게 되지만 화살표 함수는 그렇지 않다.

const dog = {
	name: '멍멍이', 
	sound: '멍멍!', 
	say: function say() { 
    	console.log(this.sound); 
    } 
}; 
dog.say(); 

// 출력 결과 
멍멍!

Getter 함수 & Setter 함수

Getter

 

const numbers = {
	a: 1,
	b: 2,
	get sum() {
		console.log('sum 함수가 실행됩니다!');
		return this.a + this.b;
	}
};

console.log(numbers.sum);
numbers.b = 5;
console.log(numbers.sum);

//출력
sum 함수가 실행됩니다!
3
sum 함수가 실행됩니다!
6

setter

const numbers = {
	_a: 1,
	_b: 2,
	sum: 3,
	calculate() {
		console.log('calculate');
		this.sum = this._a + this._b;
	},
	get a(){
		return this._a;
	},
	get b(){
		return this._b;
	},
	set a(value){
		console.log('a가 바뀝니다.');
		this._a = value;
		this.calculate();
	},
	set b(value) {
    console.log('b가 바뀝니다.');
    this._b = value;
    this.calculate();
  }
};

console.log(numbers.sum);
numbers.a = 5;
numbers.b = 7;
console.log(numbers.sum);

//출력
3
a가 바뀝니다. // a -> 5. setter
calculate
b가 바뀝니다. // b -> 7. setter
calculate
12

• Getter, Setter는 자바에서 캡슐화와 같은 정보 은닉의 목적을 가진다.
• 변수 관계에 있어서 일관성을 유지하며 코드 및 외관상으로 보기 좋은 유연한 코드가 만들어진다.
• 무조건적으로 사용한다면 불필요한 코드만 늘어나는 경우가 된다.

https://mygumi.tistory.com/161

https://humahumahuma.tistory.com/68

 

배열

//객체 배열
const objects =[{ name: '멍멍이' },{ name: '야옹이'}];
console.log(objects);
console.log(objects[0]);
console.log(objects[1]);

//출력 결과
[Object, Object]
0: Object
name: "멍멍이"
1: Object
name: "야옹이"
{name: "멍멍이"}
{name: "야옹이"}

const objects = [{ name: '멍멍이' }, {name: '야옹이'}];

objects.push({
	name: '멍뭉이'
});

console.log(objects);
console.log(objects.length); // 배열 길이

//출력 결과
[Object, Object, Object]
0: Object
name: "멍멍이"
1: Object
name: "야옹이"
2: Object
name: "멍뭉이"
//배열 길이
3

• 기존 프로그래밍 언어와 배열을 선언하는 방식은 비슷하다
• 배열에 새로운 항목을 추가할 때에는 push 키워드를 사용한다.
• 배열의 길이를 알고 싶을 때는 length 키워드를 사용한다.