[JavaScript] 자바스크립트 객체의 속성과 메소드 사용하기

객체(Object) 자료형

속성과 메소드를 가질 수 있는 모든 것

프로그래밍 언어에서 말하는 속성(프로퍼티)이란, 객체의 특성 또는 객체 특성을 위한 컨테이너를 의미하는 경우가 있다. 예를 들어, 색상은 "red"라는 값을 갖는 텍스트 객체의 속성이 될 수 있다.

// 배열
// a라는 이름의 배열을 선언 후 10이라는 속성을 지정

const a = []		//undefined
a.sample = 10		//10
a.sample		//10이라는 속성을 출력함


// 함수
// b라는 이름의 함수를 선언 후 10이라는 속성을 지정

function b(){}		//undefined
b.sample = 10		//10
b.sample		//10이라는 속성을 출력함


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

typeof b		//function

함수는 '실행 가능한 객체'라는 특이한 자료로 typeof 연산자를 사용해 자료형을 확인하면 function을 출력한다.

함수는 객체의 특성을 완벽하게 가지고 있으므로 자바스크립트에서는 함수를 일급 객체(first-class object)에 속한다고 표현한다.

 

 

기본(Primitives) 자료형

실체가 있는 것 (undefined, null 등이 아닌 것) 중에 객체가 아닌 것

객체가 아니므로 속성을 가질 수 없다.

// 속성이 추가 된 것처럼 보이지만 재출력 시 undefined

// 숫자
const c = 273		//undefined
c.sample = 10		//10
c.sample		//undefined

// 문자열
const d = "안녕하세요"	//undefined
d.sample = 10		//10
d.sample		//undefined

//불
const e = true		//undefined
e.sample = 10		//10
e.sample		//undefined

 

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

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

자료형으로 변환하는 함수는 다음과 같다

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

//숫자
new Number()
//문자
new String()
//불
new Boolean()

const f = new Number(273)	//undefined
typeof f		//object
f.sample = 10	//10
f.sample		//10

f				//Number{273, sample:10}
f+0				//273
f.valueOf()		//273

++ new 키워드를 사용하지 않으면 자료형 변환 기능으로 되니 꼭 기억해두기!!

 

 

기본 자료형의 일시적 승급

원래 기본 자료형은 속성과 메소드를 가질 수 없다.

자바스크립트는 사용의 편리성을 위해서 기본 자료형의 속성과 메소드를 호출할 때(=기본 자료형 뒤에 온점을 찍고 무언가를 하려고 할 때) 일시적으로 기본 자료형을 객체로 승급시킨다.

일시적이기 때문에 sample로 자료형이 추가되는 것 처럼 보이지만, 실제로는 추가되지 않는 현상이 일어난다.

 

때문에 기본 자료형은 속성과 메소드를 일시적으로 사용할 수는 있지만, 속성과 메소드를 추가로 가질 수는 없다.

 

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

어떤 객체의 prototype이라는 속성이 바로 객체 전용 옷(틀) 이라고 할 수 있다.

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

 

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

Number.prototype.sample = 10
const i = 273		//undefined
i.smaple		//10 : 모든 숫자 자료형이 공유하는 속성

 

+직접 해보는 손코딩 264p

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

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

cosnt a = 12
console.log( a.power() )	// 144
console.log( a.power(3) )	// 1728
console.log( a.power(4) )	// 20736

indexOf()

문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지 확인 할 때 사용.

//문자열

const j = '가나다라마바사'

j.indexOf('가나')		//0
j.indexOf('라마')		//3
j.indexOf('아자차카')		//-1 : 없는 문자열

j.indexOf('가나') >= 0	//true : 0과 같기때문에 
j.indexOf('아자') >= 0	//false : 없는 문자열로 -1이기 때문에

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

j.contain('가나')		//true
j.contain('아자')		//false




//배열

const k = [ 1, 2, 3 ]

k.indexOf(2)			//1
k.indexOf(100)			//-1 : 없는 배열

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

k.contain(2)		//true
k.contain(100)		//false

 

 

Number에서 많이 사용되는 매소드

toFixed()

숫자 N번째 자릿수까지 출력하기

소수점 이하 몇자리까지만 출력하고 싶을 때 사용

const l = 123.456789

l.toFixed(2)		//123.45
l.toFixed(5)		//123.45678

Number.isInteger()
//주어진 값이 정수인지 확인합니다.

 

 

isNaN(), isFinite()

djEjs tntwkrk NaN (not a Number) 혹은 Infinity(무한) 인지 확인 할 때 사용

이 메소드들은 숫자 자료 뒤에 온점을 찍고 사용하는 것이 아니라, Number 뒤에 점을 찍고 사용한다.

NaN은 모든 값(NaN포함)들과 비교하여도 false가 나오기 때문에 isNaN으로만 확인이 가능하다.

// isNaN()
const m = Number('숫자로 변환할 수 없으면 NaN이다.')
m		//NaN

m === NaN		//false
Number.isNaN(m)		//true


// isFinite()
const n = 10/0
n			//Infinity
const o = -10/0
o			//-Infinity

//유한한 숫자인지 확인
Number.isFinite(n)	//false
Number.isFinite(o)	//false
Number.isFinite(1)	//true
//Infinity는 비교연산자로 비교가 가능하다
n === Infinity		//true
o === -Infinity		//true

 

String에서 많이 사용되는 매소드

trim()

문자열 양쪽 끝의 공백 없애기

const stringA = "     앞 공백 줄바꿈과
뒤 공백             "
           
stringA.trim()		// "앞 공백 줄바꿈과뒤 공백"

split()

문자열을 특정 기호로 자르기

let B = "안녕 Hi hello"

B.split(" ")		// ["안녕","Hi","hello"]

String.prototype.concat(str [, ...strN ])
//두 개(또는 그 이상) 문자열의 텍스트를 결합하고 새 문자열을 반환합니다.

String.prototype.includes(searchString [, position])
//호출 문자열에 가 포함되어 있는지 여부를 결정합니다

String.prototype.endsWith(searchString [, length])
//문자열이 문자열의 문자로 끝나는지 여부를 결정합니다

String.prototype.lastIndexOf(searchValue [, fromIndex])
//String가 마지막으로 발생한 호출 객체 내의 인덱스를 반환 searchValue하거나 -1찾을 수 없는 경우 반환합니다.

String.prototype.match(regexp)
//정규식 regexp을 문자열과 일치시키는 데 사용됩니다.

String.prototype.matchAll(regexp) 
//regexp모든 의 일치 항목의 이터레이터를 반환합니다 .

String.prototype.repeat(count)
//반복되는 개체의 요소로 구성된 문자열을 반환합니다 count.

String.prototype.replace(searchFor, replaceWith)
//searchForusing 발생을 대체하는 데 사용 replaceWith됩니다.
//searchFor문자열 또는 정규식일 replaceWith수 있으며 문자열 또는 함수일 수 있습니다.

String.prototype.search(regexp)
//regexp정규 표현식 과 호출 문자열 간의 일치 항목을 검색 합니다.

String.prototype.toLowerCase()
//소문자로 변환된 호출 문자열 값을 반환합니다.

String.prototype.toString()
//지정된 객체를 나타내는 문자열을 반환합니다.

String.prototype.toUpperCase()
//대문자로 변환된 호출 문자열 값을 반환합니다.

 

JSON 객체

인터넷에서 문자열로 데이터를 주고받을 때 쓰는 자료 표현 방식 중 가장 많이 사용되는 방식

다른 방식으로는 CSV, XML, CSON 등이 있다.

 

JSON 형식의 추가 규칙

1. 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있습니다. (함수 등은 불가)
2. 문자열은 반드시 큰따옴표로 만들어야 합니다.
3. key에도 반드시 따옴표를 붙여야 합니다.

const data = [{
	title : '우리 스터디조 항해99 항상 화이팅!'
    writer : '김만두'
    team : '언어스터디'
  },{
  	title : '혼공 자바 6-2 설명 진행 중입니다!'
    writer : '김만두'
    team : '언어스터디'
  }
]


// JSON.stringgify()
// 자바 스크립트 객체를 JSON 문자열로 변환할 때 사용

const A = JSON.stringify(data)

console.log(A)
//[{"title":"우리 스터디조 항해99 항상 화이팅!","writer":"김만두","team":"언어스터디"},{"title":"혼공 자바 6-2 설명 진행 중입니다!","writer":"김만두","team":"언어스터디"}]

console.log(JSON.stringify(data, null, 2))
// 두번째 매개변수는 객체에서 어떤 속성만 선택해서 추춘하고 싶을 때 사용
// 없을 경우 null을 넣음
// 세번째 매개변수는 들여쓰기
//[
//   {
//      "title":"우리 스터디조 항해99 항상 화이팅!",
//      "writer":"김만두",
//      "team":"언어스터디"
//   },
//   {
//      "title":"혼공 자바 6-2 설명 진행 중입니다!",
//      "writer":"김만두",
//      "team":"언어스터디"
//   }
//]




// JSON.parse()
// JSON 파일을 자바스크립트 객체로 전개 할 때 사용

A = JSON.stringify(data)

console.log(JSON.parse(json))
// Array(2)
//	0: {"title":"우리 스터디조 항해99 항상 화이팅!","writer":"김만두","team":"언어스터디"}
//	1: {"title":"혼공 자바 6-2 설명 진행 중입니다!","writer":"김만두","team":"언어스터디"}
//	length: 2
//	__proto__: Array(0)

 

Math 객체

수학과 관련 된 기본적인 연산을 할때는 Math 객체를 사용합니다.

 

Math.PI
//원의 둘레와 지름의 비율. 약 3.14159

Math.abs(x)
//숫자의 절댓값을 반환합니다.

Math.ceil(x)
//인수보다 크거나 같은 수 중에서 가장 작은 정수를 반환합니다.

Math.max([x[, y[, …]]])
//0개 이상의 인수에서 제일 큰 수를 반환합니다.

Math.min([x[, y[, …]]])
//0개 이상의 인수에서 제일 작은 수를 반환합니다.

Math.pow(x, y)
//x의 y 제곱을 반환합니다.

Math.round(x)
//숫자에서 가장 가까운 정수를 반환합니다.

Math.sign(x)
//x의 양의 수인지 음의 수인지 나타내는 부호를 반환합니다.

Math.trunc(x)
//숫자의 정수 부분을 반환합니다.

// Math,random()
// 랜덤한 숫자를 가져오는 메소드

const num = Math.random()

// 랜덤한 숫자
console.log(num)	// 0 <= 결과 < 1

// 랜덤한 숫자 범위 확대
console.log(num*10)	// 0 <= 결과 < 10

// 랜덤한 숫자 범위의 이동
console.log(num*10-5)	// -5 <= 결과 < 5

// 랜덤한 정수 숫자
console.log(Math.floor(num*10-5)

 

외부 script 파일 읽어들이기

간단한 프로그램은 HTML 내부에 script를 만들어 작성 가능하지만, 프로그램의 규모가 커지면 파일 하나가 너무 방대해지기 때문에 파일을 분리하는게 좋다.

파일을 분리하는 방법을 알아보겠다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
    <script src="test.js"></script>
    <script>
    	console.log('sample 값:', sample)
    </script>
</head>
<body>
</body>
</html>

// html 에서 부르는 test.js 파일

console.log('test.js 파일')
const sample = 10

// 콘솔에 출력 되는 것
test.js 파일
sample의 값: 10