Javascript 기초2 - 객체, Property, 메소드, this, 배열

객체(Object)

객체 : 변수 선언 시 중괄호로 작성하고 key와 value로 짝지어서 구성

(구조가 Python의 Dictionary와 비슷하다)

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

중괄호 안의 속성들을 Property라고 한다.

각 Property는 쉼표로 구분하여 작성한다.

• 객체에 접근하기

: “.” 사용하여 접근 / 대괄호 “[ ]” 사용하여 접근

superman.name : “clark” 반환

sumperman["age"] : 33 반환

• 객체에 속성 추가하기

: “.” 사용하여 추가 / 대괄호 “[ ]” 사용하여 추가

superman.gender = “male”; → superman 객체에 gender : “male” 추가

superman[”hairColor”] = “black”; → superman 객체에 hairColor : “black” 추가

• 객체에 속성 삭제하기

: delete 사용

delete superman.hairColor; -> superman 객체에 hairColor 속성 삭제

※ 함수로 객체 생성하기

: return에 객체를 생성하면 된다.

function makeObject(name, age){
	return {
		name : name,
		age : age,
		hobby : "football",
	}
}

const Mike = makeObject("Mike", 30);
console.log(Mike);

Object {

age : 30,

hobby : “football”,

name : “Mike”,

}

이렇게 출력된다.

---

단축 Property

객체 선언 전에 미리 선언된 변수를 Property로 바로 가져올 수 있다.

이때 변수명과 Property명이 같다면 하나를 생략할 수 있다.

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

const superman = {
	name,  // name : name과 같다.
	age,   // age : age와 같다.
	gender : "male",
}

---

Property 존재 여부 확인

: in을 사용하여 존재 여부 확인

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

"birthday" in superman; // false 반환
"age" in superman;  // true 반환

※ 이때 없는 Property를 호출하면 에러가 발생하지 않고 undefined가 출력된다.

superman.birthday; : undefined 반환

ex) 객체의 나이가 20살 미만이면 false, 20살 이상 성인이면 true 반환하는 함수 작성

function isAdult(user) {
	if (!("age" in user) || user.age < 20) {
		return false;
	} else {
		return true;
	}
}

const Mike = {
	name : "Mike",
	age : 30,
}

const Jane = {
	name : "Jane",
}

console.log(isAdult(Mike))
console.log(isAdult(Jane))

👉 user라는 매개변수에 Mike, Jane이라는 Object 입력

20살 미만인 것만 고려하는 것이 아니라 나이가 선언되지 않았을 때도 고려해야 한다.

---

for ... in 반복문 활용

const Mike = {
	name : "Mike",
	age : 30,
}

for(x in Mike){
	console.log(Mike[x]) // Mike["name"] , Mike["age"] 출력
}

여기서 x는 Mike라는 객체가 가지고 있는 Key를 뜻한다. (name, age)

---

메소드(method)

: 객체 Property로 할당된 함수

const superman = {
	name : "clark",
	age : 33,
	fly : function() {
		console.log("날아갑니다.")
	}
}

superman.fly();

👉 “날아갑니다” 출력

이때, 객체 프로퍼티로 할당된 fly를 메소드(method)라고 한다.

※ 메소드를 단축해서 작성할 수도 있다.

const superman = {
	fly() {
		console.log("날아갑니다.");
	}
}

function을 생략하고 작성할 수 있다.

---

this

: 메소드에 객체의 프로퍼티를 호출하고 싶다면 이때 this를 써야한다.

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

👉 user.sayHello(); 로 메소드를 호출하게 되면 user가 sayHello 메소드의 this가 된다.

※ 이때 만약, sayHello 메소드가 화살표 함수로 생성되었다면 동작이 달라지게 된다.

왜냐하면, 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않는다.

따라서, 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져온다.

→ 화살표 함수에서의 this는 객체가 아니라 전역객체를 가리키게 된다.

(브라우저환경 전역 객체 - window / Node.js 환경 전역 객체 - global)

💡 ∴ 메소드는 화살표 함수로 작성하지 않는 것이 좋다!

※만약에 this 자리에 user를 써서 user.name으로 객체를 불러온다면 문제가 발생할 수 있다.

let user = {
	name : "Mike",
	showName : function() {
		console.log(user.name);
	}
}

let man = user;
user = null;

man.showName();

👉 user가 null이기 때문에 에러가 발생한다.

하지만 user.name 대신 this.name을 쓰면 에러가 발생하지 않고 잘 실행된다.

따라서 메소드에는 this로 객체의 프로퍼티를 호출하는 것이 좋다.

---

배열

: 순서가 있는 리스트

• 배열의 길이 구하기 : length

• 배열 끝에 값 추가 : push()

• 배열 끝에 값 제거 : pop()

• 배열 앞에 추가 / 제거 : 추가 - unshift() / 제거 - shift()

※ 배열의 길이를 이용하여 반복문에 활용한다.

let days = ["월", "화", "수"];

for let index = 0; index < days.length; index++){
	console.log(days[index])
}

👉 “월”, “화”, “수” 출력

※ for ... of 사용 (반복문 i에 배열의 값을 저장해서 반복하고 싶을 때)

let days = ["월", "화", "수"];

for(let X of days){
	console.log(X)
}

👉 X에 days 배열 안에 있는 값들이 하나씩 저장되어 반복된다.

X → 순서대로 월, 화, 수 저장

단점 : 배열의 index를 불러올 수 없다.

---