JS_객체(Object)

국비필기노트/HTML & CSS & JS

JS_객체(Object)

개발..너... 2022. 5. 15. 20:48

▶객체란?

배열과 함께 참조자료형에 속한다.

하나의 데이터형태에 여러개의 데이터를 표현하기 위해 사용하는 자료의 형태이다

객체는 배열과 주로 비교가 많이 되는데 객체의 가장 큰 장점은 직관적이라는 것이다.

배열은 people = [1,2,3] 형태로 저장되기에 코드를 처음 보는 사람들은 이 배열이 어떤 값을 저장하는지 주석이나 명확한 변수명이 없다면 알 수 없다. 그러나 객체는 " : " 을 사용하여 코드의 명확성을 더해 협업을 하기에 유용하다고 할 수 있다.

▶객체의 생성

1) { } 사용하여 객체생성

let people = { };

people이라는 변수는 비어있는 객체를 가지고있는 변수가 된다. 이를 빈 객체라고 부른다.

2) 생성자 형태로 객체생성

let grade = new Object( ){ } ;

생성자로 객체를 생성하는 것은 즉, 객체를 생성하는 것이다. new를 붙혀서 Object 라는 객체를 grade라는 변수에 담은 것으로 new가 붙어져있는 순간 Object를 함수가 아닌 생성자라고 칭한다.

자바에서의 생성자는 클래스에 소속되어있고 깊은 연관이 있었으나, 자바스크립트의 생성자는 단순히 일반 함수와 동일한 역할을 한다.

3) 생성자의 초기화

function Person(name){
this.name = name;
this.introuce = function( ) {
return 'My name is ' + this.name;
}
}

const p1 = new Person('egoing') ;
console.log(p1.introduce());

해당 예시는 생성자를 통해 'egoing'이라는 값을 person이라는 함수에 넣었으며 그 값은 끝까지 내려와 p1에 담기게된다. 이렇게 Person이라는 객체가 어떤 프로퍼티를 가지는지, 어떠한 메서드를 가져서 어떤 특정 일을 하는지 세팅하는 것을 초기화라고 한다.

또한 p1뿐만 아니라 p2, p3을 추가적으로 생성하여 값을 넣으면 function Person을 통해서 계속해서 introduce의 return 값을 출력할 수 있기 때문에 초기화는 코드의 재사용성을 크게 높힌다.

▶객체에 값 입력

let people = {
name : "kim",
gender : "여자"
};

"키: 값"을 입력하며 이를 속성이라고 부른다.

{ } 뒤에 ;를 붙혀주지않아도 JS는 문제없이 이를 실행시키나 문법적인 일관성을 위해 ; 를 찍어주는 습관을 기른다.

▶빈 객체 변수 호출

1) [ ] 사용

people['name'] = 'kjh;
people['gender'] = '여자';

객체 안에 추가되어있는 변수를 멤버변수 혹은 프로퍼티라고 칭한다.

객체는 index가 따로 존재하지 않기에 [ ] 안에 키의 이름을 넣어준다.

변수이름["키의이름"] 의 형식을 사용하며 역시 별도의 var, let, const 키워드는 필요하지 않는다.

2) 점 연산자 사용

people.name = "kjh";
people.gender = "여자";

변수 추가를 위해서는 객체이름.변수명 = 값; 의 형식을 사용하는데 선언을 위한 별도의 var, let, const 키워드는 사용하지 않는다.

또한 점 연산자를 사용하여 멤버변수를 출력시킬 땐 [ ] 처럼 " "를 사용해선 안된다는 특징이 있다.

3) [ ] 사용하여 변수 호출 vs . 연산자 사용하여 변수 호출

[ ]사용할 경우: 코딩할 때 정확히 어떤키가 입력되는지 모를 때

.을 사용할 경우: 코딩하는 그 순간 그 키에 해당하는 값을 받아오고싶을 때

.은 우리가 코딩을 할 때 해당 값이 무엇인지를 알고 test등을 위해 그 순간 해당값을 정확히 받아오고싶을 때 사용하지만 [ ] 는 runtime에서 사용자가 입력하는 내용에 따라 값이 바뀌기에 우리는 코딩하는 그 시점엔 정확히 어떤 값이 들어오는지를 모른다. 그 때 [ ] 를 사용한다.