객체의 생성
객체를 생성하는 방법을 알아보자.
1.
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
2.
var grades = {};
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;
3.
var grades = new Object();
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;
이번엔 객체를 가져오는 방법을 알아보자. 결과는 80이다.
1.
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
alert(grades['sorialgi']);
2.
alert(grades.sorialgi);
객체와 반복문
객체에 저장된 데이터를 기준으로 반복작업을 해보자.
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(key in grades) {
document.write("key : "+key+" value : "+grades[key]+"<br />");
}
결과는 다음과 같다.
key : egoing value : 10
key : k8805 value : 6
key : sorialgi value : 80
for문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수에 담아서 반복문을 실행한다. 반복문이 실행될 때 변수로 key의 값으로 egoing, k8805, sorialgi가 순차적으로 할당되기 때문에 grades[key]를 통해서 객체의 값을 알아낼 수 있다.
in 앞의 key는 변수명이므로 아무 이름이나 써도 된다.
객체에는 객체를 담을 수도 있고, 함수도 담을 수 있다.
객체 지향 프로그래밍
var grades = {
'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
'show' : function(){
for(var name in this.list){
document.write(name+':'+this.list[name]+"<br />");
}
}
};
grades.show();
이것은 자바스크립트를 이용한 객체 지향 프로그래밍 기법의 핵심이 되는 성질로 취지에 따라서 로직을 객체에 그룹핑해서 객체라는 부품을 조립해서 소프트웨어라는 완제품을 만들 수 있게 해준다.
클래스에 대한 내용은 다음의 링크를 참고하였다. 강의노트를 보며 공부하도록 하자.
https://github.com/dream-ellie/learn-javascript/tree/master/notes
'use strict';
// Objects
// one of the JavaScript's data types.
// a collection of related data and/or functionality.
// Nearly all objects in JavaScript are instances 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 ellie = { name: 'ellie', age: 4 };
print(ellie);
// with JavaScript magic (dynamically typed language)
// can add properties later
ellie.hasJob = true;
console.log(ellie.hasJob);
// can delete properties later
delete ellie.hasJob;
console.log(ellie.hasJob);
// 2. Computed properties
// key should be always string
console.log(ellie.name);
console.log(ellie['name']);
ellie['hasJob'] = true;
console.log(ellie.hasJob);
function printValue(obj, key) {
console.log(obj[key]);
}
printValue(ellie, 'name');
printValue(ellie, '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('elile', 30);
console.log(person4);
// 4. Constructor Function
function Person(name, age) {
// this = {};
this.name = name;
this.age = age;
// return this;
}
// 5. in operator: property existence check (key in obj)
console.log('name' in ellie);
console.log('age' in ellie);
console.log('random' in ellie);
console.log(ellie.random);
// 6. for..in vs for..of
// for (key in obj)
console.clear();
for (let key in ellie) {
console.log(key);
}
// for (value of iterable)
const array = [1, 2, 4, 5];
for (let value of array) {
console.log(value);
}
// 7. Fun cloning
// Object.assign(dest, [obj1, obj2, obj3...])
const user = { name: 'ellie', age: '20' };
const user2 = user;
console.log(user);
// old way
const user3 = {};
for (let key in user) {
user3[key] = user[key];
}
console.clear();
console.log(user3);
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);
// fruit2의 결과가 나옴 (덮어씌워짐)
console.log(mixed.color);
console.log(mixed.size);
'WEB > JavaScript' 카테고리의 다른 글
[JavaScript] html에서 js파일을 가장 효율적으로 포함하는 방법 (0) | 2023.07.27 |
---|---|
[JavaScript] Array.map() 메소드 (0) | 2023.01.17 |
[JavaScript] 함수 (0) | 2022.12.30 |
[JavaScript] charAt() 함수 (0) | 2022.11.02 |
[JavaScript] 반복문 (0) | 2022.07.24 |