[언어공부] (혼자 공부하는 자바스크립트) Chapter 6-2 객체의 속성과 메소드 사용하기

Chapter 6 객체

Chapter 6-2 객체의 속성과 메소드 사용하기

핵심 키워드 !     #기본 자료형  #객체 자료형   #기본 자료형의 승급   #prototype

 

 

 

 

객체 자료형

-> 속성과 메서드 가질수 있다!

 

속성과 메소드를 가질 수 있는 모든 것은 객체입니다. 그러므로 속성을 지정할 수 있는 배열 역시 객체입니다

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

typeof a;        // "object"
Array.isArray(a)        // true

 

함수에도 속성을 지정할 수 있습니다. 단 typeof 함수로 자료형을 확인하면 "object"가 아니라 "function"으로 나오는데, 이는 실행이 가능한 객체이기 때문입니다. 함수는 객체의 특성을 완벽하게 가지고 있으므로, 자바스크립트에선 함수를 "일급 객체에 속한다" 고 표현하기도 하고 "함수를 일급객체(first-class object)로 다룬다." 라고 표현하기도 합니다.

 

기본 자료형

-> 속성과 메서드 가질수 없다!

 

 

실체가 있는 것(즉, undefined나 null 등이 아닌 것) 중에 객체가 아닌 것을 기본 자료형이라고 하며, 숫자, 문자열, 불이 해당됩니다. 기본 자료형은 객체가 아니므로 속성을 가질 수 없습니다. 억지로 추가해 출력해도 undefined가 출력되며 추가되지 않습니다.

 

기본 자료형을 객체로 선언하기

 

따라서 자바스크립트는 기본 자료형을 객체로 선언하는 방법을 제공합니다.

const 객체 = new 객체 자료형 이름()

nuw 키워드를 사용하지 않으면 함수가 자료형 변환 기능으로 작동하기 때문에 조심해야 합니다!

 

기본 자료형의 일시적 승급

 

메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는, 자신이 가진 속성임을 분명히 표시하기 위해 this 키워드를 사용합니다. 위의 예시에서 person.introduce 가 메소드입니다.

 

동적으로 객체 속성 추가 / 제거  

객체를 생성한 후에 속성을 추가/제거하는 것을 '동적으로 속성을 추가/제거한다'라고 표현합니다.

const b = "안녕하세요";        // undefined
b.sample = 10;        // 10        일시적 승급
b.sample        // undefined        객체 승급이 일시적이어서 sample 속성이 사라졌다.

 

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

 

prototype 객체에 속성과 메소드를 추가하면 모든 객체(와 기본 자료형)에서 해당 속성과 메소드를 사용할 수 있습니다.

객체 자료형 이름.prototype.메소드 이름 = function () {

}

위의 예시에서, Number.prototype에 속성을 추가하는 것은 숫자 객체 전체에 속성을 추가하는 것이고, 이는 객체 자료형이 아닌 기본 자료형 숫자에서도 속성을 사용할 수 있음을 뜻합니다.

모든 숫자 자료형(이거나 다른 기본 자료형)이 어떤 속성을 공유할 필요는 없기 때문에, 일반적으로 프로토타입에 속성을 추가하지 않습니다. 하지만 프로토타입에 메소드를 추가하면 다양하게 활용할 수 있습니다.

• MDN: Object prototypes 에선 "일반적인 방식으로는 속성은 생성자에서, 메소드는 프로토타입에서 정의합니다. "라고 설명합니다.
• 모던 자바스크립트 튜토리얼 에선 "모던 프로그래밍에서 네이티브 프로토타입 변경을 허용하는 경우는 딱 하나뿐입니다. 바로 폴리필을 만들 때입니다."라고 설명합니다. 폴리필은 자바스크립트 명세서에 적혀있는 메소드와 동일한 기능을 하는 것을 말합니다. 즉, 자바스크립트 명세서에는 적혀있는데, 특정한 상황에서 해당 기능이 구현되어 있지 않을 때에만 프로토타입을 추가(변경)하라는 것입니다.
  • 프로토타입은 전역으로 영향을 미치기 때문에 여러군데에서 조작할 경우 충돌이 날 가능성이 높기 때문입니다.

 

아래 예시를 통해 이해하는데 도움이 될 것이라 생각합니다.

Number.prototype.power = function (n = 2) {
  return this.valueOf() ** n
}

const a = 12;

a.power();        // 144
a.power(3);        // 1728
a.power(4);        // 20736

 

Number 객체

Number 객체에서 자주 사용하는 기본 메소드는 다음과 같습니다.

toFixed(n)

소수점 이하 n자리까지 출력하고 싶을 때 사용합니다.

isNaN()      [ NaN (Not a Number) 인지 확인]  , isFinite() [ Infinity (무한) 인지 확인]

 

NaN 자료형은 Number.isNaN(x)을 통해서만 확인할 수 있습니다. NaN === NaN 역시 false를 반환한다.

const m = Number("String");        // undefined
m;        // NaN
m === NaN;        // false
Number.isNaN(m)        // true

 

Number.isFinite(x) 는 무한대를 확인할 수 있는 메소드이다. 무한대에는 양의 무한대 숫자와 음의 무한대 숫자 두가지가 있는데, 이 두가지 경우에는 false를 반환하고, 그 외의 유한한 숫자에는 true를 반환한다.

 

String 객체

x.trim()

문자열 양쪽 끝의 공백(띄어쓰기, 줄바꿈 등)을 제거하는 메소드이다.

split(매개변수)

문자열을 매개변수로 구분해 배열로 리턴하는 메소드이다.

const genres = "kim,lee,park"
const splitedGenres = genres.split(,);
splitedGenres;        // (3) ["kim", "lee", "park"]


const genres = "kim lee park"
const splitedGenres = genres.split(" ");
splitedGenres;        // (3) ["kim", "Romance", "park"]

이 외에도 length 속성, indexOf() 메소드 등이 있다.

 

Math 객체

 

수학과 관련된 기본적인 연산을 할 땐 Math 객체를 이용합니다. 속성으로는 Math.PI, Math.e와 같은 수학 상수가 있으며, 메소드로는 Math.sin(), Math.cos(), Math.tan() 같은 삼각함수도 있습니다.

기본적인 함수로는 다음 이미지로 대체하겠습니다.

 

 

또한 랜덤한 숫자를 생성할 때 Math.random() 메소드를 사용하는데, 이때 0 이상 1 미만의 랜덤한 값이 나오므로 그 이상의 범위에서 활용하려면 여러 처리를 해야 합니다.

Math.ceil(Math.random()*50)        // 0에서 50 이하의 랜덤 정수가 나온다.

 

JSON 객체

 

 

JSON은 JavaScript Object Notation의 약자로, 인터넷에서 문자열로 데이터를 주고받는 다양한 자료 표현 방식 중 현재 가장 많이 사용되고 있는 방식입니다.

이름에서 알 수 있듯, JSON은 자바스크립트의 배열과 객체를 활용해 어떤 자료를 표현하는 형식입니다. 단, 추가 규칙이 있습니다.

• 값을 표현할 때 문자열, 숫자, 불 자료형만 사용할 수 있습니다.
• 문자열은 반드시 큰따옴표""로 만들어야 합니다.
• 키에도 반드시 따옴표를 붙여야 합니다.

자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify() 메소드를 사용합니다.

JSON.stringify(value[, replacer[, space]])

일반적으로 매개변수를 하나만 사용해서 활용한다. replacer는 객체의 특정한 속성만 추출하고 싶을 때 사용하며, null을 입력하면 모든 속성을 추출한다. space는 들여쓰기 칸을 설정합니다.

console.log(JSON.stringify({ x: 5, y: 6 }, null, 2));
// {
//    "x": 5,
//    "y": 6
// }

반대로, JSON 문자열을 자바스크립트 객체로 전개할 때는 JSON.parse() 메소드를 사용합니다.

const json = JSON.stringify({ x: 5, y: 6 }, null, 2);

console.log(JSON.Parse(json));
// {x: 5, y: 6}
//         x: 5
//        y: 6
//        __proto__: Object

 

Lodash 라이브러리

 

다른 사람들이 만든 다양한 함수와 클래스를 묶어서 제공해주는 것을 외부 라이브러리라고 부릅니다.

유틸리티 라이브러리는 개발할 때 보조적으로 사용하는 함수들을 제공해주는 라이브러리입니다. underscroe, Lodash 등 다양한 라이브러리가 있습니다.

• Lodash 공식 홈페이지
• Lodash CDN 링크 페이지

CDN 링크 페이지에 가서 lodash.min.js의 CDN 링크를 복사해 <script src="CDN 링크"로 입력하면 Lodash 라이브러리를 사용할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

• CDN은 Contents Delivery Network의 약자로 콘텐츠 전송 네트워크라는 의미입니다. 전 세계 여러 지역에 전송할 데이터를 준비해두고, 사용자가 데이터를 요청했을 대 가장 가까운 지역에서 데이터를 전송하는 방식입니다.
• CDN으로 전송할 때 데이터의 용량을 줄이고자 라이브러리 소개 등을 줄이고 코드를 집핑(zipping, 응축)합니다. 이렇게 집핑한 버전이 min 버전입니다.

Lodash 라이브러리는 _ 식별자에 sortBy() 등 여러 메소드를 담겨 있습니다.

Lodash 라이브러리 외에도 Luxon, date-fns, Handsontable, D3.js, ChartJS, Three.js 등 여러 라이브러리가 있으며  jQuery, React.js 도 모두 라이브러리입니다.

 

 

 

 

 

 

참고도서 : 혼자공부하는 자바스크립트 (https://www.hanbit.co.kr/store/books/look.php?p_code=B8393055290)

https://www.hanbit.co.kr/store/books/look.php?p_code=B8393055290%29

참고 : https://www.youtube.com/playlist?list=PLBXuLgInP-5kxpAKy2DNXoebCse2grHjl 

혼자 공부하는 자바스크립트

참고 : https://garudanish.tistory.com/10?category=961305 

혼자 공부하는 자바스크립트 6장 - 객체