javascript object(객체)
점 표기법
객체내에 캡슐화되어있는 것에 접근하려면 먼저 점을 입력해야한다.
그 다음 접근하고자 하는 항목을 적습니다.
간단한 프로퍼티의 이름일 수도 있을 것이고, 배열의 일부이거나 객체의 메소드를 호출할 수 있습니다.
person.age;
person.interests[1];
person.bio();하위 namespaces
다른 객체를 객체 멤버의 값으로 갖는 것도 가능합니다.
예를 들면, 다음과 같은 name 멤버를
name: ['Bob 'smith']아래와 같이 바꿔볼 것입니다.
name : {
first : 'Bob' ,
last : 'Smith'
},이제 우리는 성공적으로 하위 namespace를 만들었습니다.
복잡해보이지만, 사실 그렇지도 않습니다.
이 속성을 사용하려면 그저 끝에 다른 점을 하나 찍어주기만 하면 됩니다.
JS콘솔에서 아래와 같이 입력해보세요
person.name.first;
person.name.last;중요 : 객체의 속성이 바뀌었으니까, 기존 메소드 코드를 바꿔줘야 합니다.
name[0];
name[1];아래와 같이 바꿔줘야 합니다.
name.first;
name.last;그렇지 않으면 기존 메소드는 더이상 동작하지 않을 것입니다.
괄호 표기법
객체의 프로퍼티에 접근하는 다른 방법으로 과로 표기법을 사용하는 것이 있습니다.
아래의 코드 대신에
person.age;
person.name.first;다시 아래와 같은 코드로 사용할 수 있습니다.
person["age"];
person["name"]["first"];이런 방식은 배열 속에 있는 항목에 접근하는 방법과 매우 유사해 보이는데 실제로도 이는 기본적으로 동일 한 것입니다.
한 항목을 선택하기 위해 인덱스 숫자를 이용하는 대신에 각 멤버의 값들과 연결된 이름을 이용한다.
객체가 간혹 연관배열(associative arrays)이라고 불리는 것이 당연합니다.
연관배열은 배열이 숫자를 값에 연결하는 것과 같은 방법으로 문자열을 값에 매핑합니다.
객체 멤버 설정하기
지금까지는 객체 멤버를 단순히 가져오기만 (또는 반환) 했습니다.
설정할 멤버를 간단히 명시하여(점이나 대괄호 표기법을 사용) 객체 멤버의 값을 설정(갱신)하는 것도 물론 가능합니다.
person.age = 45;
person["name"]["last"];객체 멤버를 설정하는 것은 단순히 기존에 존재하는 프로퍼티나 메소드로 값을 설정하는 것 뿐아니라, 완전히 새로운 멤버를 생성할 수도 있습니다.
person["eyes"] = "hazel"
person.farewell = function(){
alert("Bye everybody!");대괄호 표현의 이점 중 하나는 멤버의 값을 동적으로 변경할 수 있을 뿐 아니라,
멤버 이름까지도 동적으로 사용할 수 있다는 것입니다.
점 표기법으로는 위의 예제처럼 멤버의 이름을 동적으로 사용할 수 없고, 상수 값만을 사용해야 합니다.
1, 클래스 기반 OOP에서 클래스와 객체는 두 개의 별도 구성이며 객체는항상 클래스의 인스턴스로 생성 됩니다.
또한 클래스를 정의하는 데 사용되는(클래스 구문 자체)과 객체를 인스턴스화 하는데 사용되는 기능(생성자) 사이에는 차이가 있다. javascript에서는 함수나 객체 리터럴을 사용하여 별도의 클래스 정의 없이 객체를 생성할 수 있고 종종 생성한다.
이를 통해 기존 OOP보다 객체 작업을 훨씬 더 가볍게 만들 수 있다.
2, 프로토타입 체인은 상속 계층 구조처럼 보이고 어떤 면에서는 비슷하게 작동하지만 다른 면에서는 다릅니다. 하위 클래스가 인스턴스화 되면 하위 클래스에 정의된 속성과 계층 구조에서 추가로 정의된 속성을 결합하는 객체가 생성됩니다.
프로토타이핑을 사용하면 계층구조의 각 수준이 별도의 객체로 표시되며 proto 속성을 통해 함께 연결됩니다. 프로토타입 체인의 동작은 상속보다는 위임에 가깝습니다.
위임은 객체가 작업을 수행하도록 요청을 받았을 때 작업 자체를 수행하거나 다른객체(대리인)에게 대신 작업을 수행하도록 요청할 수 있는 프로그래밍 패턴이다.
여러면에서 위임은 상속보다 객체를 결합하는 더 유연한 방법입니다.
JSON 구조
JSON은 javascript 객체 리터럴 문법을 따르는 문자열 입니다.
기본 데이터 타입인 string, number, array [ ], boolean 그리고 다른 객체를 포함할 수 있습니다.
이런 방식으로 데이터 계층을 구축할 수 있다.
예시))
{
"squadName": "Super hero squad",
"homeTown": "Metro City",
"formed": 2016,
"secretBase": "Super tower",
"active": true,
"members": [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
"name": "Eternal Flame",
"age": 1000000,
"secretIdentity": "Unknown",
"powers": [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
]
}
]
}이 객체를 javascript 프로그램에서 로드하고, 예를 들어 superHeroes라는 변수에 파싱하면 havascript object basics 문서에서 보았떤 것처럼 점/브라켓 표현법을 통해 객체 내 데이터에 접근할 수 있게 됩니다.
superHeroes.homeTown;
superHeroes["active"];하위 계층의 데이터에 접근하려면, 간단하게 프로퍼티 이름과 배열 인덱스의 체인을 통해 접근하면 됩니다. 예를 들어 superHeroes 의 두번째 member의 세번째 power에 접슨하려면 아래와 같이 하면 됩니다.
superHeroes["members"][1]["powers"][2];- 우선 변수이름은
superHeroes입니다. members프로퍼티에 접근하려면,["member"]를 입력합니다.members는 객체로 구성된 배열입니다. 두 번째 객체에 접근할 것이므로[1]을 입력합니다.- 이 객체에서
powers프로퍼티에 접근하려면["powers"]를 입력합니다. powers프로퍼티 안에는 위에서 선택한 hero의 superpower들이 있습니다. 세 번째 것을 선택하야하므로[2]
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/XMLHttpRequest
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON
