FrontJavascript

Object

javascript, weirdparts

Object in javascript

자바스크립트에서 객체는 a collection of key value pairs 이다.

객체의 요소로 변수, 함수(메소드), 심지어 다른 객체 까지 가질 수 있고 각각의 요소에 대한 reference(메모리 어디에 저장되어있는지, 주소) 를 가지고 있다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var person = new Object();

// [] 는 연산자, 해당 객체의 name 주소로 가서 value 를 반환하는
person['firstname'] = 'minkuk';  // name value pair

// firstname 의 reference를 객체 person에게 부여
person['lastname'] = 'Seo';

var firstNameProperty = 'firstname';

console.log(person); //Object
console.log(person[firstNameProperty]); //Tony

// . 또한 연산자  a.name --> a 객체의 name 의 value에 접근가능
console.log(person.firstname); //Tony

//객체 내 요소 추가하기
person.address = new Object();
person.address.street = '111 Main St.';
person.address.city = 'New York';
person.address.state = 'NY';

//. 연산자로 객체의 요소들에 접근, 참조가능

console.log(person.address.street) // 111 Main St.
console.log(person.address.city) // New York
console.log(person['address']['state']) // NY

Object literals

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var person = {}; // 객체 생성 
var person = {
	firstname: 'minkuk',
    lastname: 'Seo'
    
   	//다른 객체도 객체의 요소로 생성가능
   	address: {
        street: '111 Main St.',
        city: 'New York',
        state: 'NY'
    }
 };
 
//객체는 함수의 인자로도 전달이 가능하다
function greet(person) {
    console.log('Hi ' + person.firstname);
}
greet(Tony); // Hi Tony

// 이런식으로 객체생성과 동시에 인자로 넘기기도 가능
greet({
    firstname: 'Mary',
    lastname: Doe
}); // Hi Mary Doe

NameSpace

1
2
3
4
5
var greet = 'Hello!';
var greet = 'Hola!';

console.log(greet); 
// Hola!

자바스크립트는 순차적으로 코드를 실행하기 때문에 위의 결과를 예측하기는 쉽다.

하지만 만약에 각 변수가 다른 자바스크립트에 저장되어 있거나, 외부에서 라이브러리로 가져다 쓰는거라면? 의도치 않게 같은 변수명으로 인해 충돌 가능성이 있다.

이러한 충돌을 방지하기 위해 Namespace 개념이 발생했다. 자바스크립트에서는 객체를 이 네임스페이스로 활용 할 수 있다

1
2
3
4
5
var english = {greet: 'Hello!'};
var spanish = {greet: 'Hola!'};

console.log(english.greet); //Hello!
console.log(spanish.greet); //Hola!

객체 요소 추가 시 주의사항

1
2
3
4
5
6
7
8
9
10
11
english.greeting.greet = 'Hi!';  //이런 식은 error 발생
//. 연산자의 우선순위에 따라 (연관 left-to-right)
//english.greeting은 undefined가 이기 때문에

// 객체 내 새로운 요소를 생성할 때는 [] 연산자를 사용하거나
english[greeting][greet] = 'Hi!';

// 객체 생성과 동시에 요소를 추가하는 것을 추천
english = {greeting: {greet:'Hi!'}};

console.log(english.greeting.greet); // Hi!

Functions

Type & Operator

Share