객체에 대한 이해
1. 왜 객체를 쓰는지
const userName = "poylib";
const userAge = "26";
const userCheck = true;
const userAddress = "changwon";
// 'user'가 반복되는게 보기 불-편하다
const user = ["poylib", 26, true, "changwon"];
// array로 정렬하면 간단해지지만 userName이 "poylib"인지 "changwon"인지 알기어렵다
// 객체로 해결 !
const userObj = {
name : "poylib",
age : 26,
check : true,
address : "changwon"
}
// 읽기쉬워지고, 원하는 값을 불러오기 편하다
// ex)
console.log(userObj.name);
2. 그래서 객체란
자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체다. 원시 타입의 값은 변경 불가능한 값이지만, 객체 타입의 값은 변경 가능한 값이다.
객체는 0개 이상의 프로퍼티로 구성된 집합
*이해에 필요한 용어
const userName = {
name : 'poylib', // property
greet : function(friend) {
console.log("Hello " + friend);
} // method
};
userName.greet("piylob");
//Hello piylob
- 프로퍼티
name << 프로퍼티 키
'poylib' << 프로퍼티 값
-메서드
greet : function()
자바스크립트의 함수는 일급 객체 이므로 값으로 취급할 수 있다. 즉 함수도 프로퍼티 값으로 사용 가능하다. 만약 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라고 부른다.
/// 여기저기 돌아다니는 기초강의에서는 입문자의 이해를 돕기 위해서인지, 함수와 메서드를 같다고 봐도 된다고 많이 들었다. 하지만 그렇게 이해하고 실습을 진행하다 보니, 구글링 할 때 이해가 어려운 상황이 있었다. 이렇게 개념을 구분하고 넘어가니 훨씬 정리가 잘된다.
3. 객체의 생성 방법
객체 생성 방법은 여러개가 있지만, 일반적인 방법은 객체 리터럴을 사용하는 방법이다. 객체 리터럴은 {} 내에 0개 이상의 프로퍼티를 정의한다.(빈 객체도 가능) 변수가 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성한다.
객체 리터럴의 중괄호는 코드 블록을 의미하지 않는다. 즉 값으로 평가되는 표현식이므로 객체 리터럴의 닫는 중괄호 뒤에는 세미콜론을 붙인다.
4. 프로퍼티
객체는 프로퍼티의 집합 !
Key : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
Value : 자바스크립트에서 사용할 수 있는 모든 값
Key는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다. 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니지만, 따르지 않는다면,,
var user = {
firstName : 'poy',
'last-name' : 'lib'
};
// '-'연산자가 있어 표현식으로 인식하기 때문에, 따옴표를 사용해야 한다.
4.1 프로퍼티 접근
프로퍼티 접근법은 두 가지가 있다.
- 마침표 표기법
- 대괄호 표기법
const user = {
name : 'poylib'
};
console.log(user.name); //poylib
console.log(user['name']); //poylib
// 대괄호 표기시 프로퍼티 키를 변수로 받는다면 따옴표가 필요없다.
console.log(user.age); //undefined
//객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.
4.2 프로퍼티의 동적 생성과 갱신
이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신되고, 존재하지 않는 프로퍼티에 값을 할당하면 동적으로 생성되고 추가되어 프로퍼티 값이 할당된다.
const user = {
name : 'poy'
};
console.log(user.name); //poy
user.name = 'poylib';
console.log(user.name); //poylib
user.age = 26;
console.log(user.age); //26
5. 메서드
const obj = {
name: 'poylib',
sayHi: function() {
console.log('Hi ' + this.name);
}
};
obj.sayHi(); //메서드 호출방법
ES6에서는 function 키워드를 생략한 축약 표현을 사용할 수 있다.
const obj = {
name: 'poylib',
sayHi() {
console.log('Hi ' + this.name);
}
};
obj.sayHi(); //결과는 같다.
ES6 이전에는 메서드에 대한 명확한 정의가 없었다. 일반적으로 메서드는 객체에 바인딩 된 함수를 일컫는 의미로 사용되었다.
ES6에서는 축약 표현으로 정의된 함수만을 의미하는 것으로 명확하게 규정되었다.하지만 객체 구글링으로 여기저기 다녀보니 혼용하는 건지,,, 다들 정리해놓은 정의가 달랐다.
ES6에서 함수 자체를 일반 함수, 메서드, 화살표 함수로 명확하게 구분해 놓았으니 함수의 정리가 선행되어야 메서드 이해도가 높아질 것 같아 추후 덧붙이기로 한다.
참조 :
Deep dive
nomard corder
'Programing > Javascript' 카테고리의 다른 글
[JS] 구조 분해 할당 (0) | 2022.05.18 |
---|---|
<JS> 자바스트립트로 HTML수정 (0) | 2022.04.20 |
<JS> for문 탐색 (0) | 2022.04.08 |
<JS> 최솟값, 최댓값 (0) | 2022.03.30 |
[JS] 날씨 API (0) | 2022.03.19 |