객체
JS에 존재하는 8가지 자료형 중 객체를 제외한 7가지 자료는 한 가지 자료형만 담을 수 있다
이에 7가지 데이터를 '원시영(primitive type)라고 한다
객체는 중괄호 안에 {키 : 값}(key:value) 로 구성된 프로퍼티(property)를 여러개 넣은 자료 형식이다 - 키는 프로퍼티 이름 or 식별자, 값은 프로퍼티 값 이라고 한다
value 에는 모든 자료형이 올 수 있다 ( 이렇게 {} 를 사용해 객체를 선언하는 방법을 리터럴 이라고 한다)
let me + new Object() ; //라는 객체 생성자 문법을 사용할 수도 있다
(프로퍼티 끼리 구분을 하기 위해 , 를 필수적으로 찍어줘야 한다)
delete 를 통해 프로퍼티를 삭제할 수 있다
const 로 선언한 객체도 수정될 수 있습니다 (const 는 me 의 값만 고정할 뿐 내용은 고정하지 않기 때문에)
@계산된 프로퍼티
객체의 프로퍼티 키가 대괄호로 둘러져 있는 경우 이를, 계산된 프로퍼티 라고 한다
age 라는 키를 변수 age 에 할당된 값에서 가져오게 된다
@단축 프로퍼티
value 를 기존의 변수에서 받아와 사용하는 경우 name : name 대신
name 만 입력하는 것으로 같은 기능을 한다
@'in' 연산자
JS 는 존재하지 않는 프로퍼티에 접근하려 해도 에러가 뜨지 않고 undefined 를 반환한다 ( === undefined 를 통해 존재여부를 확인할 수 있지만 가끔 실패하는 경우가 있다) ex) value 가 undefined 일 경우 판독이 불가능
이때 in 을 사용하면 가능하다
@for in 반복문
문법
for 반복문과는 완전히 다르다
@객체 정렬 방식
키가 정수 프로퍼티 인 경우 자동으로 오름차순 정렬이 된다
%정수 프로퍼티 -> 정수로 변환하거나 문자열로 바꿔도 변형이 없는 값
ex) 50
반대로 50.1 String(Math.trunc(Number('1.2)) 를 하면 50 이 나오기 때문에 정수 프로퍼티가 아니다
따라서 정수 프로퍼티 앞에 + 를 붙이는 것으로 정수 프로퍼티가 아니게 취급할 수 있고 원하는 순서로 출력되게 만들 수 있
객체 복사
원시형은 값 그대로 저장, 할당 복사가 되지만
객체는 참조에 의해 저장, 복사가 된다 (by reference)
you 에는 me에 참조할 수 있는 값이 저장되어
you를 변경하면 me가 변경된다
객체 비교시 == 와 === 는 동일하게 동작한다
두 객체가 동일한 객체인 경우 true를 반환한다(참조한 객체인 경우)
독립적인 두 객체의 경우 false 를 반환한다
@객체 복사
for ~ in 을 사용한 복사 방법이다
Onject.assign(dest, [src1, src2, src3...])
을 활용한 방법도 있다
%동작 방식
- 첫 번째 인수 dest 는 목표로 하는 객체이다
- 이어지는 인수 src1... 는 복사하고자 하는 객체이다
- 객체 src1, ... srcN의 프로퍼티를 dest에 복사한다.
- 마지막으로 dest 를 반환한다
(src1, src2... 의 프로퍼티를 dest에 복사한다)
빈 배열에 me 의 프로퍼티를 복사하고 clone 에 할당한다
객체 clone 으로 me가 복사되고 참조된 값이 아니기에 다른 객체가 된다
( me == clone // false)
@중첩 객체 복사
객체의 value 가 객체의 값을 가지고 있을 경우 객체의 프로퍼티를 복사하면 객체가 참조되어 복사되기 때문에 같은 값을 공유한다
-> 이 문제를 해결하기 위해 value 를 각각 검사해 객체인 경우 객체 복사를 해야 하는 반복문을 사용해야 한다
이를 "깊은 복사"라고 한다
lodash 에 cloneDeep(obj) 를 사용하면 알고리즘 없이 복사처리할 수 있다
객체 심화
원래 객체는 이터레이션이 되지 않는다
따라서 Object.entries() 를 통해 배열로 만들어 for of loop를 돌릴 수 있다
@구조분해할당
구조분해를 중첩해서 사용해서 상위 요소를 하위 요소로 분해하면 상위 요소에 접근할 수 없다
width, height 로 분해했으면 size 에 접근할 수 없다
나머지 매개변수와 스프레드
Math.max (arg1, arg2, ..., argN) // 인수 중 가장 큰 수를 반환한다
위와 같이 인수의 갯수에 제약이 없는 경우를 표현하기 위해
... (나머지 매개변수를 사용한다)
위처럼 매개변수를 2개로 지정하고 5개의 매개변수를 함수에 넣어도 에러는 발생하지 않지만
반환값은 두개의 인수만을 사용해 계산한다
여분의 매개변수를 담는 배열 이름을 . . . 뒤에 붙함수 선언부에 포함시키면 '남아있는 매개변수들을 한데 모아 배열에 집어넣어라' 라는 의미를 하게된다
위 처럼 앞의 두 변수는 변수로 남고, 남아있는 매개변수들은 배열로 모으는 역할을 하게 된다
~나머지 매개변수는 항상 마지막에 있어야 한다~
@argument 객체
유사 배열 객체로서 이터러블 객체여서 인덱스를 사용해 인수에 접근할 수 있지만, 배열이 아니기 때문에 메서드를 사용할 수 없다
화살표 함수 또한 argument 객체를 지원하지 않고 오래된 코드를 보다 보면 arguments 를 만날 수도 있다
@스프레드 문법
배열을 통째로 매개변수에 넘겨주는 일이 필요할 수 있다
Math.max 는 인수를 숫자로 받기 때문에 배열인 arr을 넣으면 NaN 가 나오게 된다
console.log (arr[0], arr[1], arr[2]) 과 같이 수동으로 넣을 수 있지만 배열의 길이를 알 수 없으면 불가능하고 너무 길다
함수를 호출할 때 . . . arr 을 사용하면 객체 arr 이 인수 목록으로 확장되게 된다
이러한 스프레드 문법은 평범함 값과 혼합해 사용하는 것도 가능하고,
배열을 합칠 경우에도 사용할 수 있다
또한 문자열을 문자 배열로 변환시킬 수 있다
let str = 'hello'
alert ( [...str]) // h,e,l,l,o
메서드 Array.from 도 동일한 작업을 할 수 있다
Array.from 은 유사 배열 객체와 이터러블 객체 둘 다 사용할 수 있다
하지만 스프레드 문법은 이터러블 객체에만 사용할 수 있어
Array.from 이 조금더 보편적이다
@배열과 객체 복사본
Object.assign() 을 통해 객체를 복사할 수 있지만 스프레드 문법을 사용해 더 간단하게 할 수 있다
메서드 & this
객체에 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 준다
이렇게 객체의 프로퍼티에 할당된 함수를 "메서드"라고 한다
me 라는 객체 안에 sayhi 라는 key 에 함수를 할당해 sayhi 라는 메서드를 만믄다
.png)
이런 식으로 기존에 선언되어 있던 함수를 me 라는 객체의 메서드로 할당할 수 있다
(function 문을 생략하고 key 로 sayhi()를 집어넣는 것으로 메서드를 정의할 수도 있다)
@this
메서드 내부에서 this 키워드를 사용해 객체에 접근할 수 있다( 현재 객체)
객체 없이 this 를 호출 == undefined
this 는 런타임에 의해 결정되기 때문에 어디에서 정의되었는지에 상관없이 점 앞의 객체가 무엇인가에 따라 '자유롭게' 결정된다
