참고
- https://poiemaweb.com/js-object
- https://soeunlee.medium.com/javascript%EC%97%90%EC%84%9C-%EC%99%9C-%ED%95%A8%EC%88%98%EA%B0%80-1%EA%B8%89-%EA%B0%9D%EC%B2%B4%EC%9D%BC%EA%B9%8C%EC%9A%94-cc6bd2a9ecac
- https://velog.io/@reveloper-1311/%EC%9D%BC%EA%B8%89-%EA%B0%9D%EC%B2%B4First-Class-Object%EB%9E%80
객체
- 키(key)와 값(value)으로 구성된 프로퍼티(property)들의 집합
- 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다.
- 즉 프로퍼티 값으로 함수를 사용할 수 있고 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메소드라고 부른다.
- 객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작을 의미하는 메소드(method)로 구성된 집합이다.
일급 객체
다른 객체에서 연산(인자로 전달, 결과값으로 리턴, 변수에 할당)을 할수 있도록 지원하는 객체
(조건)
1) 다른 객체에서 인자로 전달할 수 있다.
var a = function(num) {
return num
}
function add(number) {
var sum = number+number;
console.log(sum); // 6
}
add(a(3)) // a(num)함수를 add(number)함수의 인자로 사용2. 변수에 할당할 수 있다.
var a = function(num) {
console.log(num)
}3. 다른 함수의 결과로 리턴될 수 있다.
function add(numA) {
return function (numB) {
return numA + numB;
}
}
console.log(add(2)(3)); // 5
객체 생성 방법
1. 객체 리터럴
- 중괄호({})를 사용하여 {}내에 프로퍼티를 추가해서 객체를 생성할 수 있고 {}내에 아무것도 기술하지 않으면 빈 객체가 생성된다.
var me = {
name : 'Kim',
age : 25,
introduce : function() {
console.log("my name is " + this.name);
}
}
me.introduce() // my name is Kim2. 생성자 함수
- 프로퍼티가 동일한 객체를 여러개 쉽게 생성할 수 있다.
- 생성자 함수 이름은 보통 대문자로 시작한다.(생성자 함수임을 표현하기 위해)
- 프로퍼티 or 메소드명 앞에 기술한 this는 생성자 함수가 만들 인스턴스(instance)를 가리킨다.
- this에 연결(바인딩)되어 있는 프로퍼티 및 메소드는 public(외부에서 참조 가능)하다.
- 생성자 함수 내에서 선언한 변수는 private(외부에서 참조 불가능)하다.(즉 생성자 함수 내부에서는 접근이 가능하나 외부에서는 접근 불가능)
function student(name, age) {
var check = true;
this.name = name;
this.age = age;
console.log(check); // true
}
var a = new student('Kim', 25);
console.log(a) // { name: 'Kim', age: 25 }
console.log(a.check) // undefined
객체 프로퍼티 접근
1. 프로퍼티 키
- 프로퍼티 키는 문자열로 지정한다.
- 문자열 타입의 값으로 수렴하는 표현식도 가능하다.(단 따옴표('' or "")를 사용해야함)
- 자바스크립트에서 사용 가능한 이름인 경우 따옴표를 생략할 수 있지만 유효하지 않을 경우 반드시 따옴표를 사용해야한다.
var like = {
food-name : 'ramen', // 불가능 이유:SyntaxError: Unexpected token '-'
'food-name' : 'ramen', // 가능
food_name : 'rice', // 가능
}2. 프로퍼티 값 읽기
- 객체의 프로퍼티 값 접근 방법은 마침표(.) 표기법 과 대괄호[] 표기법이 있다.
- 프로퍼티 키가 유효한 자바스크립트 이름이고 예약어가 아닌 경우 (마침표, 대괄호)표기법 모두 사용 가능하다.
- 프로퍼티 키가 유효하지 않은 자바스크립트 이름이거나 예약어인 경우 대괄호 표기법으로 읽어야 하고
대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열이어야 한다.
var person = {
'first-name': 'Ung-mo',
'last-name': 'Lee',
gender: 'male',
1: 10
};
console.log(person);
console.log(person.first-name); // NaN: undefined-undefined
console.log(person[first-name]); // ReferenceError: first is not defined
console.log(person['first-name']); // 'Ung-mo'
console.log(person.gender); // 'male'
console.log(person[gender]); // ReferenceError: gender is not defined
console.log(person['gender']); // 'male'
console.log(person['1']); // 10
console.log(person[1]); // 10 : person[1] -> person['1']
console.log(person.1); // SyntaxError3. 프로퍼티 삭제
- delete 연산자를 사용하면 객체의 프로퍼티를 삭제할 수 있다.(피연산자는 프로퍼티 키)
var me = {
name : 'Kim',
age : 25,
}
console.log(me.age) // 25
delete me.age;
console.log(me.age) // undefined4. for-in 문
- 객체에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다.
- 단 for-in문은 배열에는 사용하지 않는 것이 좋다
- 배열은 순서를 보장하는 데이터 구조이지만 for-in문은 순서를 보장하지 않기 때문
- 배열 요소만을 순회하지 않는다.
var array = ['one', 'two'];
array.name = 'my array';
for (var index in array) {
console.log(index + ': ' + array[index]);
}
/*
0: one
1: two
name: my array
*/'Javascript' 카테고리의 다른 글
| [Javascript] 함수(function) (0) | 2021.06.30 |
|---|---|
| [Javascript] 객체와 변경불가성(Immutability) (0) | 2021.06.22 |
| [Javascript] 데이터 타입 (0) | 2021.06.18 |
| 자잘한 용어 정리 (0) | 2021.06.09 |
| [Javascript] var, let, const 차이점 (0) | 2021.02.15 |
