[목차]
- 객체
- in 연산자 & for in 문
- spread 연산자
1. 객체(Object)
-
객체(Object)는 자바스크립트에서 사용하는 또 다른 데이터 타입.
-
우선 자바스크립트에서 데이터의 `타입'은 크게 원시형과 객체형 두 종류로 나뉜다.
- 원시형 : (
string,number,boolean,undefined,null...) - 객체형/참조형(object/reference) : (
배열,객체...)
- 원시형 : (
(각각에 대한 설명은 아래에서 자세히...)
- 객체는 여러 프로퍼티(property)나 메소드(method)를 같은 이름으로 묶어놓은 일종의 집합체.
- 자바스크립트는 객체(object) 기반의 스크립트 언어로서 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다.
객체(Object) 생성 문법
const user = new Object() 객체 생성자 문법 : 가장 기초적인 객체 생성 문법이지만 쓰이지 않는다.
const user = {} 객체 리터럴 문법 : {}를 활용해서 객체를 다이렉트로 생성한다.
99.9% 이 방법으로 객체를 만든다.
잠깐 짚고 넘어가야 할 객체와 배열의 차이.
배열(Array)은 변수 하나에 여러가지 데이터를 담고싶을 때 사용한다.
const students = ['곽XX', '강XX', '김XX', '김XX']객체(Object)도 마찬가지지만...
배열은 주로 단순한 리스트를 구현하기 위해 사용하기에, 여기에 나이나 성별같은 상세 정보를 담으려면 배열의 정체성이 애매해진다.
객체는 한 어떠한 개체가 가진 '세부 정보'를 저장하고 꺼내기 위해 사용하는 '데이터 타입'이다.
const Person = {
name: '곽XX',
age: 32
}
console.log(Person)
> {name: '곽XX', age: 32}-
CSS의 문법과 거의 유사하지만 각 속성끼리는
;(세미콜론)이 아닌,(콤마)로 구분 짓는다. -
name이라는 속성에 '곽XX'라는 값을 입력하려면''로 감싸야 한다. -
age 속성에는 Number값인 32를 그대로 입력.
- 각 속성의 '값' 안에는 어떠한 데이터타입도 들어갈 수 있다.
(중요! 함수나 배열도 가능하다는 뜻!)
객체 또한 하나의 변수 안에 여러가지 값이 있다보니 특정 값만 뽑아서 쓸 수 있어야 한다.
만약 객체 안에 있는 'name' console.log를 찍고 싶다면
console.log(Person.name)점 표기법
console.log(Person['name'])대괄호 표기법 (*''를 빼먹지 말자)
여기서 알 수 있는 사실은 우리가 자주 써온 console 역시 객체라는 것이다.
(console 안에 log라는 속성의 함수를 넣은 것. 객체 안에는 어떠한 데이터 타입도 들어갈 수 있기에)
추가로 속성명에 띄어쓰기나 특수문자가 들어가는 경우가 있다. ( , -, _, $)
이 경우 양쪽 끝(속성과 값 모두)에 '' or ""를 넣어서 감싸야 한다.
(대세는 큰따옴표"")
const user2 = {
name: '김XX',
age: 3X,
"Content type": "text/javascript",
"hair_color": "black",
}
console.log(user2)만약 속성명에 띄어쓰기나 특수문자가 들어갔을 경우에 그 속성값을 뽑아쓰고싶다면
[] 대괄호 표기법을 사용해야 한다.
console.log(user2['Content type'])
console.log(user2['hair_color'])
그리고 아래처럼 변수명을 새로 만들어서 속성명을 대체하면 따옴표가 필요 없어찐다.
let haircolor = "hair_color"
console.log(user2[haircolor]) // > black 출력.(그냥 알아만 두자)
2. in 연산자 & for in 문
a. in 연산자
찾고싶은 속성의 존재 여부를 검사하는 용도로 사용한다.
문법은 다음과 같다.
'name' in User2 출력값은 Boolean 타입으로 떨어진다.
console.log('name' in user2) // > true
console.log('gender' in user2) // > falseb. for in 문
- 문법의 형식 자체를 암기하자.
for in 문은 반복문을 이용해서 객체 안에있는 정보를 전부 꺼내고 싶을 때 사용한다.
for (let key in user) {
console.log(key)
console.log(user[key]) key는 단순히 for in문의 변수명.
출력값 중 전자는 '속성명'을, 후자는 '속성값'까지 뽑아내는 문법이다.
3. 스프레드 연산자
batman = {
name: 'bruce',
age: 40,
sizes: {
height: 180,
weight: 80,
},
}여기에 batman이라는 객체가 있다.
먼저 위에서 설명한 대로 자바 스크립트의 데이터의 타입은 원시 데이터와 객체형 데이터로 나뉘는데,
이 중 원시 데이터는 하나의 메모리 주소값에 하나의 데이터가 담긴다.
const a = 1
const b = 1
console.log(a === b)
> 결과는 true. (복제행위라고 부른다.)반면 객체형 데이터는 다른 이름으로 '참조형'(reference) 데이터라고 불리는데
참조란 어떠한 메모리 주소에 담겨있는 데이터만을 불러오는 것을 말한다.
(둘 이상의 객체가 같은 메모리 주소에 있는 동일한 데이터를 불러온다(참조).)
const copy = batman
console.log(copy) // > {name: 'bruce', age: 40, sizes: {…}}
copy.name = "wayne"
console.log(batman) // > {name: 'wayne', age: 40, sizes: {…}}위에서 copy라는 새로운 객체를 만들어서 안에 batman에 있던 속성들을 그대로 불러왔는데
copy.name을 bruce에서 wayne으로 바뀐 순간
객체 batman의 이름도 같이 바뀐 것을 확인할 수 있다.
이것은 같은 메모리 주소에 담겨있는 데이터를 서로 참조하고 있다는 뜻이다.
(pc로 비유하면 copy는 batman이라는 파일의 '바로가기 파일'이 만들어진 것에 가깝다.)
이제 스프레드 연산에 대해 알아보자.
const copy2 = {...batman}
console.log (batman === copy2) // false
console.log(batman.name === copy2.name) // false
console.log(batman.sizes === copy2.sizes) // true.-
두 객체
batman과copy2는 서로 동일하지 않다.(false) -
두 객체의
name속성 역시 동일하지 않다. (false) -
그러나 그 안에 담긴
sizes의 객체 데이터는 '동일(true)'하다고 출력된다.
[스프레드 연산자 문법]const B = {...A}
- 스프레드 연산자는 원본 객체를 감싸는 중괄호
{}를 한꺼풀 벗겨서
CopY & Paste하는 행위라고 이해하자. - 원본과 복제의
name과age는 서로 다른 메모리 주소를 가진 원시 데이터. - 스프레드 연산자로 중괄호를 한꺼풀 벗겨냈지만
sizes:는{}라는 또 다른 객체로 감싸고 있기에 같은 메모리 주소를 참조한다.
이 원리를 이용하면 원본에서 복사해온 객체의 속성값만을 바꿀 수 있게 된다.
먼저 불러올 객체의 속성값들을 {}를 사용해서 새로운 메모리 주소에 담아야 한다.
const copy3= {...batman, sizes: {...batman.sizes}}
console.log(batman.sizes === copy3.sizes) // > false. 먼저 {} == {}와 {} === {} 가 'false' 임은 이미 증명되었기에
({}은 새로 생성될 때마다가 새로운 메모리 주소에 담기는 객체 데이터)
{}라는 새로운 객체를 생성하고 그 안에 batman.sizes의 속성값들을 긁어왔다.
이제 batman.sizes의 객체값과 copy2.sizes의 객체값은 서로 다른 메모리 주소에 분리된 데이터이다
아래는 그 증명
copy3.sizes.height = 180
console.log(copy3.sizes.height) // > 180
console.log(batman.sizes.height) // > 200