Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 28 | 29 | 30 |
Tags
- xlsx-js-style
- Filter
- meatadata
- app.post
- reactnative
- 타입스크립트
- supabase authentication
- async
- react
- generic
- code-push-standalone
- supabase auth
- javascript
- interface
- 스크롤이벤트
- TS
- supabase 페이지네이션
- map
- codepush
- extends
- 상속
- set
- Spring
- 페이지네이션
- 글또10기x코드트리
- Next.js
- 슬라이딩윈도우
- 코드푸시
- 이진탐색
- array
Archives
- Today
- Total
rhanziy
javascript. Object객체 본문
const player = { // object는 {}
name : "rani",
age: 98,
};
player.name = "rhanziy" // 속성 값 변경
console.log(player);
player.cool = true; // 속성 값 추가
console.log(player);
// Objects
// one of JavaScript's data types
// a collection of related data and/or functionality
// Nearly all objects in JavaScript are instance of Object
// object = { key : value };
// 1. Literals and properties
const obj1 = { }; // 'object literal' syntax
const obj2 = new Object( ); // 'object constructor' syntax
function print(person) {
console.log(person.name);
console.log(person.age);
}
const rhanyi = {name: 'rahnyi', age: 4 };
print(rhanyi);
// with JavaScript magic (dynamically typed language)
// can add properties later
rhanyi.hasJob = true;
console.log(rhanyi.hasJob);
// can delete properties later
delete rhanyi.hasJob;
console.log(rhanyi.hasJob);
// 2. Computed properties
// key should be always string!!
console.log(rhanyi.name);
console.log(rhanyi['name']);
rhanyi['hasJob'] = true;
console.log(rhanyi.hasJob );
function printValue(obj, key) {
console.log(obj[key]);
}
printValue(rhanyi, 'name');
printValue(rhanyi, 'age');
// 3. Property value shorthand
const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'dave', age: 4 };
const person4 = new Person('rhanyi', 29);
console.log(person4);
// 4. Constructor Function
function Person(name, age) {
this.name = name;
this.age = age;
}
// 5. in operator: property existence check (key in obj)
// in을 이용해서 해당하는 key가 obj안에 있는지 확인할 수 있다.
console.log('name' in rhanyi);
console.log('age' in rhanyi);
console.log('random' in rhanyi);
console.log(rhanyi.random);
// 6. for..in vs for..of
// for (key in obj)
console.clear( );
for (key in rhanyi) {
console.log(key);
}
// for (value of literable)
const array = [1, 2, 4, 5];
for (value of array) {
console.log(value);
}
// 7. cloning
// Object.assign(dest, [obj1, obj2, obj3...])
const user = { name: 'rhanyi', age :29 };
const user2 = user;
console.log(user);
// old way
const user3 = { };
for ( key in user) {
user3[key] = user[key];
}
console.clear( );
console.log(user3);
// other way
const user4 = Object.assign({ }, user);
console.log(user4);
//another example
const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({ }, fruit1, fruit2); // 뒤의 값을 덮어씌운다.
console.log(mixed.color);
console.log(mixed.size);
'Html_css_js' 카테고리의 다른 글
javascript. Array배열2(filter, map, reduce, ...) (0) | 2022.01.23 |
---|---|
javascript. Array배열1 (0) | 2022.01.21 |
css. 미디어쿼리 분기점 (0) | 2022.01.20 |
javascript. class (0) | 2022.01.19 |
js. 문서의 맨 끝에 스크롤 도달 시 이벤트 실행 (0) | 2022.01.18 |
Comments