[JavaScript] 참조형 - Object (객체 데이터)

Object

객체 데이터

 

 

Object 라는 함수를 호출해서 user 라는 객체 데이터를 만들었다. user 부분에는 name 이라는 속성에다가 'sangah' 라는 문자 데이터를 할당할 수 있겠고 그 다음에 user 라는 객체 데이터에 age 라는 속성에는 31 이라는 숫자 데이터를 할당할 수 있다. 이렇게 만들어진 user 라는 객체 데이터를 출력해보면, 콘솔창에 name과 age라는 속성을 가지고 있는 객체 데이터가 출력이 됐다. 중간에 : (콜론) 이라는 기호를 통해서 구분이 되어져있는 구조를 Key Value 형태라고 이야기 한다. 그래서 중간에 콜론 기호를 왼쪽은 Key고, 오른쪽은 Value 이다.

 

 

이 객체 (Object) 데이터는 이렇게 Key Value 형태로 만들어진다. Key : 속성 (Property) / Value : 값 이라고 표현한다. 객체 데이터에서 Key 라는 단어, 속성 이라는 단어, Property (프로퍼티) 라는 단어를 보면 다 같은 개념으로 이해하면 된다. 그랬을 때, console에 출력된 데이터를 자세하게 보면 중괄호 {} 로 묶여있다. 기존에는 중괄호 라는 기호를 사용해서 객체 데이터를 만들었는데 기호를 통해서 데이터를 만드는 방식이니까 이것 또한 리터럴 방식이다. 이것을 객체 리터럴 방식으로 데이터를 생성했다고 얘기할 수 있다.

 

 

우리가 코드 상에서 작성한 부분은 리터럴 방식이 아니다. 왜냐하면 객체 데이터 user를 new라는 키워드를 사용하는 Object 함수를 호출해서 만들었기 때문이다. 그래서 이것은 리터럴 방식으로 객체 데이터가 만들어진 것이 아니고, 생성자 함수 방식으로 객체 데이터가 만들어진 개념이다.

 

 

생성자 함수를 통해서 객체 데이터를 만들수도 있는데 같은 객체 데이터를 또 다른 방식으로 만들어보자. function 키워드로 함수를 만들고, User 라는 이름을 부여한다. 그리고 this 라는 키워드를 서 점표기법으로 name 이라는 속성을 만들고, 동일하게 'sangah' 라는 문자 데이터를 할당해주고, 그 다음에 this 라는 키워드에 age 라는 속성에는 31이라는 숫자를 부여한다. 이런식으로 this 라는 키워드를 내부에서 사용하는 User 함수를 만들었다. 그리고 그 함수의 이름 첫 글자는 대문자고, 이렇게 만들어진 User 라는 함수를 new 라는 키워드와 함께 호출을 한다. new User( ) 그렇다면 이것은 생성자 함수 이다.

 

 

그러면 이렇게 만들어진 생성자 함수를 소문자 user 라는 변수에다가 할당하고, 이것을 console.log(user) 콘솔창에 출력해보자. 그러면 아까와 동일하게 name, age 라는 속성을 가지고 있는 객체 데이터가 만들어졌다. 차이점이 있다면, 객체 데이터 앞 쪽에 User 라는 함수에서 만들어졌다는 표시가 보인다. 이 부분을 제외하면 사실상 같은 객체 데이터 구조이고, 역시 Key, Value 형태로 되어져 있다.

 

 

이렇게 new Object를 통해서 객체 데이터를 만들 수 있는 방법도 있고, 혹은 함수 내부에서 this 라는 키워드를 통해서 각각의 속성 값을 추가하는 방식으로 객체 데이터를 만들 수도 있다. 그래서 기존에 두 가지 방식을 사용할 수 있는데, 이러한 방식보다는 기호를 사용해서 만드는 객체 데이터가 훨씬 단순하다. 이번에는 중괄호 { } 기호를 사용하는 리터럴 방식으로 객체 데이터를 만들어보자. 세 번째 방식으로 객체 데이터를 만들어본다.

 

 

바로 const 라는 키워드와 함께 user 라는 변수를 만들고, 중괄호 { } 기호로 객체 데이터를 만든다. 이렇게 기호를 통해서 데이터를 만드는 방식을 리터럴 방식이라고 부른다. 그리고 그 내부로 들어가서 name 이라는 속성에 문자, age 라는 속성에 숫자를 부여하고, 밑에 console.log(user) 출력해보면 역시 마찬가지로 동일하게 객체 데이터가 출력된 것을 볼 수 있다. 대부분의 경우에는 리터럴 방식으로 객체 데이터를 생성하면 된다. 기존 방법도 존재하긴 하지만, 사용성은 많이 떨어지는 편이고, 대부분은 이렇게 중괄호 기호를 사용해서 객체 데이터를 만들면 된다.

 

 

만약에 user 라는 데이터에서 name 이라는 속성이 가지고 있는 'sangah' 라는 문자 데이터만 필요하다면 user 라는 객체 데이터 뒤에다가 마침표 . 를 찍고, console.log(user.name) user 라는 객체 데이터 안에 들어있는 name 이라는 속성을 조회합니다. 그리고 저장하면 'sangah' 라는 문자 데이터가 출력된다. 그래서 이렇게 마침표를 사용해서 객체 데이터에 속성을 조회하는 방법을 '점표기법' 이라고 이야기 합니다.

 

 

혹은, 이렇게 console.log(user['name']) 를 통해서 user 라는 객체 데이터에 대괄호 [ ] 를 사용해서 속성을 조회할 수도 있는데, 대괄호 안에다 문자 데이터 형태로 조회할 속성의 이름을 작성하면 된다. 그리고 저장하면 동일하게  'sangah' 라는 문자 데이터가 출력이 된다.  이 방식은 '대괄호 표기법' 이라고 한다.

 

[JavaScript] 참조형 - Array (배열 데이터)

 

직전에 배열 데이터에서는 대괄호 표기법을 통해서 인덱스 번호를 입력해 줬었는데, 그것을 인덱싱이라고 불렀고. 객체 데이터에서는 name과 age 라는 속성의 이름, Key 부분을 대괄호 표기법의 문자 데이터로 넣어주면 그것을 통해서 해당하는 속성의 값을 조회할 수 있다. 객체 데이터를 사용할 때 점 표기법 뿐만 아니라, 대괄호 표기법도 많이 사용이 되니까 잘 기억을 해두어야 한다.

 

 

간단하게 예시를 보면, key 라는 변수를 만들어서 'age' 라는 문자 데이터를 넣고, key 라는 변수를 'age' 라는 문자 대신에 console.log(user[key]) 이렇게 넣을 수가 있다. 그러면 동일하게 31 이라는 숫자가 출력이 되고, key 라는 변수에 데이터를 문자 데이터 'name' 으로 바꾸게 되면, 이번에는 'sangah' 라는 문자 데이터가 출력이 된다. 그래서 객체 데이터에서 대괄호 표기법은 이렇게 key 라는 이름의 변수로 속성을 인덱싱해서 사용할 때 유용하게 사용할 수 있다.

 

반면에, 점표기법 같은 경우에는 작성하는 것은 대괄호 표기법보다 좀 더 단순하긴 하지만 age 라는 부분에 속성을 조회하는 부분에 변수를 채워넣을 수가 없다. 그래서 서로 장단점이 있는 방식이라고 이해했다. 보통의 경우에는 점표기법을 사용하다가 데이터로 속성의 이름을 조회할 때는 대괄호 표기법을 쓰면 된다. 이런 상황은 뒤에서도 있을거니까 간단하게 기억을 해두자.

 

 

console.log(user) user 라는 객체 데이터를 출력해보자. user 라는 객체 데이터가 만들어 질 때, name 이라는 속성이 먼저 만들어지고, 그 다음에 age가 만들어졌다. 그런데 콘솔에 출력된 결과를 보면 age 라는 속성이 먼저 보인다. 그랬을 때, 이 객체 데이터 안에 들어있는 각각의 속성들의 이름은 고유하다. 그래서 순서라는 개념이 존재하지 않는다. 결과적으로 객체 데이터 내부에서 name을 먼저 만들었다고 해서 name이 먼저 확인되는 것은 아무런 의미가 없다.

 

 

속성의 이름은 고유하기 때문에, 만약에 age 라는 속성을 1개 더 만들어서 나이를 21살로 더 만들었다면 나중에 만든 age가 더 우선하기 때문에 저장하고나면, age 라는 속성은 31 이라는 값을 볼 수가 없고, 21 이라는 값으로 덮어써져있는 것을 확인 할 수 있다. => 객체 데이터에서 속성의 이름, 또 다른 말로 Key는 고유하다. 그리고 각각의 Key는 순서가 따로 존재하지 않는다. 그래서 이렇게 같은 속성의 이름을 사용하는 것을 주의하면 되겠다.

 

---

 

 

이번에는 조금 더 복잡한 구조를 만들어보자. 기존에 작성했던 user 라는 변수의 이름을 userA로 바꾸고, 밑에다 const 키워드로 userB로 만들어서 동일한 구조로 name과 age를 추가를 한다. 2개의 user 객체를 만들었다. userB 부분에 parent 라는 속성을 만들어서 userA라는 객체를 할당한다. 그러면 이렇게 만들어진 userB라는 객체를 밑에서 console로 출력해서 확인해보자. parent 라는 속성은 userA라는 객체 데이터이다. parent를 열어보면, userA가 가지고 있는 name과 age라는 속성과 값이 잘 출력이 되고 있다.

 

 

그랬을 때, userB에서 parent 라는 속성을 점 표기법으로 조회하게 되면, userA부분의 객체 데이터만 확인이 되고, parent도 하나의 객체 데이터이기 때문에 뒤에 이어서 점표기법을 그대로 쓸 수가 있겠고, 다시 name 이라는 속성을 입력하게 되면 이렇게 'sangah' 라는 문자 데이터가 출력이 된다. 그래서 점표기법은 객체 데이터에서 계속해서 사용할 수가 있다. 결국 userB에서 parent 라는 객체 데이터를 조회하고, parent라는 객체 데이터는 userA라는 객체니까 거기서 name이라는 속성을 또 조회하게 되면 결과적으로 'sangah' 라는 문자 데이터가 출력이 된다는 것이다.

 

=> 이런 식으로 자바스크립트의 데이터를 다룰 때는 객체 데이터 안에 객체 데이터가 또 들어있기도 하고, 이것이 한 depth 가 아니고, 객체 데이터 안에 객체 데이터 안에 객체 데이터 안에 여러 depth로 들어있을 수도 있다. 이러한 구조를 어느정도는 머릿속에서 그릴 수 있어야 이러한 객체 데이터를 잘 활용할 수 있겠다.

 

 

그리고 점 표기법을 사용하는 방법 뿐만 아니라, 대괄호 표기법도 한 번 써보자. console.log(userB['parent']) 콘솔창에 두 번째 로그는 이렇게 userA의 객체 데이터가 표시가 되고, 어디까지나 이 부분은 객체 데이터 이니까 뒤에 이어서 점표기법userB['parent'].name 을 사용하게 되면, 'sangah'가 그대로 출력이 되고, 점 표기법은 언제든지 대괄호 표기법으로 바꿀 수 있기 때문에 점 표기법 대신에 역시 대괄호를 작성하고 여기다 userB['parent'] ['name'] 이라는 속성의 이름을 문자 데이터로 명시해주게 되면 동일하게 'sangah' 라는 문자 데이터를 출력할 수 있다.

 

 

그래서 이렇게 이런 방식으로 응용할 수도 있겠고, 마찬가지로 문법에도 익숙해져야 하겠다. 그리고 이번에는 밑에다 const 키워드로 users 라는 복수 형태로 변수를 만들어서 이번에는 배열 데이터를 추가해보자. 첫 번째 배열의 아이템은 userA 라는 객체 데이터, 두 번째는 userB 라는 객체 데이터다. 이렇게 만들어진 users 라는 이름의 배열 데이터를 콘솔창에 출력해보자. users 에서 만약에 첫 번째 배열 아이템, userA 라는 객체 데이터를 조회해보자. users[0] userA의 인덱스 번호를 대괄호 표기법으로 명시를 해준다. 숫자 0을 입력해서 인덱싱 해보자. users의 0번째 아이템은 userA 라는 객체 데이터 이고, userA의 객체 데이터에서 name 이라는 속성을 또 조회해보고자 한다면 점 표기법을 통해 users[0].name 이렇게 name 속성을 조회할 수 있는 것이다. 역시 마찬가지로 점 표기법 대신에 대괄호 표기법을 붙여서 사용할 수도 있다. 그래서 user[0] ['name'] 이라고 작성하면 역시 마찬가지로 동일하게 'sangah' 문자 데이터를 확인할 수 있다.

 

=> 자바스크립트는 이렇게 여러 데이터가 섞여서 만들어지는데, 그래서 우리가 자바스크립트 데이터에 대해서 숙달이 되어야 코드를 읽으면서 머릿 속에 그 데이터가 그려질 수 있다. 물론 앞으로도 계속 이렇게 배운 데이터들을 활용할거니까 어느 정도는 자연스럽게 익숙해질 수 있겠다.