1. 자바스크립트에서 객체란
1️⃣ 자바스크립트에서 객체(Object)는 데이터유형 중 하나를 나타낸다.
자바스크립트의 데이터타입은 크게 원시타입과 객체타입으로 분류할 수 있다.
객체형을 제외한 다른 자료형들은 String, Number처럼 한가지만을 표현할 수 있어서 원시타입(Primitive Type)이라고 부른다.
중요한 것은 자바스크립트는 객체기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체라는 것이다.
(원시타입에 속하는 6가지의 데이터타입을 제외하고는 모두 다 객체라고 할 수 있다.)
⚠️ 배열(Array)도 type은 객체다 ⚠️
Array라는 타입은 없다!!
배열은 객체지만 일반 객체와 구별되는 독특한 특징이 있다.
| 구분 | 객체 | 배열 |
|---|---|---|
| 구조 | 프로퍼티 키와 프로퍼티 값 | 인덱스와 요소 |
| 값의 참조 | 프로퍼티 키 | 인덱스 |
| 값의 순서 | X | O |
| length프로퍼티 | X | O |
2️⃣ 객체는 데이터컬렉션이나 복잡한 개체들을 저장할 수 있다.
( ↔️ 원시타입은 하나의 타입만을 갖는다)
서랍장을 상상하면 객체를 이해하기가 쉽다.
복잡한 서랍장 안에서 이름표를 보고 원하는 파일을 쉽게 찾을 수 있듯이, 객체에서는 키를 이용해 프로퍼티를 쉽게 찾을 수 있다.
(데이터컬렉션이나 복잡한 개체들처럼 하나안에 많은 양을 저장했기 때문에 키를 통해서 쉽게 찾을 수 있을수있어야만 한다)
Key를 통해서 값을 찾는다
나는 객체를 공부하면서 자바스크립트 객체의 key를 nameTag이라고 이해하면 좋을것같다고 생각했다.
제일 큰 객체의 이름은 따로 있지만 그 안에 들어있는 많은 양의 정보들을 구분할 수 있도록 붙여놓은 nameTag말이다.
아니면, 한권의 책이라도 그 안의 내용을 구분하기 위하여 붙여놓은 인덱스 포스트잇 같다고 생각했다.
하나의 객체를 생성할때도 어떠한 기준을 가지고 만들 것이다.
예를 들면 한국사책을 출간한다고 생각해보자. 한국사는 선사시대부터 출발하여 근현대사까지 시간의 흐름으로 구성되는데, 이렇게 많은 양을 한번의 책으로 묶기 위해서 사용하는 것이 객체이다. 이러한 방법을 통해 각기 흩어져있던 역사의 조각들을 한권의 책으로 묶었기 때문에 사람들은 '한국사'라고 적힌 표지만 보고도 그것이 한국사책이라는 것을 알 수 있을 것이다. 하지만 너무 많은 양이 있기 때문에 한번에 '선사시대'나 '조선시대'와 같은 페이지를 찾기가 힘들다. 그러한 불편을 해결하기 위해서 사람들은 책 사이사이에 이름을 적은 포스트잇을 붙인다. 여기서 바로 이 포스트잇을 객체안에 있는 key라고 생각하면 될 것이다.
아니면 각각의 단원들을 구별하는 단원명이라고 생각하면 이해하기 쉽다.
많은 양이지만 이러한 단원들을 통해서 우리는 쉽게 그 안에 무엇이 들어있는지를 파악할 수 있고, 모든 내용을 뒤져보지 않더라도 단원명을 통해서 그 페이지만을 찾아서 읽을 수 있다.
객체 ➡️ 한국사책
key ➡️ 인덱스 포스트잇 or 단원명
value ➡️ 각 시대별 역사내용
코드를 통해서 더 자세하게 보자.
user라는 객체를 만들었고 그 안에 많은 양의 데이터를 저장하였다.
user안에 7개의 프로퍼티를 만들었다. 하지만 이 값은 100개도 1000개도 될 수 있다.
이럴 때 쉽게 값을 찾게 도와주는 것이 바로 key이다.
let user = { // 객체
name: "John", // 키: "name", 값: "John"
age: 30 // 키: "age", 값: 30
nation: "America" //키: "nation", 값: America
hometown: "LA". // 키: "hometown" , 값: "LA"
eyeColor: "blue" // 키: "eyeColor" , 값: "blue"
girlFriend: "O" //키: "girlFriend" , 값: "O"
MBTI: "ENFP" // 키: "MBTI" , 값: "ENFP"
};user안의 많은 값들 가운데서 hometown정보만을 알고싶다고 가정해보자.
이때 객체의 key를 이용해서 객체의 value에 접근할 수 있다.
console.log(user.hometown) // "LA"객체안의 값들이 늘어나더라도 key를 통해서 객체의 값에 쉽게 접근할 수가 있다.
🧐 객체의 프로퍼티에 접근하는 2가지방식
① . / 마침표 표기법 (dot notation)
user.hometown
② [] / 대괄호 표기법 (bracket notaion)
user['hometown']
-대괄호표기법을 사용하는 경우, key는 반드시 따옴표로 감싼 문자열이어야 한다.
(따옴표를 하지않으면 자바스크립트엔진은 식별자로 해석한다)
userhometown
2. 객체의 구조
객체는 프로퍼티의 집합이며. 프로퍼티는 키와 값으로 이루어져있다.
이러한 객체의 구조가 같은 이점은 직관적이라는 점이다.
같은 값을 배열, 객체가 저장하는 방식을 비교해보면 이해하기 쉽다.
한 학생의 국어, 영어, 수학, 과학점수를 나타낸다고 해보자.
배열을 통해서 보면 각각의 점수를 나타낼수는 있지만 직관적으로 알기 어렵다.
이와 반대로, 객체는 key-value값을 이용함으로써 정보를 한눈에 쉽게 파악할 수가 있다.
3. 메서드: property의 값이 함수인 경우
함수는 값으로 취급할 수 있기때문에 객체의 프로퍼티 값으로 사용할 수 있다.
객체안에서 value가 함수라면 그것을 메서드라고 부른다.
함수는 보통 어떠한 값을 입력(input)을 통해, 출력(output)하는 과정을 말한다.
예를들면 a라는 값을 넣음으로써 A가 출력되고 b라는 값을 넣음으로써 B가 출력된다.
이것을 쉽게 생각해서 "어떠한 결과값을 가지고 온다"라고 이해하면 쉬울것같다.
예를 들어서 누렁이라는 객체가 있다고 하자.
누렁이의 color가 Yellow라는 것은 a를 넣어서 A가 나오는 과정은 아니다. 정해진 값을 읽어낼 뿐이다.
이러한 것들은 메서드가 아니라 프로퍼티이다.
하지만 누렁이에게 "sit"이라고 말했을때, 누렁이가 sit하는 포즈를 취하게 하는것은 어떠한 결과를 가져오는 것이다. "come"이라고 말했을때 다가오는 것도 같은 원리다. 이러한 것을 식으로 나타내면 아래와 같다.
let 누렁이 = {
color: "Yellow" // 프로퍼티
sit: function () { // 메서드
return sit
}
};
4. 객체생성방법
자바스크립트는 프로토타입 객체지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성방법을 지원한다.
- 객체리터럴
- Object 생성자함수
- 생성자함수
- Object.create 메서드
- 클래스 (ES6)
가장 일반적이고 간단한 방법은 객체리터럴을 사용하는 방법이다.
var person = {
name:'Lee'
sayHello: function () {
console.log(`Hello! My name is ${this.name}.`);
}
};
프로퍼티를 정의하지 않으면 빈 객체가 생성된다.
const obj = {}
🧐 프로퍼티의 동적생성
존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.
let 토트넘 = { 공격수1: '손흥민' }; 토트넘.공격수2 = '케인' console.log(토트넘); // {공격수1: '손흥민', 공격수2: '케인'}
5. 프로퍼티 갱신 & 삭제
존재하지 않은 프로퍼티에 값을 할당하면 프로퍼티를 동적으로 생성하는 것과 달리,
존재하는 프로퍼티에 값을 할당하면 프로퍼티의 값이 나중에 할당한 값으로 갱신된다.
let favoriteFruit = {
name: apple
color:red
};
favoriteFruit.name = waterMelon;
console.log(favoriteFruit) // {name: waterMelon, color:red}
delete연산자는 객체의 프로퍼티를 삭제한다.
delete favoriteFruit.color;
console.log(favoriteFruit) // {name: waterMelon}6. const와 객체
🚨!! 주의 !! 🚨
일반적으로 const는 상수로서 수정할 수 없는것으로 알려져있지만, 상수객체는 수정이 가능하다
const를 통해 객체를 생성했다면, 안의 모든값을 통째로 수정하려는 것만이 금지일뿐
객체안의 프로퍼티의 값은 수정이 가능하다
const feeling = {
today: "good"
}
feeling.today = "happy🥰"const의 값이 변경되어서 에러를 일으켜야할것같지만 위와같이 프로퍼티의 값은 변경이 가능하다.
feeling안의 모든 값을 전체적으로 변경할 경우에만 에러가 발생한다.
✍️📖 열심히 직접 공부하고 정리한 내용입니다 📖✍️
모던자바스크립트 딥다이브
수코딩 자바스크립트 객체(object type)
https://tutorial.eyehunts.com/js/javascript-data-types-and-examples/
