2022.07.08 - javascript 비기너 복습 (3)

[ 14강 ~ 19강 요약 ]

- Boolean 오브젝트 

빌트인 오브젝트 이며, true와 false로 처리한다. 

 

- 자바스크립트 특징 

소스 파일의 코드를 사전에 컴파일하여 실행파일을 만들어놓지 않고, 사용하는 시점에 컴파일하고 실행한다. 

 

- 컴파일 순서 

소스 파일의 위에서 아래로 컴파일된다. 

function 키워드를 만나면 function 오브젝트를 생성한다.

이때, 함수 안의 코드는 컴파일하지 않는다. 함수가 호출되었을때 컴파일된다. 

 

- js와 객체지향 언어 

객체지향 프로그래밍 언어 (OOP: Object Oriented Programming)

자바스크립트는 객체 지향 언어이다. 

 

- OOP의 객체

- 객체 (object)

행위(Behavior) 와 속성(Attribute) 으로 구성되어 있다.

행위 : 먹다, 마시다 (동사)

속성 : 밥, 사이다 (명사)

 

-> 객체를 형상화하면

행위가 메소드가 되고, 

속성이 프로퍼티가 되고,

객체가 클래스가 된다. 

 

- 클래스 class 

행위와 속성을 정의한 것으로 new 연산자를 이용하여 인스턴스로 생성하여 사용할 수 있다. 

 

- js 객체 형태 

Object 오브젝트 형태

 const book = {

read : function(param){코드} 

}

 

- 인스턴스

class를 new 연산자로 생성한 것 

인스턴스의 목적 :

class에 작성된 메소드를 사용한다.

인스턴스마다 프로퍼티 값을 유지한다. 

 

- new 연산자

인스턴스를 생성하여 반환한다.

new Book("자바의 정석"); 

첫 문자를 대문자로 작성한다.

생성자 함수로 넘겨 줄 값을 소괄호()에 작성한다. 

const Book = function(point){
  this.point = point;
};

Book.prototype.getPoint = function(){
  return this.point +100;
};
const onelnstance = new Book(200);
console.log(onelnstance.getPoint());
// 300

 

 

- 프로퍼티 디스크립터

프로퍼티의 속성 이름과 속성 값을 정의

- 디스크립터 타입 분류 : 데이터, 액세스, 공용 

디스크립터 타입에 속한 속성만 같이 사용할 수 있음

 

- 디스크립터 타입 인식 기준 

먼저 value 또는 writable 작성 체크 

작성되어 있으면 -> 데이터 프로퍼티 디스크립터 타입으로 인식 

 

-getter, setter

getter : OOP 언어

value 속성이 없을때 get을 불러낸다. 프로퍼티로 값을 구할때 value속성이 없으면 get속성을 불러내는데

이것을 getter 라고 함.

setter : OOP 언어

 

 

 

- json 오브젝트 

new 연산자로 인스턴스 생성이 불가함 

데이터 송수신의 변환 기준이된다.

텍스트이므로 전송 속도가 빠르다 

 

-stringify()

js 타입을 json타입의 문자열로 변환한다.

JSON.stringfy() 형태로 호출한다. 

const obj = {
    name: "홍길동",
    age: 25,
    married: false,
    family: {
        father: "홍판서",
        mother: "춘섬"
    },
    hobbies: [
        "독서",
        "도술"
    ],
    jobs: null
};

const str = JSON.stringify(obj);
console.log(str);
/*
'{"name":"홍길동","age":25,"married":false,"family":{"father":"홍판서","mother":"춘섬"},"hobbies":["독서","도술"],"jobs":null}'
*/

=> 자바스크립트 객체가 많은 양의 데이터를 담고 있는 경우에는 한 줄의 문자열로 변환되면 알아보기 힘들어진다.

이때 stringify()메서드의 3번째 인자로 들여쓰기 공백의 크기를 지정해 줄 수 있다. 

const str = JSON.stringify(obj,null,2);
console.log(str);

/*
"{
  'name': '홍길동',
  'age': 25,
  'married': false,
  'family': {
    'father': '홍판서',
    'mother': '춘섬'
  },
  'hobbies': [
    '독서',
    '도술'
  ],
  'jobs': null
}"
*/

한결 보기 좋아짐.!

 

 

- parse()

json타입을 js 타입으로 변환 

 const str = `{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": { "father": "홍판서", "mother": "춘섬" },
  "hobbies": ["독서", "도술"],
  "jobs": null
}`;
const obj = JSON.parse(str);
console.log(obj);


/* console
{
    name: "홍길동",
    age: 25,
    married: false,
    family: {
        father: "홍판서",
        mother: "춘섬"
    },
    hobbies: [
        "독서",
        "도술"
    ],
    jobs: null
}
*/

=> JSON 문자열에서는 키(key)를 나타낼 때 반드시 쌍따옴표로 감싸줘야 하는 반면에, JavaScript 객체에서는 쌍따옴표를 꼭 사용할 필요는 없다. 

 

 

- Date 오브젝트

 년월일, 시분초, 밀리초 제공 

시간값(Time Value) 라고 부름, UTC(Universal Time Coordinated) 기준

 

월은 0부터 시작  => 0 : 1월, 1 : 2월, 2 : 3월

일은 1에서 31까지 정수로 표시 

요일은 0부터 시작 => 0 : 일요일, 1 : 월요일, 6 : 토요일 

const obj = new Date(1994,6,10,11,30,00,0);
//년,월,일,시,분,초,밀리초
console.log(obj.toLocaleString());

//"1994.7.10.오전 11:30:00"

 

- 프로퍼티 리스트 

 

 

 

- Math 오브젝트

 수학 계산용 오브젝트 : 상수, 절댓값, 사인, 탄젠트 등 

new 연산자로 인스턴스 생성 불가

메소드가 아니라 함수의 형태이다. 

Math.abs(값) 의 형태로 사용됨.

 

- Math 함수의 종류 -

 

- abs() 

음수를 양수로 변환한 절댓값을 반환한다. 

console.log(Math.abs(-123)); // 123
console.log(Math.abs(-Infinity)); // Infinity

 

- floor()

소수 이하 버림, 정숫값을 반환한다.

소수 이하 값이 있으면서 음수이면 -1을 더해 반환한다.

console.log(Math.floor(5.3)); // 5
console.log(Math.floor(-1.7)); // -2
console.log(Math.floor(-1.0)); // -1

 

- ceil()

소수 이하 올림, 정숫값을 반환한다.

console.log(Math.ceil(5.3)); // 6
console.log(Math.ceil(-1.7)); // -1
console.log(Math.ceil(-0.1)); // 0

 

- round()

소수 이하 반올림, 정숫값을 반홚나다.

양수이면 반올림하고 음수이면 반내림한다.

console.log(Math.round(5.3)); // 5
console.log(Math.round(-1.7)); // -2
console.log(Math.round(-1.1)); // 0

 

- max()

파라미터 값 중에서 가장 큰 값을 반환한다.

파라미터 값을 전부 숫자로 변환하여 비교한다.

NaN이 하나라도 있으면 NaN을 반환한다.

console.log(Math.max(5,3)); // 5
console.log(Math.max(7,"얍")); // NaN

 

- min()

파라미터 값 중에서 가장 작은 값을 반환한다.

파라미터 값을 전부 숫자로 변환하여 비교한다. 

NaN이 하나라도 있으면 NaN을 반환한다.

console.log(Math.min(5,3)); // 3
console.log(Math.min(7,"얍")); // NaN

 

- pow()

파라미터 x값의 y승을 반환한다.

y가 0일때, x가 NaN 이라도 1을 반환한다.

y가 NaN 면 NaN을 반환한다.

console.log(Math.pow(10,2)); // 100
console.log(Math.pow(10,0)); // 1
console.log(Math.pow("A",1)); // NaN

 

- random()

0에서 1미만 사이의 난수를 반환한다.