[마스터 개념] 2 | 객체, 클래스, 빌트인 객체
[마스터 개념] 2 | 객체, 클래스, 빌트인 객체
1 variable 변수
2 operator 연산자
3 function 함수
4> object 객체
5> class 클래스
7> built-in 빌트인 객체
8 array 배열
9 iterator 이터러블
10 map
11 more-operators 유용한 연산자들
12 module 모듈
13 promise 프로미스
14 scope 스코프
15 prototype 프로토타입
16 closure 클로져
17 this
4 object 객체
key : 문자, 숫자, 문자열, 심볼
value : 원시값, 객체, 함수
속성, 데이터에 접근
// 마침표 표기법 dot notation
console.log(apple.name);
// 대괄호 표기법 bracket notation ('-'가 있을 때 사용)
console.log(apple["hello-bye"]);
const obj = {
name: "말랑",
age: 20,
};
// 코딩하는 시점에, 정적으로 접근
obj.name;
obj.age;
// 동적으로 속성에 접근
function getValue(obj, key) {
return obj[key];
}
getValue(obj, 'name');
동적으로 속성에 접근하고 싶을 때 대괄호 표기법을 사용한다.
객체 축약 버전
function obj(name, age) {
return { name, age } ; // { name: name, age: age };
}5 class 클래스
static
클래스 레벨의 메서드에서는 this 를 참조할 수 없으며, 만들어진 인스턴스를 직접적으로 사용할 때는 인스턴스 레벨의 메서드로 사용한다.
field 접근제어자
class Fruit {
#name; // 생략가능
#color; // 생략가능
#type = "과일";
constructor(name, color) {
this.#name = name;
this.#color = color;
}
display = () => {
console.log(`${this.name} : ${this.color}`);
};
}
public : 기본값
private : #, 외부에서 접근이 불가능함
Accessor Property 접근자 프로퍼티
class Student {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
get fullName() {
return `${this.lastName} ${this.firstName}`;
}
set fullName(value) {
console.log("set " + value);
}
}
함수처럼 행동이나 행위를 하지 않고, 단순히 조합하거나 제어하고 싶을 때 사용하며 속성값처럼 접근한다.
get : 속성값처럼 점( . )을 사용하여 호출한다. ex) student.fullName;
set : 할당( = )을 하여 호출한다. ex) student.fullName = "말랑";
7 built-in 빌트인 객체
Wrapper Object
const number = 123;
console.log(number.toString());
number 변수는 number 원시타입이지만, 점( . )을 찍으면 number 원시타입을 감싸는 Number 객체로 감싸져 Number 객체에 있는 함수들을 사용할 수 있게 된다.
따라서 원시값을 필요에 따라 관련된 빌트인 객체로 변환한다.
global 전역
globalThis, this, Infinity, NaN, undefined : 전역으로 사용
eval("const num = 2; console.log(num)"); // 2
eval( ) : 문자열을 값으로 평가하여 출력
console.log(isFinite(1)); // true
console.log(isFinite(Infinity)); // false
isFinite( ) : 유한한지 아닌지 boolean 값 가짐
console.log(parseFloat("12.34")); // 12.34
console.log(parseInt("12.34")); // 12
console.log(parseInt("11")); // 11
parseFloat( ) : 문자열 안에 소수점 포함된 숫자만 있다면, 이를 숫자로 바꿈
parseInt( ) : 문자열 안에 소수점 포함된 숫자만 있다면, 이를 정수로 바꿈
const URL = "https://코딩.com";
const encoded = encodeURI(URL);
console.log(encoded); // https://%EC%BD%94%EB%94%A9.com
const decoded = decodeURI(encoded);
console.log(decoded); // https://코딩.com
const part = "코딩.com";
console.log(encodeURIComponent(part)); // %EC%BD%94%EB%94%A9.com
우선 URL은 아스키 문자로만 구성되어야 해서, 한글이나 특수문자가 포함되면 이스케이프 처리를 해야 한다.
encodeURI( ) : 한글이나 특수문자를 정해진 다른 문자로 변환
decodeURI( ) : 다른 문자로 변환한 것을 원래대로 변환
encodeURIComponent( ) : 전체 URI 이 아닌 부분적인 것을 변환
number 숫자
MAX_VALUE : 1.7976931348623157e+308 (e+308 : 10의 308 제곱을 곱한 것)
MIN_VALUE : 5e-324
MAX_SAFE_INTEGER : 안전하게 사용할 수 있는 최대 정수 9007199254740991
MIN_SAFE_INTEGER : 안전하게 사용할 수 있는 최소 정수 -9007199254740991
NaN : NaN
NEGATIVE_INFINITY : -Infinity
POSITIVE_INFINITY : Infinity
const num1 = 102;
console.log(num3.toExponential()); // 1.02e+2
toExponential( ) : 매우 크거나 작은 숫자를 표기할 때 사용, 10의 n 제곱으로 표기
const num2 = 1234.12;
console.log(num2.toFixed()); // 1234
console.log(num2.toString()); // 1234.12
console.log(num2.toLocaleString("ar-EG")); // ١٬٢٣٤٫١٢
console.log(num2.toPrecision(5)); // 1234.1
console.log(num2.toPrecision(2)); // 1.2e+3
toFixed( ) : 반올림하여 문자열로 변환
toString( ) : 문자열로 변환
toLocaleString( ) : 해당 나라의 문자로 변환
toPrecision( ) : 원하는 자릿수까지 유효하도록 반올림 (전체 자릿수 표기가 안될 때는 지수 표기법)
const num = 0.1 + 0.2 - 0.2; // 0.10000000000000003
console.log(num);
이때 0.00000000000000003 은 10진수를 2진수로 변환하여 나타날 때 생기는 사소한 차이인데, 0보다는 크고 1보다는 작은 가장 작은 숫자인 엡실론이다.
function isEqual(original, expected) {
return Math.abs(original - expected) < Number.EPSILON;
}
이때 기존값에서 해당값을 뺀 차이가 엡실론보다 작은 경우에 같은 값이라 할 수 있다.
Math 수학
E : 오일러 상수, 자연로그 밑
PI : 원주율 PI 값
// 절대값
console.log(Math.abs(-10)); // 10
//소수점 이하 올림
console.log(Math.ceil(1.4)); // 2
// 소수점 이하 내림
console.log(Math.floor(1.4)); // 1
// 소수점 이하 반올림
console.log(Math.round(1.4)); // 1
console.log(Math.round(1.7)); // 2
// 정수만 반환
console.log(Math.trunc(1.2345)); // 1
// 최대, 최소값 찾기
console.log(Math.max(1, 2, 3)); // 3
console.log(Math.min(1, 2, 3)); // 1
// 거듭제곱
console.log(3 ** 2); // 9
console.log(Math.pow(3, 2)); // 9
// 제곱근
console.log(Math.sqrt(9)); // 3
// 랜덤한 값을 반환
console.log(Math.random()); // 0.9159291659528985
// 1 ~ 10 랜덤
console.log(Math.floor(Math.random() * 10 + 1)); // 9
String 문자열
const text = "Hello world";
// 배열로 해당 인덱스 접근
console.log(text[0]); // H
console.log(text[1]); // e
console.log(text[2]); // l
// 함수로 해당 인덱스 접근
console.log(text.charAt(0)); // H
console.log(text.charAt(1)); // e
console.log(text.charAt(2)); // l
// 해당 문자열의 인덱스 (앞에서부터 찾음)
console.log(text.indexOf("l")); // 2
console.log(text.lastIndexOf("l")); // 9
// 해당 문자열이 존재하는지 boolean 값
console.log(text.includes("tx")); // false
console.log(text.includes("h")); // false
console.log(text.includes("H")); // true
// 해당 문자열로 시작 or 종료하는지 boolean 값
console.log(text.startsWith("He")); // true
console.log(text.endsWith("!")); // false
// 대문자로 or 소문자로
console.log(text.toUpperCase()); // HELLO WORLD
console.log(text.toLowerCase()); // hello world
// 문자열을 해당위치까지 삭제
console.log(text.substring(0, 2)); // He
console.log(text.slice(2)); // llo world
console.log(text.slice(-2)); // ld
// 문자열에서 공백 제거
const space = " space ";
console.log(space.trim()); // space
// 문자열을 잘라서 배열로 반환
const longText = "Get to the, point";
console.log(longText.split(" ")); // [ 'Get', 'to', 'the,', 'point' ]
console.log(longText.split(" ", 2)); // [ 'Get', 'to' ]
console.log(longText.split(", ", 2)); // [ 'Get to the', 'point' ]
Date 날짜
const now = new Date();
// 날짜를 설정
now.setFullYear(2023);
now.setMonth(11); // 0 : 1월
// 날짜 가져오기
console.log(now.getFullYear()); // 2023
console.log(now.getMonth()); // 11
console.log(now.getDate()); // 0 : 1일 // 11
console.log(now.getDay()); // 0 : 일요일 // 1
console.log(now.getTime()); // 1702289290201
console.log(now); // 2023-12-11T10:08:10.201Z
// 날짜를 문자열로 변환하여 가져오기
console.log(now.toString()); // Mon Dec 11 2023 19:08:10 GMT+0900 (대한민국 표준시)
console.log(now.toDateString()); // Mon Dec 11 2023
console.log(now.toTimeString()); // 19:08:10 GMT+0900 (대한민국 표준시)
console.log(now.toISOString()); // ISO 8601 형식
console.log(now.toLocaleString("en-US")); // 12/11/2023, 7:08:10 PM
console.log(now.toLocaleString("ko-KR")); // 2023. 12. 11. 오후 7:08:10