[JavaScript] 자바스크립트 객체

※ 본 포스팅은 패스트 캠퍼스 강의를 정리한 내용입니다.

 

---

 

목차

 

객체

비구조화 할당

객체 안에 함수 넣기

Getter와 Setter

 

---

 

 

---

[객체]

객체 : 어떠한 값을 선언하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해 준다.

const dogName = "멍멍이"ㅣ
const dogAge = 2;

console.log(dogName);
console.log(dogAge);

// 객체 사용
const dog = {
	Name : "멍멍이",
    Age : 2
    food : {
    	a : 1,
        b : 2,
        ...
    }
    ...
};

dog라는 객체의 내용을 보고 싶다면 key를 사용한다.

// 객체 사용
const dog = {
	Name : "멍멍이",
    Age : 2
    ...
};

console.log(dog.Name);
console.log(dog.Age);

---

[비구조화 할당]

비구조화 할당 (=객체 구조 분해) : 객체에서 특정 값들을 추출해 내는 것

 

hero에 있는 값을 조회하기 위해서 ${hero.alias} , ${hero.name} , ${hero.actor}와 같이 

hero.key의 형태로 객체의 특정 값을 추출한다.

const ironMan = {
	name:'토니 스타크',
	actor : '로버트 다우니 주니어',
	alias : '아이언맨'
};

const captainAmerica = {
	name:'스티븐 로저스',
	actor : '크리스 에반스',
	alias : '캡틴 아메리카'
};

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

 

const {alias, name, actor}를 통해 객체 내부에 있던 값들을 밖으로 빼내어 선언한 것이다.

이것을 비구조화 할당이라고 한다.

const ironMan = {
	name:'토니 스타크',
	actor : '로버트 다우니 주니어',
	alias : '아이언맨'
};

const captainAmerica = {
	name:'스티븐 로저스',
	actor : '크리스 에반스',
	alias : '캡틴 아메리카'
};

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

또는 함수 매개변수에서 선언할 수 있다.

const ironMan = {
	name:'토니 스타크',
	actor : '로버트 다우니 주니어',
	alias : '아이언맨'
};

const captainAmerica = {
	name:'스티븐 로저스',
	actor : '크리스 에반스',
	alias : '캡틴 아메리카'
};

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

---

[객체 안에 함수 넣기]

 

const dog = {
	name : '멍멍이',
    sound : '멍멍!',
    say : function say(){
    	console.log(this.sound);
        //this : 이 함수에 위치해있는 객체
        // 즉, say 함수가 위치해있는 dog객체의 sound를 가리킨다.
    }
}

dog.say(); // 멍멍!

 

이때 function 대신 화살표 함수를 작성한다면 오류가 발생한다.

TypeError가 나타난다.

function 키워드를 사용하여 만든 함수의 this는 자신이 속해있는 곳을 가리키게 된다.

하지만 화살표 함수는 this를 자신이 속해있는 곳을 가리키지 않는다.

그래서 오류가 나타난다.

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

 

cat.say에 dog에 있는 say함수를 연결해 주었다.

cat.say();를 호출하면 function으로 만든 함수에서의 this는 자신이 속해있는 cat을 가리킨다.

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

const cat = {
	name : '야옹이',
    sound : '야옹~'
};

cat.say = dog.say

dog.say(); // 멍멍!
cat.say(); // 야옹~

const catSay = cat.say;
catSay(); // this 가 어떤것인지 몰라 오류가 나타난다.

 

객체 내부 함수에 있는 this는 자신이 속해있는 곳을 가리키게 된다.

화살표 함수에서는 this가 뭔지 몰라 오류가 나타나게 된다.

객체 내부의 함수를 밖으로 꺼내게 된다면 this가 무엇을 가리키는지 몰라 오류가 나타나게 된다.

---

[Getter와 Setter]

객체 안에 getter함수와 setter 함수를 설정할 수 있다.

Getter 함수 : 특정 값을 조회하려고 할 때 사용한다.

Setter 함수 : 특정 값을 바꾸려고 할 때 사용한다.

 

get 함수를 만들기 위해서는 함수명 앞에 get을 붙여주어야 한다.

get 함수에서는 어떠한 값을 무조건 반환해 주어야 한다.

그러므로 return문이 있어야 한다.

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

console.log(numbers.sum);

 

set 함수를 만들기 위해서는 함수명 앞에 set을 붙여주어야 한다.

set 함수에서는 파라미터의 값을 꼭 설정해 주어야 한다.

const dog = {
	Dogname : '멍멍이',
    set name(value){
    	//실행할 문장
        console.log('이름을 설정합니다.' + value);
        this.Dogname = value;
    }
}

console.log(dog.Dogname); // 멍멍이
dog.name = '뭉뭉이'; // 이름을 설정합니다. 뭉뭉이
console.log(dog.Dogname); // 뭉뭉이

 

 

[JavaScript] 자바스크립트 프로토타입과 클래스

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]