[혼공스] 5주차 > Chapter6(객체)

숙제

객체 : 상태, 메서드, 식별자를 가진 자율적인 존재로 메시지를 통해 상호작용한다.

• 메시지 : 쉽게 말하면 "메서드 호출". 하지만 좀더 자세히 말하면 "의도 전달"

속성 (필드) : 객체가 가진 데이터값.

메서드 : 속성이 함수인 경우. 객체가 할 수 있는 행동.

6-1 객체의 기본

자바스크립트의 자료형을 다시 떠올려보자. primitive 로는 Number, Boolean, String 이렇게 있었던 것 같다.

그렇다면 배열의 자료형은 무엇일까? typeof([])를 해보면 object가 출력된다.

배열과 객체는 매우 유사하다.

배열에서는 index로 element를 가져왔다.
객체에서는 key로 value를 가져온다.

const product = {
    name: 'driedMango',
    type: 'dried',
    ingredient: 'mango,sugar,etc...',
    origin: 'Philippines'
};

product['ingredients'];
product.ingredients;

key를 식별자(변수명)와 문자열("")로 사용이 가능하다. 일반적인 경우 식별자로 처리하지만, 식별자로 처리할 수 없는 단어를 키로 사용할 경우 문자열을 사용해야 한다. 예를들어 white space가 포함된 키를 사용한다던지, 특수문자를 사용하는 경우 사용한다.

이 경우 value를 꺼내기 위해선, 대괄호를 사용해야만 꺼낼 수 있다.

const temp = {
    "white space": 'temp',
    "with ~!@#$%^^&&**()_":52
}
temp["white space"]
temp["with ~!@#$%^^&&**()_"]

속성과 메서드

자, 객체의 예시를 살펴봤는데, 객체란 상태, 메서드, 식별자를 가진 자율적인 존재다.
속성 = 필드 같은 말인데, 자바스크립트의 속성은 타입이 따로 없다. 따라서 모든 형태의 자료형을 가질 수 있다.

속성 중 자료형이 함수이면 메서드라고 한다. 아래 예제에서 속성과 메서드를 명확하게 구분할 수 있다.
메서드는 두가지로 선언할 수 있는데, 나는 간단히 선언하는 것을 선호한다.

const example = {
    item: new Map(),
    add(name) {
        this.item.add(name, 'coh');
    },
    list() {return this.item.values();}
};

const pet = {
    name:'cloud',
    eat: function(food) {
        alert(this.name + ' eat ' food);
    }
};

메서드 내에서는 자기 자신이 가진 속성을 출력하고 싶을 때는 this 키워드를 사용해야한다. 이것을 사용하지 않으면 전역에서 찾기 때문에 객체 내의 속성을 찾을 수가 없다. 객체의 속성은 처음에 추가할 수도 있고 프로그램이 동작하면서 객체에 속성이 추가될 수도 있다.

전자를 정적, 후자를 동적이라고 말한다. C에서 동적배열과 개념은 동일하다.
동적으로 객체 속성을 추가/삭제 예시를 살펴보자

const student = {};
student.name = 'coh';
student.hobby = 'playing guitar';
student.grade = 'a+';

console.log(JSON.stringfy(student, null, 2));

delete student.grade;
console.log(JSON.stringfy(student,null,2));

화살표 함수와 메서드

메서드를 화살표함수로 만들면 안 될까? 생각이든다. 여기서 에러가 퍼퍼퍼펑 발생한다. this키워드를 다루는 방식이 익명함수와 화살표함수가 다르다.
결과를 보면,

익명함수 : 객체
화살표함수 : window객체

• window : 웹브라우저에서 실행하는 자바스크립트의 핵심객체.

이러한 이유로 객체 내 메서드에선 화살표함수를 사용하지 않는 편이다. 코드의 복잡도도 올라가기 때문.

const test ={
    a: function() {console.log(this); },
    b: () => {console.log(this)},
};
test.a();
test.b();

6-2 객체의 속성과 메서드

자료형에 대한 이야기를 다시한번 짚고 넘어가자. 자료형은... 정말 중요하다. 코드 짤 때도...

기본자료형 : 숫자, 문자열, 불
객체 자료형: 함수, 배열, etc...

물론 함수의 typeof결과값은 function이지만,
함수는 '실행이 가능한 객체'로서, 자바스크립트는 일급객체라고 하기도 한다.

객체자료형

6-1에서 배열도 객체라고 했다. 따라서 당연하게도 속성을 가질 수 있다.
함수도 마찬가지다. 선언이후에 속성을 가질 수 있다.

const a = [];
a.sample = 10;
a.sample;

function b() {};
b.sample = 10;
b.sample;

기본자료형

기본자료형은 객체가 아니므로 속성값을 가질 수 없다.

const c = 30;
c.sample =10;
c.sample; -> undefined

const d = 'hello';
d.sample=10;
d.sample; -> undefined

const isC = true;
isC.sample=10;
isC.sample -> undefined

속성값을 갖게 객체로 선언할 수 있을까? 물론이다. new 키워드를 사용하면 된다.

const test = new Number(10);
test = new String('hello');
test = new Boolean(true);

어?? 근데 String에는 기본 내장 메서드가 존재했다. 배열은 객체니까 그렇다쳐도, 문자열은 기본자료형인데 어떻게 메서드를 갖는거지?
'hello'.length이런 게 어떻게 가능한거지?
JS는 편리성을 위해 기본자료형의 속성과 메서드를 호출할 때(온점을 찍을 때), 해당라인에서 일시적으로 객체로 승급시킨다. 다만, 승급은 일시적이라서 sample자료형에 데이터를 넣는 것처럼 보였지만 실제로는 추가되지 않은 것!

프로토타입으로 메서드 추가하기

승급을 시켜서 내장메서드를 사용할 수 있게 해준다고 했다. 이 승급에 새로운 속성이나 메서드를 추가할 수 있을까?
prototype이라는 속성은 객체 전용 옷 (승급옷)이다. 여기에 속성과 메서드를 추가하면, 모든 객체에서 해당 속성과 메서드를 사용할 수 있다. 음... 자바로 비유하자면 상속개념이다.

일반적으로 속성은 추가하지 않고 메서드를 추가하는 경우가 많다.

Number.prototype.sample=10;
const a =20;
a.sample

제곱연산자 메서드 추가

Number.prototype.power = function (num = 2) { return this.valueOf() ** n}
const a = 12;
a.power(3);

문자열, 배열의 indexOf()는 대상이 존재하는 index를 return해준다. 없으면 -1반환.

String.prototype.contain = function(target) { return this.indexOf(target) >= 0}
Array.prototype.contain = function(target) {return this.indexOf(target) >= 0}

const a = 'hello';
a.contain('halo');

const b = [1,2,3,4,5];
b.contain(6);

Number객체의 자주 사용하는 내장메서드

1. toFixed는 소숫점 아래 몇자리까지 출력하는 함수인데 아주 많이 사용된다.
2. isNaN(), isFinite()도 많이 사용된다.
   JS에서는 값이 없는 것에 대한 자료형이 undefined or null이 있어서 좀 헷갈리는 부분이 많다.

Undefined : 선언 후 초기화되지 않은 경우. 특히, 객체의 없는 속성을 접근할 때 많이 사용하게 된다.
Null : 개발자가 의도적으로 빈값임을 알릴 때 사용.
NaN은 Not a Number라는 뜻으로 숫자가 아닌지를 확인할 때 사용한다. 다만 주의해야하는 것은 null, 문자열 등을 넣으면 false가 나온다는 것. 숫자로 변환을 시도했을 때, 실패한 경우 NaN이 할당되는데 이 값으로 비교를 해야한다는점!

String객체와 자주 사용하는 내장메서드

1. trim() 문자열 양쪽 끝 공백 없애기.
2. split() 특정 기호로 문자열 자르기

JSON객체와 자주 사용하는 내장메서드

JSON이란 인터넷에서 문자열로 데이터를 주고 받을 때 표현 방식. JavaScript Object Notation으로 자바스크립트 객체처럼 자료를 표현했다는 뜻.
그냥, 자바스크립트 배열과 객체를 활용해 자료를 표현했다고 생각하면 된다!

규칙

1. value는 문자열, 숫자, bool 자료형만 사용 가능. (함수, 객체, 불가)
2. 문자열은 반드시 큰 따옴표로 만들어야한다.
3. key에도 따옴표를 붙여야한다.

JS 객체를 JSON문자열로 변활할 때는 JSON.stringify()를 사용한다. POST방식으로 무언가 전달할 때 이렇게 전달한다.

const data = [{
    name:'hello'
}, 
{
    name:'world'
}]

console.log(JSON.stringify(data));
console.log(JSON.stringify(data,null,2)); // 1.변환대상 2.특정속성선택시 3.들여쓰기갯수

JSON문자열을 JS객체로 전개할 때는 JSON.parse()메서드를 사용한다.

const data = [{
    name:'hello'
}, 
{
    name:'world'
}]

const json = JSON.stringify(data);
console.log(json);
console.log(JSON.parse(json));

Math객체

자주 사용하는 것들만 정리한다.

1. 상수
   1-1. Math.PI //파이
   1-2. Math.E //자연상수
2. 내장메서드
   2-1. Math.random(); // 0 <= x < 1

외부스크립트 파일 읽어들이기

지금까지는 HTML페이지 스크립트태그 내에서 코드를 작성했는데, 모노파일로 관리하면 코드베이스가 너무 커진다. 따라서 코드는 적절히 분리할 필요가 있다. 그렇다면 어떻게 분리해야할까? test.js 파일을 만들고 넣어보자.

//test.js 코드
console.log('# test.js');
const sample = 10;

...
<script src="test.js"></script>
<script>
    console.log('# main.html')
    console.log('sample value:', sample);
</script>

외부 라이브러리 사용하기

음.. CDN으로 되어있는 무료 라이브러리를 사용할 수 있다. 하지만 내부망에선 사용할 수 없는 경우는 다운로드해서 받아주어야 한다. ㅋㅋㅋ
용어만 가볍게 정리하자. 외부라이브러리는 외부스크립트 파일 읽어들이기와 동일하게 넣어서 사용이 가능하다.

CDN : Contents Delivery Networkf라는 뜻으로 캐싱 서버를 이용하여 데이터를 빠르게 가져온다.
min : 자바스크립트 코드를 zipping했다는 뜻이다.

6-3 객체와 배열 고급

객체에 대한 기본적인 내용을 정리했으니, 고급 활용법을 배우는 시간이다.

속성존재여부 파악

이건 실무에서 정말 많이 쓰이는 패턴이다. 우선 없는 속성을 접근하려 했을 때, 반환값은 undefined다. 이 값은 조건문에 넣으면 false가 반환된다.
다만, 이 방식은 해당 속성값이 boolean값이나, 0, 빈문자열이 아닐 때 사용 가능하다. 명확하게 하려면 명시해 주어야한다.
솔직히 많은 경우 초간단으로 사용하는 것 같지만, 나는 명시해주는 게 좋은 것 같다.

// 명확히 명시
const object = {}
let flag = false;
if (object.name !== undefined) {
    flag = true;
} else {...}

// 간단히 사용
if (object.name) {flag=true} else {}

// 초간단
flag = object.name ? true : ...

// 명시
flag = object.name !== undefined ? true : false;

배열기반의 다중할당

이거 객체기반의 다중할당도 있는데, 지금까지 실무하면서 배열기반의 다중할당 코드는 한번도 못봤음.

let [a,b] = [1,2]
[b,a] = [a,b] // swap

let arrA = [1,2,3,4];
const [a,b,c] = arrA;

객체 기반의 다중할당

객체기반의 다중할당은 함수의 인자를 넘길 때, import 구문을 사용할 때 활용한다.

const obj = {
    name:'book',
    price:8000,
    publisher:'hanbit'
}

const {name, price} = obj;
const {a=name,b=price} = obj;

배열 전개 연산자

배열과 객체를 다른 변수에 할당 시, 얕은 복사가 일어난다. 얕은 복사란, 메모리 주소값을 공유하는 복사다.
따라서 개별적인 객체를 만들고 싶다면 깊은 복사를 해야한다. 깊은 복사란, 생김새가 똑같지만 주소값이 다른 복사다.

이때 사용되는 게 전개연산자다.

const arrA = [1,2,3]
const arrB = arrA // 얕은복사
const arrC = [...arrA] //깊은복사

전개연산자를 사용하면서 뒤에 자료를 추가할 수도 있고, 전개도 여러번 할 수 있다. JAVA에서 이런 데이터를 flat하게 만들어주기 위해 flatMap을 사용하는데 JS에서는 이렇게 간단하게 할 수 있다.

const arrD = [..arrA, 'grape', 'apple']
const arrE = [5, ...arrA, 6];
const arrF = [4,5,6]
const arrG = [...arrA, ...arrF];

객체전개 연산자

배열전개 연산자와 사용법은 똑같다! 그냥 할당하면 앝은 복사가 일어난다.

const cloud = {
    name:'cloud',
    age:6,
    type:'dog'
}

cosnt starShallow = pet; // shallow copy
const starDeep = {...pet}; // deep copy
const starDeepAdd {...pet,
    name:'star',
    age:1,
    health:'good'
}

객체는 전개 순서가 중요하다. 뒤에 속성이 겹치는 경우 덮어씌워지기 때문. starDeepAdd에선 name, age속성이 뒤에 것으로 덮여씌워진 상태이다.