이번에는 Javascript의 객체에 대해 알아보겠습니다.
사람의 구조를 대해 변수로 정의를 한다고 가정해보겠습니다. 사람은 성별이 있고, 키,이름, 몸무게등 여러가지 값들이 있습니다. 이를 변수로 선언하면,
let name='홍길동';
let height=180;
let weight=70;
let sex='남자';
let age=30;이런식으로 선언합니다. 하지만, 홍길동이란 사람말고도 다른사람의 구조를 변수하나하나 전부다 선언한다면, 위에 선언된것과 같이 변수들이 많아질껍니다. 이럴때 우리는 객체라는것을 사용하여, 변수선언을 줄이면서, 사람의 구조를 표현할 수 있습니다.
const person1={
name:'홍길동',
height:180,
weight:70,
sex:'남자',
isMarried:true,
sayName : function(){
console.log(`hello. my Name is ${this.name}!`)
},
graduated : {
'elementarySchool':true,
'middldSchool':true,
'highSchool':true,
'college':true
}
};
const person2={
name:'김영희',
height:165,
weight:50,
sex:'여자',
isMarried:false,
sayName : function(){
console.log(`hello. my Name is ${this.name}!`)
},
graduated : {
'elementarySchool':true,
'middldSchool':true,
'highSchool':false,
'college':false
}
}객체는 하나의 변수안에 데이터와 함수등을 구성하고 있는 집합입니다. 객체는 {} 으로 선언을 하며, 안에 숫자나 문자열값들외에 함수,배열,객체,논리연산자,객체 등 모든 값들이 들어 갈 수 있습니다.
객체안에 값들을 접근은 객체변수명.속성값, 함수는 객체변수.메소드명(파라미터대입 값) 으로 합니다. 예를들어 브라우저 콘솔에 person1의 이름을 출력해보고싶다면, person1.name을 입력하면 홍길동이 나옵니다. 그렇다면 person2의 sayName이라는 함수를 실행해보고싶다면, person2.sayName()을입력하면 hello my Name is 김영희! 가 나옵니다. 위 접근법외에 person1['name'],person2['sayName']() 같은 괄호식으로도 접근을 할 수 있으며, 결과또한 동일한 결과가 나옵니다.
만약에 홍길동의 대학교 졸업여부를 알고싶다면 person1객체 안에 graduated 객체안에 college 속성명으로 접근을 하면 됩니다. person1.graduated.college 이런식으로요. 만약에 괄호식 접근법이라면 person1['graduated']['college'] 이렇게 접근할 수 있습니다.
비구조화할당
비구조화 할당은 ES6에서 새롭게 등장한 개념입니다. 객체에서 특정 값들을 쉽게 추출할 수 있습니다
const person1={
name:'홍길동',
height:180,
weight:70,
sex:'남자',
age:30
};
function descPerson(person){
console.log(`${person.name}은 나이는 ${person.age} 살이고 키는 ${person.height}cm, 몸무게는 ${person.weight}kg 입니다.`);
}객체를 파라미터로 받아 각종 정보들을 콘솔에 출력해주는 함수가 있습니다. 위에처럼 객체.프로퍼티이름 이런식으로 값들을 가져와 로그에 출력합니다. 여기서 비구조화 할당을 통해 좀더 심플하게 만들수 있습니다.
function descPerson(person){
let {name, height,age,weight}=person1;
console.log(`${name}은 나이는 ${age}살이고 키는 ${height}cm, 몸무게는 ${weight}kg 입니다.`);
}
이렇게 값들을 뺴올 수 있습니다. {변수명,변수명}이런식으로 변수를 선언후에 객체주소값을 대입하면, 객체 구조를 분해하여, 변수명과 같은 이름의 키값에 맞 할당 합니다.
위에 함수는 다음과 같이 표현이 가능합니다. 함수를 선언하는 단계에서 paramter를 사용하는 단계에서 비구조화할당을 할 수 있습니다.
function descPerson({name, height,age,weight}){
console.log(`${name}은 나이는 ${age}살이고 키는 ${height}cm, 몸무게는 ${weight}kg 입니다.`);
}
console.log(descPerson(person1));//홍길동은 나이는 30살이고 키는 180cm, 몸무게는 70kg 입니다.비구조화 할당에대한 내용은 여기까지 간단하게 마무리하고, 나중에 따로 포스팅을통해 정리하도록 하겠습니다.
출처
1.https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics
2.패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online. 1장 | 벨로퍼트와 함께 하는 모던 자바스크립트 : JavaScript 입문 - 김민준 강사
3.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (비구조화할당)
