Javascript) 객체(Object), 배열(Array)

🐣 객체

Property

 객체는 기본적으로 { } 의 형태로 정의하며, 내부에는 key : value 의 형태로 프로퍼티를 가진다.

const superman = {
	name: 'clark',
	age: 33
}

접근

superman.name
superman["age"]

추가

superman.gender = 'male';
superman["hairColor"] = 'black';

삭제

 객체의 프로퍼티를 제거하기 위해서는 delete [객체의 프로퍼티] 형태로 호출할 수 있다.

delete superman.hairColor;

단축 프로퍼티

 아래와 같이 key : value 형태가 아닌 이미 값이 할당되어 있는 변수만을 전달하면, 해당 변수의 key와 value값이 해당 프로퍼티의 key와 value값으로 자동 할당된다.

const name = "clark";
const age = 33;

const superman = {
	name,
	age,
	gender: 'male'
}

프로퍼티 존재 여부 확인

 in 으로 가능하다. 객체가 해당 프로퍼티를 지닌다면 true, 그렇지 않으면 false를 반환한다.

superman.birthDay; // undefined
'birthDay' in superman; // false
'age' in superman; // true

for-in문

 객체 프로퍼티에 연속적으로 접근하기 위해 사용할 수 있다.

for (key in superman) {
	console.log(key + " " + superman[key]);
}

 

Method(메서드)

 객체의 프로퍼티로 할당된 함수를 의미한다.

const superman = {
	name: "clark",
	age: 33,
	fly: function() { // fly() {...}으로도 생략 가능
		console.log("날아갑니다.")
	}
}

 

this

 this가 가리키는 대상은 런타임에 결정된다.

const user = {
	name: "Mike",
	sayHello() {
		console.log(`Hello, I'm ${this.name}`);
	}
}

 

cf. Arrow function & this

 화살표 함수에서의 this는 해당 객체를 가리키는 것이 아니라 전역 객체를 가리킨다. 

전역 객체는 브라우저 환경의 경우에는 window 객체를, Node JS 환경에서는 global 객체를 의미한다.

let boy = {
	name: "Mike",
	sayHello = () => {
		console.log(this);
	}
}

boy.sayHello();

 

cf. 화살표 함수를 메서드로 사용할 경우 this는 해당 Object가 아닌 전역 객체를 참조한다.

화살표 함수로 정의한 메서드 내부의 this는 브라우저에서 window를 가리킨다.

---

🐣 Array

 순서를 지니는 리스트이다.

주요 메서드

• push : 배열 끝에 추가
• pop : 배열 끝 요소 제거
• unshift : 배열 앞에 추가
• shift : 배열 앞에 제거

 

반복 순회

for

for(let i = 0; i < arr.length; i++) { ... }

for-of

 for문 보다 간결하지만 인덱스를 얻지 못한다는 단점이 존재한다. 객체 프로퍼티 순회를 위해 사용되는 for-in과 헷갈리지 않는 것이 좋다. 배열도 객체이기 때문에 for-in을 사용할 수 있긴 하나, 장점보다 단점이 많아 잘 사용하지 않는다.

for(let obj of arr) { ... }