자바스크립트 JS 공부 #2 객체, 비구조할당, getset

객체

const dogname ='멍멍이';
const dogAge = 2;

const dog = {
    //key(공백안됨, '쓰면 되긴함): value
    //이름:값  
    name: '멍멍이',
    age: 2,
    cute: true 
}

console.log(dog);
console.log(dog.name);
console.log(dog.age);

객체 선언 방법
const dog = {
//key(공백안됨, ''쓰면 되긴함): value
//이름:값 }

비구조할당(객체 구조분해) -es6 문법

const ironman = {
    name : '토니스타크',
    actor : '로버트 다우니 주니어',
    alias : '아이언맨'
}

const capAme = {
    name : '스티븐 로저스',
    actor : '크리스 에반스',
    alias : '캡틴 아메리카'
}

function print(hero){
    const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${hero.actor}입니다`;

    const { alias, name, actor} = hero; // 비구조할당
    const text2 = `${alias}(${name}) 역할을 맡은 배우는 ${actor}입니다`;
    console.log(text);
    console.log(text2);
}

function print({ alias, name, actor}){ //더깔끔한 비구조할당
    const text2 = `${alias}(${name}) 역할을 맡은 배우는 ${actor}입니다`;
    console.log(text);
    console.log(text2);
}

print(ironman);
print(capAme);

함수의 인자로 객체의 키값을 들고오면 ex) function print({ alias, name, actor}){
객체.키 스타일이아닌 그냥 키 이름으로만 함수내부에서 사용가능하다 !

const { name } = ironman; //함수 밖에서도 비구조할당 가능
console.log( name );

• 위에 처럼 함수 밖에서도 사용 가능 !
  
  
  

this 사용하기

const dogg = {
   name: '멍멍이',
   sound: '멍멍!',
   // say: function (){
   say(){
       console.log(this.sound); //this는 본인을 의미
   } //함수도 객체의 멤버로 선언 가능 but 화살표 함수는 오류 난다
};

dogg.say();

const cat = {
   name: '나옹이',
   sound : '나옹~'
};

cat.say = dogg.say; //dogg안에 있는 say함수를 가져옴
dogg.say(); 

cat.say(); //야옹이 안옴 !

//const catSay = cat.say; //따로 상수에 담아버리면 this와의 관계가 사라져 오류발생!
catSay();

• 함수도 객체의 멤버로 선언 가능 but 화살표 함수는 오류 난다

함수안에서 this는 본인을 의미
해당함수를 따로 상수에 담아버리면 this와의 관계가 사라져 오류발생!

객체 안의 get set 함수

const numbers = {
    a:1,
    b:2,
    get sum (){
        console.log('sum함수가 실행됩니다!')
        return this.a + this.b; //특정값을 조회하려고 할때 사용 - 무조건 리턴값이 있어야함!
    }
};

console.log(numbers.sum); //3
numbers.b = 5;
console.log(numbers.sum); //6

get 함수
특정값을 조회하려고 할때 사용 - 무조건 리턴값이 있어야함!

const puppy = {
    _name : '멍멍이',

    get sum (){
        console.log('_name을 조회합니다..');
        return this._name;
    },
    set name(value){ //파라미터가 필수! - 값을 정할떄 사용
        console.log('이름이 바뀝니다..' + value);
        this._name = value;
    }
};

console.log(puppy.name);
puppy.name = '뭉뭉이';
console.log(puppy._name);
console.log(puppy.name); //둘다 같이 사용가능 

set 함수
값을 정할 때 사용 - 파라미터가 필수 !

const nums ={
    _a:1,
    _b:2,
    sum:3,
    calculate(){
        console.log('calculate');
        this.sum = this._a + this._b;
    },
    get a(){
        return this._a;
    },
    get b(){
        return this._b;
    },

    set a(value){
       this._a = value;
       this.calculate();
    },
    set b(value){
       this._b = value;
       this.calculate();
    },
//  위에 4개 없고 _a,b 말고 그냥 a,b로 선언하고 get sum함수만 있다면
    get sum(){
        console.log('sum');
        return this.a + this.b;
    } 
}

console.log(nums.sum);
nums.a = 5;
nums.b = 7; 
nums.a = 9; //이렇게할때마다 썸값이 바뀜(카큘 펑션을 돌리기떄문에)
console.log(nums.sum);

console.log(nums.sum); // 마지막 sum get함수가 있다면 조회할 때마다 합을 구하고 있음 

get함수를 이용한 합 구하기

배열

const array = [1, 'bla', 3, {}, 5]; //안의 항목의 자료형은 상관없다
console.log(array);
console.log(array[0]);

const objects = [{
        name: '멍멍'
    },
    {
        name: '야옹'
    },
];

console.log(objects)
console.log(objects[0])
console.log(objects[1])

objects.push({
    name: '멍뭉'
}) //새로운 항목 추가

console.log(objects)
console.log(objects.length) //안에 몇개있는지 확인가능