[JavaScript]객체(Object)

2021. 4. 20. 10:11JavaScript/Basic

let obj = {
    name : [ 'java', 'ruby' ],
    age : 20,
    country : [ 'USA', 'Korea' ],
    introduce : function(){
        return console.log( this.name[0] + '는 ' + this.age + '살 이고 ' + this.country[0] + '에 살아' );
    }
}


obj.introduce();

 

객체는 정보를 담을수 있는 공간이라고 생각하면 이해가 편합니다

함수나 배열처럼 직관적이게 바로바로 할수있다기 보다는 이게 이해가 빠를거 같습니다
회사에 속해있는 팀이라고 생각하면 이해하기 쉬울거 같습니다

보통 우리가 일을 하기 위해서 회사에 가면 기획자,디자이너,개발자가 있을것입니다
각자 하는 일이 다르걸 알수있습니다
그렇기 때문에 그 기획자들과 디자이너들과 개발자들을 따로따로 모아주는게 객체입니다

이 객체들을 모아서 다루는게 또 class인데 이는 class를 자세히 다룬 글이 있으니 그 글을 참고하기 바랍니다

우선 위 예제를 먼저 살펴보겠습니다

위 예제에서는 변수 obj를 객체 리터럴로 생성되어 있는것을 볼수있습니다
여기서 객체 리터럴이란 자바스크립트 내에서 객체구조로 생성 할수있는 구조를 의미합니다
즉 객체의 대표적인 구조는 key : value 인 구조를 의미합니다

간단하게 배열과 함수 리터럴도 짚고 넘어가자면 배열은 인덱스구조를 함수는 매개변수와 인자를 가진 구조를 각각 배열 리터럴, 함수 리터럴이라고 말합니다

다시 본론으로 obj 안에는 name, age, country, introduce란 key값이 존재합니다
그 중에서도 name과 country의 value값은 배열로 할당 되어있는것을 볼수있습니다
즉, 호출할때는 인덱스로 불러와야 한다는것을 알수있습니다

 

introduce : function(){
        return console.log( this.name[0] + '는 ' + this.age + '살 이고 ' + this.country[0] + '에 살아' );
    }

 

introduce에서 보면 return 해줄 일을 먼저 살펴보면 좋을거 같습니다
introduce가 할일은 obj가 가지고있는 데이터를 빠르게 다 가지고 오는것을 해야합니다
여러번 해야할 일을 한번에 끝내야 하는것이죠

먼저 this가 무엇인지 알아봐야겠죠
객체에서 this는 객체를 만들어준 자신을 의미합니다
즉, let obj가 this라고 할수있습니다
그러면 obj.name[0]는 'java'인것을 알수있고 뒤에 있는 age, country 모두 같은 맥락입니다

그러면 밖에서 obj.introduce()를 호출하면 어떤 결과가 나올까요?

 

java는 20살 이고 USA에 살아

 

라는 결과가 나오는것을 볼수있습니다

객체를 하는 이유는 원래라면 변수로 name = 'java , age = 20 , country = 'USA' 라고 각각 할당해주고 그걸 console.log( name + '는 ' + age + '살 이고 ' + country + '에 살아' );
라고 해야했다
또 객체의 장점중 하나는 안에 정보를 수정 할수 있다는것이다

 

let obj = {
    name : [ 'java', 'ruby' ],
    age : 20,
    country : [ 'USA', 'Korea' ],
    introduce : function(){
        return console.log( this.name[0] + '는 ' + this.age + '살 이고 ' + this.country[0] + '에 살아' );
    }
}


obj.name.push('python');

console.log(obj.name);

 

이렇게 push()라는 메소드를 이용하게 되면 name이라는 key에 value값으로 'python'이 추가되었다

console.log로 나온 값을 보면

 

[ 'java', 'ruby', 'python' ]

 

이렇게 나온것을 볼수있다

벌써 데이터를 줄이는 일에 엄청나게 많은 일을 한것을 볼수있다

왜 객체를 사용하는지 이제 이해가 좀 되는거 같다

앞으로는 class도 더 심도있게 공부해서 더 좋은 결과물을 만드는데 노력해야겠다

 

'JavaScript > Basic' 카테고리의 다른 글

[JavaScript]class + canvas(1)(code)  (0) 2021.04.22
[JavaScript]클래스(class) 문법  (0) 2021.04.22
[JavaScript]함수(Function)문법  (0) 2021.04.02
[JavaScript]변수 var,let,const  (0) 2021.04.02