<javascript>객체 (비구조화 할당, 함수)

객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다.

 

  

const dogName = '멍멍이';
const dogAge = '7';

console.log(dogName);
console.log(dogAge);

 

이런식으로 한 대상에 관해 여러가지 값들을 선언 해 줄때 한번에 선언을 해 줄수 있는데 중괄호로 감싼 뒤에 

'키 값: 원하는 값' 형식으로 정의해주면 된다.

 

const dog = {
    name : '멍멍이',
    age : '5',
    family : {
        parent : '2',
        child : '1',
    }
}

console.log(dog);

 

이런식으로 중괄호를 이용해서 객체를 선언해줄 수 있으면 객체 안에 또 다른 객체를 생성해 줄 수가 있겠다.

 

간단하게 함수 하나를 만들어 결과값을 확인해보자 

 

const sanghoon = {
    age : 25,
    firstName : 'Jeong',
    name : 'sanghoon',
    gender : 'male'
} 

const sungjin = {
    age : 25,
    firstName : 'Lee',
    name : 'sungjin',
    gender : 'female'
}

function introduce(person){
    console.log(`${person.name}의 성은 ${person.firstName} 이고 성은 ${person.gender} 이며 나이는 ${person.age} 이다`)
}

introduce(sanghoon);

 

 

이런식으로 함수에 객체를 인자값으로 넘겨주고 객체안의 속성들을 뽑아서 써줄수 있겠다. 

 

 

다음은 비구조화 할당 (뽀개기) 에 대해 알아보겠다.

 

비구조화 할당은 객체에서 특정 값들을 뽑아내는 것이다. 즉 뽑아내서 객체를 타고 들어가서 키 값을 적어주는 것이 아니라 변수처럼 간단하게 사용을 할 수가 있다.

 

function introduce(person){
    const {name,firstName,age,gender} = person;
    console.log(`${name}의 성은 ${firstName} 이고 성은 ${gender} 이며 나이는 ${age} 이다`)
}

function introduce2( {name,firstName,age,gender}){
    console.log(`${name}의 성은 ${firstName} 이고 성은 ${gender} 이며 나이는 ${age} 이다`)
}

introduce(sanghoon);
introduce2(sungjin);

 

위의 코드를 보면 비구조화 할당을 해줄 때 파라미터에서 바로 처리하는 방법과 객체를 전달 받고 함수내에서 뽑아주는 방식 2 가지가 있는데 두가지 방식중 원하는 것으로 사용해주면 되겠다.

물론 무조건 함수내에서만 비구조화 할당이 가능한것이 아니라 객체가 선언되어 있으면 언제든지 뽑아서 쓸 수가 있다.

 

그 다음으로는 객체안에 함수를 선언하는 것인데 여기서 주의할 점은 'this' 다. 'this'는 function() 방식으로 선언 해주었을 때에는 함수가 속해있는 객체를 가리켜서 잘 작동하지만 애로우 함수 즉 화살표 함수내부에서의 this 는 자기가 속한 객체를 가리키지 않기 때문에 에러가 발생한다. 코드를 보면서 차이점을 알아보자

 

const sanghoon = {
    age : 25,
    firstName : 'Jeong',
    name : 'sanghoon',
    gender : 'male',
    say : function(){
        console.log(this.name);
    }
} 

sanghoon.say();
const sungjin = {
    age : 25,
    firstName : 'Lee',
    name : 'sungjin',
    gender : 'female',
    say: () => {
        console.log(this.name);
    }
}
    sungjin.say();

 

이런식으로 화살표 함수에서는 this 가 자기가 속한 객체를 지칭하지 않는것을 볼 수 있다.

 

간단하게 기본 객체의 기본 개념들에 대해서 알아보았당!!