[프론트엔드]_JavaScript(es6)_5. Object

공부 자료 : 드림코딩 by 엘리

 

개발 환경 : visual studio code

언어 : js

 

1.Object

오브젝트란 저번에 말한 것처럼 틀이 정해져 있다면 그안에 값을 지정해서 메모리에 올라가 동작하는 것을 말한다.

{} 안에 직접 지정하는 object literal 문법이 있고

생성자를 이용해서 만드는 object constructor 문법이 있다.

이처럼 yoon 이라는 object를 {}를 사용하여 생성하고 이를 Function 의 파라미터로 전달 할 수 있다.

 

자바스크립트는 동적으로 (Runtime) 동작하는 언어인데.

뒤늦게 하나의 property를 추가 할 수 있다.

이렇게 생성하고 지울 수 있지만 필드에서 유지보수를 할 때 힘들고 오류발생을 야기한다.

이 개념에서 가장 중요한 것은 Object는 key 와 value로 이루어진 집합체라는 것이다.

 

2. 계산된 Property

Object에서 해당 키에 해당하는 값을 참조하는 방법은 2가지가 있다.

yoon.name의 경우에는 해당하는 키의 값을 받아오고 싶을 때 사용한다.

yoon['name'] 의 경우 처럼 배열에서 받아오는 것처럼 가능하다. 정확하게 어떤 키가 필요한지 모를 때 사용하면 유용

단. Property는 String 값으로 해야한다.

 

예시는 다음과 같다

여기에서 처럼 printValue 라는 함수는 obj와 key를 받는다.

yoon이라는 오브젝트와 'name' 이라는 string 값을 받아오게 되고,

yoon이라는 오브젝트의 key = 'name'을 찾아 호출하게 된다.

만약 console 안의 값이 obj.key 였다면 undefined를 띄우게 되는데

그 이유는 . 은 참조인데 yoon이란 오브젝트 안에는 key의 이름을 가진 키 는 없기 때문이다.

 

이러한 코드는 동적으로 받아올때 유용하다.

 

3. property value shorthand

위의 코드처럼 새로운 object를 만들 때마다 이런식으로 하게 되면 매우 번거롭다.

이럴 경우 makePerson과 같은 함수를 만들어서 값을 전달만 하도록 하면 유용하다.

makePerson의 경우 class와 같은 역활을 하는것을 알 수 있다. 즉 es6 전에 class 대용으로 많이 사용했다.

키와 value(파라미터로 받는 값)의 이름이 동일하다면 생략이 가능하다.

 

4. constructor Function

위에처럼 순수하게 object를 생성하는 함ㅅ우의 경우 앞에 대문자로 시작하게 만드는게 룰

또한 클래스에서 constructor를 생성 한 것처럼 한다.

 

기존 코드와 무엇이 다른가 하면,

constructor{} 의 항목을 생략하고

이러한 값을 리턴하는것도 생략하였다.

 

 5. in Operator

키가 있는지 없는지 확인 할 수 있다. -> true 와 false 리턴

6. for ... in vs for ...of

첫번째로 for in 의 경우

for 반복문을 돌면서 yoon안의 key 값들을 다 출력한다.

즉 yoon이라는 object가 가지고 있는 키들이 block을 돌 때마다 key 라는 지역변수에 할당이 되는 것

 

두번째로 for of 의 경우

예를 들어 배열을 선언하고 그 값들을 다 출력해볼 때는 for문을 귀찮게 다 써야한다.

이를 간단하게 도와주는것이 for of 이다.

value 값의 array로 array에 들어있는 값들을 출력한다.

in은 key의 값

of는 value의 값

for문을 통해 반복할 수 있다.

 

7. Fun cloning

위의 코드처럼 user라는 object를 생성한다.

그 다음 user2는 user를 받아온다.

const로 user 를 생성하면 메모리에 user 라는 공간을 가리키는 reference가 생기고

const로 user2 를 생성하면 메모리에 user2 라는 공간을 가리키는 reference가 각자 생긴다.

 

여기서 user 는 해당 고유 reference는 name과 age의 라는 object 값이 있게 된다.

= 로 user2에 user 를 넣게 되면 user2의 고유 reference는 user와 같은 object를 가리키게 되는 것이다.

약간 포인터와 비슷하다고 생각한다.

위의 코드는 예전에 사용하던 방식이다.

비어있는 user3를 생성한뒤

for...in을 사용하여 키를 대입하게 된다.

user 안에 있는 key를 for반복을 하면서 user3의 새로운 property를 추가하는 것이다.

 

요즘 사용하는 방식은 Object 안의 assign을 이용하는 것이다.

assign을 ctrl + 클릭 하게 되서 찾아가게 되면

assign<T, U>(target: T, source: U): T & U; 라고 되어있다.

복사하고자 하는 target과 원본 소스를 파라미터로 받는다.

 

이런식으로 비어있는 user4의 Object를 선언하고 할당 할 수도 있고

한 줄로 간단하게 할 수도 있다.

 

또한 여러개의 소스도 전달 할 수있다.

이런식으로 mixed는 fruit1 과 fruit2 를 받아서 섞게 되는데

기준은 마지막에 섞인 것을 기준으로 한다.

 

소스 코드

//홈페이지 참조

//1 object

const obj1 = {}; //object literal 문법

const obj2 = new Object(); //object constructor 문법

function print (Person){

    console.log(Person.name);

    console.log(Person.age);

}

const yoon = {name: 'yoon', age : 25};

print(yoon);

//클래스가 없어도 괄호로 오브젝트를 생성할 수 있다

//동적으로 runtime에 결정되는 언어.

//뒤늦게 하나의 property를 추가할 수 있다.

yoon.hasJob= true;

console.log(yoon.hasJob);

delete yoon.hasJob

console.log(yoon.hasJob);

// 이건 나중에 유지보수가 힘들다.

// 중요한것은 오브젝트는 키와 value의 집합체라는 것.

//2. 계산된 프로터피

// 프로퍼티는 string 타입으로 해야한다. ['']

console.log(yoon.name);    // 키에 해당하는 값을 받아오고 싶을 떄 사용

console.log(yoon['name']); // 배열에서 받아오는 것처럼 가능  // 정확하게 어떤 키가 필요한지 모를떄 computy property를 사용한다.

yoon['hasJob'] =true;

console.log(yoon.hasJob);

function printValue(obj, key){

   

   console.log(obj[key]);

}

printValue(yoon, 'name');

// console.log(obj.key); // 오브젝트 키 라는게 없다.

//동적으로 받아올 떄 유용하다.

// 3. property value shorthand

const Person1 = {name: 'test', age: 22};

const Person2 = {name: 'test2', age: 25};

const Person3 = {name: 'test3', age: 2};

const Person4 = {name: 'test4', age: 14};

const Person5 = makePerson('tset5',30);

console.log(Person5);

function makePerson(name,age){

    return{

    name,  // name:name, // 키와 value의 이름이 동일하다면 생략할 수 있다.

    age,  //age:age, //

    };

}

//makePerson 같은 경우 class와 같은 개념 ->es6전에 많이 사용함.

//순수하게 object를 생성하는 함수의 경우 앞에 대문자로 시작하게 만든다.

// 또한 클래스에서 constuctor에서 했던것처럼 한다.

//즉 아래와 같다.

//바로 이것은 4. constructor Function

function Person(name,age){

    // this = {} 생략

    this.name=name;

    this.age=age;

    //return this;

}

// 5 in operator

// 키가 있는지 없는지 확인할 수 있다. -> true와 false 리턴

console.log('name' in yoon); // t

console.log('age' in yoon);

console.log('test' in yoon);

console.log(yoon.test);

// 6 for..in vs for..of

// for (key in obj)

for(key in yoon){

    console.log(key);

}

//yoon 이 가지고 있는 키들이 block 을 돌대마다 key라는 지역변수에 할당이 된다.

//for (value of iterabl)

// 배열 리스트

const array =[1,2,3,4,5];

for(let i = 0 ; i < array.length;i++){

    console.log(array[i]);

}

// 같은 의미

for(value of array){

    console.log(value);

}

//7 Fun cloning

const user = {name : 'yoon', age : 22};

const user2 = user;

user2.name= 'corder'

console.log(user.name);

// 약간 포인터의 느낌.

// 예전에

const user3={};

for (key in user){

    user3[key] = user[key];

}

// user 안에 있는 key 를 빙글빙글 돌면서. (1번째 키 name 2번째 키 age)

// user 3의 새로운 property를 추가하는데 값은 name

console.log(user3)

// Object.assign() mdn

//assign<T, U>(target: T, source: U): T & U;

//복사하고자 하는 targer 과 소스를 파라미터로 한다.

const user4={};

Object.assign(user4,user);

console.log(user4);

user.name = 'yoon'

const user5 = Object.assign({},user); // 같은 뜻

console.log(user5);

//여러개의 소스를 전달 할 수도 있따.

const fruit1 = {color:'red'};

const fruit2 = {color:'blue', size : 'big'};

const mixed = Object.assign({},fruit1,fruit2);

console.log(mixed.color);

console.log(mixed.size);

// 마지막에 합쳐진 것 출력.

콘솔 화면