천천히, 꾸준히, 어제보다 나은 현재의 나를 만들자

2 minute read

객체

  • 여러 종류의 값을 넣을 수 있게 해줌
const 혹은 let 객체명={
	이름(key):값(value);
};
  • 객체 안에는 배열, 다양한 자료형, 함수, 객체를 넣을 수 있음!
/*객체 안에 함수 넣기*/
const 혹은 let 객체명={
	key : function(){},
	key : function 함수명(){},
  함수명(){}
};

(예시)

const item = {
    pName:['홍길동','김길동'],
    pNo : 1,
    anotherObj:{
        no: 1,
        tel:'010-1234-5678'
    },
    check: function(){
        return this.pNo;
    },
    checkTwo(){
        console.log(this.pNo);
    }
};
const val = item.check**();**
console.log(val);

위의 예시처럼 함수도 객체의 일원이 될 수 있다!

이때 val을 콘솔에 출력해보면, 1이 출력된다!

⚠️ this는 객체 자기 자신을 의미!! 그런데 화살표 함수에서는 this로 자기자신이 무엇인지 인지가 잘 안됨!!(그 이유는 화살표 함수는 자기가 속한 곳으로 연결을 하지 않기 때문!)

const item = {
    pName:['홍길동','김길동'],
    pNo : 1,
    anotherObj:{
        no: 1,
        tel:'010-1234-5678'
    },
    check: function(){
        return this.pNo;
    },
    checkTwo(){
        console.log(this.pNo);
    },
    checkThree: ()=>{
        console.log(this.pNo);
    }
};

item.checkThree();//undefined

⚠️ 뿐만 아니라, 객체 외부에서 함수를 복사하여 변수나 상수에 넣게 되면 this의 의미가 소실되어 인지할 수 없고, 이로 인해 undefined로 인지된다!

const item = {
    pName:['홍길동','김길동'],
    pNo : 1,
    anotherObj:{
        no: 1,
        tel:'010-1234-5678'
    },
    check: function(){
        return this.pNo;
    },
    checkTwo(){
        console.log(this.pNo);
    },
    checkThree: ()=>{
        console.log(this.pNo);
    }
};

const item2 = {
    pName:['정길동','길동'],
    pNo : 2
};
item2.check=item.check;
console.log(item.check());//1
console.log(item2.check());//2

const itemAnother=item2.check;
console.log(itemAnother());//undefined
  • 객체.이름으로 해당 멤버를 확인해볼 수 있음!

  • key 명칭에는 공백이 있으면 안됨!(예: “123 “ ❌)

  • 함수의 파라미터에도 객체를 받아서 사용이 가능하다!
const ironMan={
    name:'토니 스타크',
    actor:'로버트 다우니 주니어',
    alias:'아이언맨'
};

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

print(ironMan);

객체- 비구조화 할당[객체 구조 분해]

ES6에서 생긴 문법!

  • 특정 객체에서 필드를 빼내온다는 개념!
    1. 객체.필드명이 아닌 필드명으로 간단히 접근할 수 있도록 하는 방법

가.

const or let {필드명}= 객체명; 으로 객체를 담은 상수 혹은 변수를 저장해둔다!

위에서 ironMan 객체를 참고로 진행하겠다!

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

print(ironMan);

그럴 때, const {필드명}=객체명; 으로 전달하게 되면

더이상 hero.alias가 아닌 alias와 같이 접근할 수 있게 된다!

나.

함수의 매개변수에 필드명을 넣어준다! ▶️ function({필드명1, 필드명2,…})

function print({alias,name,actor}){
    const text=
        `${alias}의 ${name} 역할을
        맡은 배우는 ${actor}`;
    console.log(text);
}

이렇게 적용해도 위에서처럼, 객체.필드명으로 접근하지 않아도 된다!

함수가 아니더라도, 아래처럼

const {name}=ironMan;
console.log(name);//토니 스타크

사용해주어도 객체.필드로 접근하지 않아도 충분히 편리하게 사용 가능하다!

Getter와 Setter 함수

  • 특정 값을 바꾸거나, 반환받을 때 사용할 수 있는 함수
    1. getter 함수
  • 특정 값을 반환받도록 해주는 객체 내부의 함수
객체 내부에 
get getter메서드명(){
	~
	return ~;//return을 해주기 때문에 getter 메서드 결과를 저장해두었다가
//사용하는 등이 가능하고! 그렇기 때문에 필드명으로 접근하지 않아도
//사용할 수 있음!
}

로 정의해주고

사용할 때에는, 

객체명.getter메서드명 으로 () 없이 사용!

const numbers={
    a : 1,
    b : 2,
    get sum(){
        console.log(`sum 함수가 실행됩니다!`);
        return this.a+this.b;
    }
};

console.log(numbers.sum);//sum 함수가 실행됩니다! 3
  1. setter 함수
  • 객체 내부의 필드값을 변경해주는 함수
객체 내부에
set setter메서드명(파라미터){
	~
}

단, setter 메서드명과 필드명이 겹치지 않으려면 _를 필드명에 붙여주는
것을 권장!

외부에서 접근할 때에는 getter 와 비슷하게

()없이

객체명.setter메서드명=값; 로 사용 가능!

const numbers={
    _a : 1,
    _b : 2,
    set a(value){
        this._a=value;
    },
    set b(value){
        this._b=value;
    },
    get sum(){
        console.log(`sum 함수가 실행됩니다!`);
        return this._a+this._b;
    }
    
};
console.log(numbers._a);//1
numbers.a=3;
console.log(numbers._a);//3
console.log(numbers.sum);//sum 함수가 실행됩니다! 5

Updated:

You May Also Enjoy