08
23
프로그래밍 언어/Javascript

오브젝트?

728x90

인자의 종류가 추가되면 코드가 길어질 뿐만 아니라 관리하기가 힘들어짐

오브젝트는 key(우리가 접근할 수 있는 프로퍼티)와 value(가지고 있는 값)의 집합체

object = {key: value};
const name = 'ellie';
const age = 4;
print(name, age);
function print(name, age)
{
    console.log(name);
    console.log(age);
}

위의 코드를 개선하기 위해 오브젝트를 사용함

 

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" consent="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="object.js"></script>
    </head>
    <body></body>
</html>

1. Literals and properties

//오브젝트 생성 방법
const obj1 = {}; //object literal
const obj2 = new Object(); //object constructor

function print(person)
{
    console.log(person.name);
    console.log(person.age);
}

const ellie = { name : 'ellie', age : 4}; //2가지의 key(name, age)와 2가지의 value(ellie, 4)
print(ellie);

//자바스크립트는 동적으로 타입이 Runtime(프로그램이 동작하고 있을 때)때 결정됨
//따라서, 뒤늦게 하나의 프로퍼티를 추가 가능
//이렇게 동적으로 코딩하면 금방금방은 좋지만 유지보수가 힘듦
ellie.hasJob = true;
console.log(ellie.hasJob);
//삭제도 가능
delete ellie.hasJob;
console.log(ellie.hasJob);

출력 결과

2. Computed properties (계산된 properties)

//.을 이용하여 접근이 가능
console.log(ellie.name);
//오브젝트 안에 있는 변수의 이름을 string형태로 접근이 가능 (위와 같은 결과가 출력됨)
//키는 무조건 stirng타입으로 받아와야함
console.log(ellie['name']);

ellie['hasJob'] = true;
console.log(ellie.hasJob);

function printValue(obj, key)
{
    //console.log(obj.key); object에 key라는 프로퍼티가 들어있는가?
    console.log(obj[key]); //conputed properties 사용 (나중에 동적으로 키의 value를 받아와야할 때 유용하게 사용)
}
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 = makePerson('ellie', 30);
const person5 = new Person('hee', 45);
console.log(person4);
console.log(person5);
//템플릿같은 역할
function makePerson(name, age)
{
    return {
        /*
        name: name,
        age: age,
        */
        //위와 같이 key와 value의 이름이 동일하면 아래와 같이 생략이 가능
        name,
        age
    }
}

출력 결과

4. Constructor Function

//오브젝트를 생성하는 함수는 보통 대문자로 시작하도록 함수를 만들며, 아래와 같이 작성함
function Person(name, age)
{
    //(생략된 내용) this = {}; 새로운 오브젝트를 만들어서 this에 대입
    this.name = name;
    this.age = age;
    //(생략된 내용) return this; 
}

5. in operator

1) 해당하는 키가 오브젝트 안에 있는지 없는지 확인

console.log('name' in ellie);
console.log('age' in ellie);
console.log('random' in ellie);
console.log(ellie.random); //정의하지 않은 키에 접근하면 undefined가 출력됨

출력 결과

6. for...in, for...of

1) for...in

//for (key in obj)
//ellie가 가지고 있는 키들이 이 블럭을 돌때마다 key라는 지역변수에 할당되어짐
//모든키를 받아와 일을 처리하고싶을 경우 사용

for (const key in ellie)
{
    console.log(key);
}

출력 결과

2)for...of

//for (value of iterable)

const array = [1,2,4,5];
for(let i = 0; i<array.length ; i++)
{
    console.log(array[i]);
}

출력 결과

위의 코드를 더 쉽게 간단하게 작성한 코드

for(const value of array)
{
    console.log(value);
}

7. cloning

const user = {name: 'ellie', age: '20'};
const user2 = user; //같은오브젝트를 가르키고있음
user2.name = 'coder';
console.log(user);

출력 결과

user오브젝트를 복사하기 위한 방법

1) 예전방법

//예전방법
const user3 = {}; //텅텅 비어있는 오브젝트
for(const key in user)
{
    user3[key] = user[key];
}
console.log(user3);

출력 결과

2) assign사용

const user4 = {};
//assign(복사하고자하는 타겟, 복사하려고하는 소스) , 타겟과 소스가 통합된 값이 리턴됨
Object.assign(user4, user);
//const user4 = Object.assign({}, user); //이렇게 작성해도됨
console.log(user4);

출력 결과

3) anoter example

const fruit1 = {color: 'red'};
const fruit2 = {color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, fruit2); //뒤에 있는것이 앞의 값을 덮음
console.log(mixed.color); //따라서 색상이 red가 아닌 blue가 나오게 됨
console.log(mixed.size);

출력 결과

728x90
저작자표시 (새창열림)

'프로그래밍 언어 > Javascript' 카테고리의 다른 글

유용한 10가지 배열 함수들과 예제 문제  (0) 2021.08.23
자바스크립트 배열 개념과 APIs 총정리  (0) 2021.08.23
클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리  (0) 2021.08.20
Arrow Function은 무엇인가? 함수의 선언과 표현  (0) 2021.08.20
operator, if, for loop  (0) 2021.08.19
COMMENT
 

티스토리툴바