[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 6회차 미션 - 26강 객체, 배열

객체

객체는 어떠한 값을 선언하게 될때 하나의 이름에 여러종류의 값을 넣을 수 있게 해준다.

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

이것을 객체로 바꾼다면?

//객체 선언
const dog = {
    name: '멍멍이', //key:값, 쉼표 까먹지 말것.
    age: 2,
    personality: {
        lovely: 100,
        cute: 50
    }
}
//객체의 값 호출
console.log(dog);
console.log(dog.name);
console.log(dog.age);
console.log(dog.personality.cute);

어벤져스의 히어로들을 객체로 만들어보자.

const ironMan = {
    name: '토니 스타크',
    actor: '로버트 다우니 주니어',
    alias: '아이언맨',
};
const captinAmerica = {
    name: '스티브 로저스',
    actor: '크리스 에반스',
    alias: '캡틴아메리카',
};

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

이렇게 객체를 불러서 쓸 수 있다.

객체 비구조화 할당(객체 구조 분해)

객체 비구조화 할당은 ES6부터 쓸 수 있는 방식이다.
기존의 function안의 파라미터값에 점을 찍어서 불러왔던 방식을 좀더 간편하게 개선했다.
위에 function print를 객체 비구조화 할당으로 만들어보자.

function print(hero){
    const { alias, name, actor } = hero; //변수로 한꺼번에 객체 키값이 파라미터임을 명시
    const text = `${alias}(${name})의 역할을 맡은 배우는 ${actor}입니다.`;
    console.log(text);
} 

이걸 더 간단하게 아래와 같이 비구조화할당할 수 있다.

function print({ alias, name, actor }){ //파라미터 자리 자체에서 객체의 키를 명시
    const text = `${alias}(${name})의 역할을 맡은 배우는 ${actor}입니다.`;
    console.log(text);
} 

사실 안그래도 파라미터값 이름 작명하는데도 어려움이 많고 귀찮기도 했었는데 이런식으로 객체 비구조화 할당을 하게 되면 코드도 간편해지고 작명에 대한 스트레스도 줄이고 알아보기도 쉬워서 넘 좋다!
노마드코더에서는 저렇게 쓰는 이유에 대해서 설명해주지 않고 그냥 따라하다가 여기에서 저렇게 된 이유를 단계별로 차근차근 보여주니 이해도 쉽고 좋다. 이 객체 비구조화 할당은 꼭 함수안에서만 쓰이는 건 아니다.

const { name } = ironMan;
console.log(name);

이런식으로 어디서든 쓸 수 있다는 걸 꼭 알아두자!

객체안에 함수 넣기

이런식으로 객체 안에 함수도 넣어줄 수 있다.

const dog = {
    name: '멍멍이',
    sound: '멍멍!',
    say: function say(){
        console.log(this.sound); //this는 dog를 의미
    }
};
dog.say();

함수 부분은 아래와 같이 이름을 생략해서 써도 괜찮다.

const dog = {
    name: '멍멍이',
    sound: '멍멍!',
    say: function(){ //함수의 이름을 생략.
        console.log(this.sound); //this는 dog를 의미(자기가 속해있는 곳을 지칭)
    }
};
dog.say();

더 나아가 아래처럼 키값 자체를 함수명으로 써줘도 작동한다.

const dog = {
    name: '멍멍이',
    sound: '멍멍!',
    say(){ //키값 위치에 함수 생성 가능.
        console.log(this.sound); 
    }
};
dog.say();

단 객체 안에서의 화살표함수는 this가 뭔지 모른다는 것. 객체안에서는 화살표 함수를 쓰지 않도록 한다.

const dog = {
    name: '멍멍이',
    sound: '멍멍!',
    say: function(){ //함수의 이름을 생략.
        console.log(this.sound); 
    }
};
const cat = {
    name: '야옹이',
    sound: '야옹~',
}
cat.say = dog.say; //둘을 연결하면 cat안에 say가 없다고 하더라도 실행가능하다.
cat.say();

이렇게 객체끼리 연결해서 다른 객체안에 있는 함수를 가져다 쓸 수도 있다. this는 연결만 되어있으면 자기가 속한 곳의 키와 값을 불러오는 영리한 친구다.

Getter 와 Setter

객체 안에서 어떤 값을 조회할때마다 호출 하는 함수 getter
객체 안에서 새로운 값이 설정될때마다 실행하는 함수 setter

const numbers = {
    _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();
    }
};
console.log(numbers.sum);
numbers.a = 5;
numbers.b = 7;
numbers.a = 9;
console.log(numbers.sum);

어떨때 사용하는지는 알것 같다. 값이 변할때만 함수를 호출해서 쓰면 절약적이고 효율적이게 쓸 수 있으니까 이렇게 쓰는 것 같다.

배열

배열안에는 여러가지 종류의 값을 넣을 수 있다.

const array = [1,2,3,{},'안녕']; //숫자, 객체, 문자 등 담을 수 있음.
console.log(array) //배열 전체 조회
console.log(array[0]); //배열의 n번째 조회

배열을 조회하는 방법은 위와 같다.

const objects = [
    {name: '멍멍이'},
    {name: '야옹이'}
];
console.log(objects);
console.log(objects[0]);
console.log(objects[1]);

위와 같이 배열 안에 객체를 넣을 수 있다.

objects.push({ //배열에 추가하기 push
    name: '멍뭉이'
});
console.log(objects);
console.log(objects.length); //배열의 갯수 세기 length

배열 안에 새로운 열을 추가하려면 push를 사용한다.
그리고 배열안에 들어있는 값의 갯수를 알고 싶으면 length를 사용한다.

const array = [1, true, {a: 1},[1, 2, 3, 4]];
array.push('안녕');
console.log(array);
console.log(array.length);

마치면서

오늘은 여기까지, 수강 모습은 아래에.. 시청 영상 26강 13~17까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp