객체(Object)
- 객체는 자바스크립트 데이터 타입 중의 하나이다.
- 객체는 기능과 속성을 가지고 있다.
- 객체는 key:value형태로 이루어진 변수이며, 배열과는 다르게 순서가 중요하지 않다.
let Object={
key1 : value,
key2 : value,
...
}객체가 보유한 값을 '프로퍼티'라고 하며, 객체가 보유한 함수를 '메서드'라고 한다. (둘다 프로퍼티라고 하기도 한다)
객체의 프로퍼티와 메서드들은 key값으로 구분된다.
객체를 만드는 방식은 총 3가지이다.
- 객체 리터럴 방식
- 생성자 함수
- Object.create()
1. 객체 리터럴 방식
var obj = {key:value, ...} : 변수처럼 객체를 생성하는 방식으로 중괄호안에 key:value를 쉼표(,)로 구분하여 만든다.
let myself={
name : 'Code Kim',
age : 30,
location : {
country : 'South Korea',
city : 'Seoul'
},
hello : function(){
return '이름은 ${this.name}이고, 나이는 ${this.age}입니다.';
}
}
console.log(myself)여기서 name,age,location은 프로퍼티이며, hello는 메서드이다.
키값은 문자열(string)으로 작성해야 한다.
따옴표로 감싸는것이 원칙이지만 식별자 네이밍 규칙을 준수한다면 생략할 수 있다.
*식별자 네이밍 규칙 : 문자/숫자/언더스코어(_)/달러기호($)로 구성되며, 숫자로 시작하지 않아야 한다.(예약어 제외)
2. 생성자 방식(Constructor)
new Constructor()방식으로 객체를 생성하는 방식이다.
1) new Object() : new연산자를 통해 Object객체의 생성자함수를 호출한다.
var mySelf=new Object();
mySelf.name='김주현';
mySelf['age']=28;
mySelf.hello = function(){
return '이름은 ${this.name}이고, 나이는 ${this.age}입니다.';
}
console.log(mySelf);
//[object Object] {
// age: 28,
// hello: function(){
// return '이름은 ${this.name}이고, 나이는 ${this.age}입니다.';
//},
// name: "김주현"
//}2) new생성자 : Number, String, Array 등의 내장 객체도 생성할 수 있다.
//String객체 생성하기
var strObj = new String('hello world');
console.log(strObj)
//Array객체 생성하기
var arrObj = new Array([1,2,3]);
console.log(arrObj)3) new 사용자 정의 생성자() : 직접 생성자 함수를 만들어 객체를 생성할 수 있다.
//생성자 함수 만들기
var mySelf = function(name, age){
this.name = name;
this.age = age;
this.hello = function() {
return '이름은 ${this.name}이고, 나이는 ${this.age}입니다.';
}
}
//객체 생성하기
var myObj = new mySelf('김주현', 28);
console.log(myObj);
//[object Object] {
// age: 28,
// hello: function() { ... },
// name: "김주현"
//}3. Object.create() 방식
Object.create(프로토타입) : 프로토타입 상속을 통해 객체를 만드는 방식이다.
const calculate1= {
a: 2,
square : function(b){
return this.a * 2;
//this는 calculate1을 가리킴
}
};
console.log(calculate1.square());
const calcualte2 = Object.create(calculate1);
//calculate2는 프로토타입을 calculate1으로 가지는 객체이다
calculate2.a=4;
//calculate2에 'a'라는 새로운 속성을 만듬 (method overriding)
console.log(calculate2.square()); //16
//calculate1의 함수 square를 상속받으며, this.a는
//calculate2.a를 나타내고 이는 calculate2의 개인속성 'a'가 된다.점표기법(Dot notation) vs 괄호표기법(Bracket notation)
1. Dot notation
마침표(.)로 프로퍼티에 접근한다.
- 프로퍼티 식별자는 오로지 알파벳만 가능하다(_, &, $포함)
- 숫자로 시작할 수 없다.
- 변수를 포함할 수 없다.
let myself={
name : 'Code Kim',
age : 30,
location : {
country : 'South Korea',
city : 'Seoul'
}
}
console.log(myself.name);
console.log(myself.age);
console.log(myself.location);key는 객체의 프로퍼티만 허용되기 때문에, 다른 변수를 통해 key값을 참조할 수 없다.
let myself={
name : 'Code Kim',
age : 30,
location : {
country : 'South Korea',
city : 'Seoul'
}
};
let myName='juhyun';
console.log(myself.myName); //undefined
// myName은 myself에 정의된 프로퍼티가 아님
// myname.name으로만 접근 가능
2. Bracket Notation
대괄호([]) 사이에 키값을 '문자열'로 넣어 접근한다.
- 프로퍼티 식별자는 문자열 혹은 문자열을 참조하는 변수
- 숫자로 시작할 수 있다.
- 변수,공백 사용가능하다.
let myself={
name : 'Code Kim',
age : 30,
location : {
country : 'South Korea',
city : 'Seoul'
}
}
console.log(myself['name']);
console.log(myself['age']);
console.log(myself['location']);
브라켓은 변수가 문자열로 해석되면 변수 또한 쓸 수 있다.
let obj = {
cat: 'meow',
dog: 'woof',
};
let dog = 'cat';
//bracket notation은 obj안에 dog프로퍼티를 찾지 않고,
//변수dog에 cat을 대입하여 문자열값이 패스되고 cat프로퍼티를 찾는다
let sound1 = obj[dog];
console.log(sound1); // meow
//dot notation은 변수에 접근할 수 없어 dog변수의 값 대신 dog문자열의 값을 찾는다
let sound2 = obj.dog;
console.log(sound2); // woof참고사이트 :
https://codeburst.io/javascript-quickie-dot-notation-vs-bracket-notation-333641c0f781
https://curryyou.tistory.com/189
