객채
자료형중에 하나로, 키(key)-값(value) 쌍으로 구성된 프로퍼티(property)들의 집합.
여기서 키는 문자열이거나 심볼(Symbol)이 될 수 있으며,
값은 자바스크립트에서 사용할 수 있는 모든 값(다른 객체를 포함)을 말함.
객체는 데이터(변수들)와 그 데이터를 처리하는 함수(메서드)를 하나의 단위로 묶어서 관리할수 있게함.
기본문법
let user = new Object(); // '객체 생성자' 문법
let user = {}; // '객체 리터럴' 문법. 주로 이 방법을 사용
let person = {
name: "홍길동",
age: 30,
greeting: function() {
console.log("안녕하세요! " + this.name + "입니다.");
}
};
console.log(person.name); //홍길동
// 점 표기법을 사용하여 'name' 프로퍼티의 값에 접근. 대부분 이방식을 많이 씀
console.log(person['age']); //30
// 대괄호 표기법을 사용하여 'age' 프로퍼티의 값에 접근
person.greeting(); // 안녕하세요! 홍길동입니다.
//'greeting' 메서드 호출person이라는 변수는 name, age, greeting이라는 세 개의 프로퍼티를 가진 객체를 참조함.
name과 age는 데이터를 저장하는 프로퍼티이고, greeting은 메서드(함수) 프로퍼티.
this 키워드는 현재 객체를 참조하기 때문에 name프로퍼티를 가리킴.
리터럴과 프로퍼티
객체 리터럴 : 중괄호 {}를 사용하여 객체를 직접 선언하는 방법.
이 방식으로 객체를 생성할 때는 중괄호 안에 키: 값 형태의 프로퍼티를 정의.
각 프로퍼티는 콤마(,)로 구분함
프로퍼티 : 객체 내의 각 요소. 프로퍼티는 키: 값 쌍으로 구성되며, 객체의 정보를 저장.
프로퍼티 키는 문자열이나 심볼이 될 수 있으며, 값은 자바스크립트에서 사용할 수 있는 모든 데이터 유형이 될 수 있음.
- 중괄호 표기법으로 user객채를 생성.
let user = { // 객체 리터럴로 객체 생성
name: "John", // 첫 번째 프로퍼티: "name" 키와 "John" 값
age: 30 // 두 번째 프로퍼티: "age" 키와 30 값
};- 객채에 프로퍼티를 추가할수 있음.
user.isAdmin = true; // 새 불린형 프로퍼티 "isAdmin" 추가- delete연산자를 사용해 프로퍼티를 삭제할 수 있음.
delete user.age; // "age" 프로퍼티 삭제- 점 표기법(.) 또는 대괄호 표기법([])을 사용하여 프로퍼티에 접근할 수 있음.
console.log(user.name); // 점 표기법
console.log(user['name']); // 대괄호 표기법- 여러 단어로 이루어진 프로퍼티이름인 경우 따옴표로 묶어야 됨.
let user = {
name: "John",
age: 30,
"likes birds": true // 복수의 단어는 따옴표로 묶어야 합니다.
};상수 객채의 수정?
const로 선언된 객체는 그 참조를 변경할 수 없지만, 객체 내부의 프로퍼티는 수정할 수 있음.
const user = {
name: "John"
};
user.name = "Pete"; // 가능
user.age = 30; // 가능
console.log(user); // {name: 'Pete', age: 30}
user = {name: "George"}; // TypeError: Assignment to constant variable.
//user변수 자체에 다른 객체나 값을 할당하는 것은 불가능.대괄호 표기법
자바스크립트에서 객체의 프로퍼티에 접근하는 방법중하나.
보통 점 표기법을 자주사용하나, 특정상황에서는 대괄호표기법을 씀.
기본문법
객체이름["프로퍼티이름"]
- 유효하지 않은 식별자 이름 사용
프로퍼티 이름이 자바스크립트에서 유효한 변수 이름이 아닌 경우
(예: 공백이 포함되거나, 숫자로 시작하는 경우, $와 _를 제외한 특수문자 등).
let user = {};
user["likes birds"] = "ABC";
console.log(user["likes birds"]); // ABC
delete user["likes birds"];
console.log(user["likes birds"]); //undefined
- 동적 프로퍼티 이름
프로퍼티 이름이 런타임에 결정되어야 하는 경우.
즉, 프로퍼티 이름이 변수에 저장되어 있거나, 계산되어야 하는 경우
let user = {
name: "John",
age: 30
};
let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");
alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우)
// 30 (프롬프트 창에 "30"을 입력한 경우)계산된 프로퍼티
객채를 정의할 때 프로퍼티 이름을 문자열 리터럴이나 식별자가 아닌,
표현식을 사용하여 동적으로 결정하는 기능.
객체 리터럴 내에서 대괄호([])를 사용하여 표현식을 감싸서 프로퍼티 이름을 계산.
let propName = "name";
let value = "John";
let obj = {
[propName]: value
};
console.log(obj.name); // "John"obj안에 변수 propName의 값"name"이 프로퍼티의 키로 사용됨. 키값으로는 변수 value할당.
단축 프로퍼티
객체를 생성할 때 프로퍼티의 이름과 값이 동일한 변수명을 사용하는 경우, 간결하게 표현가능.
(변수랑 값이 동일할 때 솔직히 헷갈림. 개인적으로는 아예 다르게 구분하는게 좋은데
개발자들은 그게 아닌가봄)
let name = "John";
let age = 30;
// 전통적인 방식
let user = {
name: name,
age: age
};
console.log(user); // {name: "John", age: 30}
// 단축 프로퍼티를 사용한 방식
let userShorthand = {
name,
age
};
console.log(userShorthand); // {name: "John", age: 30}
//예시에는 없지만 일반 프로퍼티와 단축 프로퍼티를 함께 섞어서 사용도가능프로퍼티 이름의 제약사항
객체 프로퍼티 이름을 정할 때는 상당히 유연함.어떤 문자형,
심볼형 값도 프로퍼티 키가 될 수 있음.
문자형이나 심볼형에 속하지 않은 값은 문자열로 자동 형 변환
예외)
let obj = {};
obj.__proto__ = 5; // 숫자를 할당.
alert(obj.__proto__);
// [object Object] - 숫자를 할당했지만 값은 객체가 됨.
//__proto__는 객체의 프로토타입을 설정하기 위해 사용되는 특별한 프로퍼티
//프로토타입 상속과 관련된 더 복잡한 동작은
//__proto__와 프로토타입 메서드를 사용하여 해결할 수 있음. 나중에...
‘in’ 연산자로 프로퍼티 존재 여부 확인하기
자바스크립트 객체는 존재하지 않는 프로퍼티에 접근하려 해도
에러가 발생하지 않고 undefined를 반환
연산자 in을 사용하면 프로퍼티 존재 여부를 확인할 수 있음.
기본문법
propertyName in object
- propertyName : 문자열 형태로 표현된 프로퍼티의 이름. (""따옴표)
이 이름이 대상 객체 또는 객체의 프로토타입 체인 상에 존재하는지 확인.- object : 프로퍼티의 존재 여부를 확인할 객체.
const car = {
make: "Toyota",
model: "Camry"
};
console.log("make" in car); // true
console.log("model" in car); // true
console.log("year" in car); // false
for…in’ 반복문
객체의 모든 열거 가능한 프로퍼티를 순회하는 데 사용.
이 구문은 객체의 프로퍼티 이름(키)에 대해 반복 실행되며,
각 반복마다 프로퍼티 이름을 변수에 할당함.
기본문법
for (variable in object) { 실행할 코드 블록 }
- variable: 각 반복에서 현재 프로퍼티의 이름(키)을 저장할 변수.
- object: 순회할 객체.
const person = {
name: "홍길동",
age: 30,
job: "개발자"
};
for (let key in person) {
console.log(`${key}: ${person[key]}`);//name: 홍길동
//age: 30
//job: 개발자
}상수 person 은 객채가 할당됨.
변수 key를 선언하고 person객채의 모든 프로퍼티를 순회함.
각 순회마다 key변수에 현재 프로퍼티 이름(name,age...)이 할당됨.
첫순회때 key는 name이고 ,person[key(name)]는 홍길동이라는 값을 반환함.
두번째 key는 age, person[age]은 30 이런식이 됨.
객채 정렬 방식
정수 프로퍼티(integer property)는 자동으로 정렬되고,
그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬됨.
- 정수프로퍼티란?
-문자열 키가 숫자로 변환했다가 다시 문자열로 변환해도 원래의 값과 동일한 경우.
let codes = {
"49": "독일",
"41": "스위스",
"44": "영국",
// ..,
"1": "미국"
};
for (let code in codes) {
alert(code); // 1, 41, 44, 49 . 객채를 추가한 순서가아닌 숫자 오름차순으로 정렬됨.
}객채안에 정수프로퍼티로 된 키들을 객채추가한 순서대로 정렬한값을 반환 받고싶으면
프로퍼티 키가 정수프로퍼티로 인식되지 않게 해야됨.
let codes = {
"+49": "독일",
"+41": "스위스",
"+44": "영국",
// ..,
"+1": "미국"
};
for (let code in codes) {
alert(+code ); // 49, 41, 44, 1
}codes 안에 "49", "+49"키값은 둘다 문자열임.
위에서 말했다시피 정수로 변환했다가 다시 문자열로 변환해도 원래의 값과 동일한 문자열을 정수프로퍼티라고함.
+49는 정수로 변환하면 49가 되고 이상태에서 다시 문자열로 바꾸면 +49가 되지는 않음.
즉, 정수 프로퍼티가 아님.
"+49" 문자열의 경우, +가 붙는 것은 수학에서 양수를 나타내는 일반적인 방법임.
JavaScript 엔진은 이를 숫자로 해석할 수 있는 형식으로 인식함.
그리고 단항 덧셈 연산자 (+)를 변수 앞에 사용하면, 해당 변수의 값을 숫자로 변환하려고 시도함.
그래서 alert(+code );에서 +를 붙이면 +49를 숫자로 변환하고 49가 나오게됨.
(100%이해못함 헷갈림.)
