# 객체
# 문자열
문자열 내에 이스케이프 문자 사용 가능
줄바꿈 문장 표현 가능 -> 이스케이프 문자(\n), 템플릿 리터럴(백틱 `)
데이터 보관시 문자열 형태로 저장 유용 -> 텍스트 형태, 객체 형태(JSON.stringify)
# 문자열 조작
▶문자열 요소 접근
charAt
유사 배열이라 배열처럼 접근
const aaa = "가나다라마바사";
console.log(aaa.charAt(3)); //라
console.log(aaa[3]) //라▶ 문자열 비교
알파벳순을 비교하여 순서가 뒤에 올수록 크다고 판단
//알파벳 순서로 크기 비교
const abc = "abc";
const def = "def";
console.log(abc < def); //true변수 또는 객체의 속성이 문자열을 가지고 있으면 String 인스턴스 속성과 메서드 사용 가능하다
# String 객체
문자열을 다룰 때 사용하는 원시 래퍼 빌트인 객체
함수로 바로 사용
▶ 인스턴스 메서드
문자열 접근 및 찾기
const aaa = "가나다라마바사";
//접근 및 비교
const exam = [aaa.at(0), // 가
aaa.charAt(0), // 가
aaa.indexOf("라"), // 3
aaa.search("카")]; // -1문자열 포함 여부
const aaa = "가나다라마바사";
//문자열 포함 여부
const exam = [aaa.includes("바"), //true
aaa.startsWith("나"), //false
aaa.match("가")]; //["가"]문자열 비교
const aaa = "가나다라마바사";
const bbb = "안녕하세요";
//문자열 비교
const exam = [aaa.localeCompare(bbb)];문자열 변경
//문자열 변경
const changeString = [
"abcdef".toLocaleUpperCase(), //ABCDEF
"ABCDEF".toLocaleLowerCase(), //abcdef
"hello".replace("h", "H"), //Hello
"hello".replace("l", "L"), //heLlo
"hello".replaceAll("l", "L"), //heLLo
];문자열 추가 및 합치기
//문자열 추가 및 합치기
const addString = [
//길이 length 값 , 빈 length에 채울 값
"abcdef".padStart(10, "1"), // '1111abcdef'
"ABCDEF".padEnd(10, "k"), //'ABCDEFkkkk'
//문자열 반복
"hello".repeat(2), // 'hellohello'
//문자열 합치기
"hello".concat(" nice to meet you!"), // 'hellonice to meet you!'
"hello" + " nice to meet you!", // 'hellonice to meet you!'
];문자열 분리하기
//문자열 분리하기
const partString = [
//5번째 인덱스부터 마지막까지 자르기
"abcdef".slice(4),
//2번째 인덱스부터 4번째 인덱스까지 자르기
"abcdef".slice(1, 4),
"abcdef".substring(4),
"abcdef".substring(1, 4),
//배열로 변경
"abcdef".split(),
//공백 제거
" abc ".trim(),
];
# 정규표현식
문자열에서 특정 문자 조합을 찾기 위한 패턴
/pattern/flags
정규표현식 생성 방법
1. 리터럴 표기법
평가할 때 정규 표현식을 컴파일
정규식이 변하지 않으면 리터럴 표기법을 사용하자
/pattern/flag
2. RegExp 객체
런타임 때 컴파일
패턴이 변할 가능성이 있거나, 알 수 없는 데이터에서 가져오는 정규식의 경우 생성자 함수 사용하자
new RegExp(/pattern/, flag)
▶정적 속성 : lastIndex
▶생성자 함수 : RegExp.prototype
▶인스턴스 속성 : flags, dotAll, global, ignoreCase, multiline, source, sticky, unicode
▶ 인스턴스 method : compile(), exec(), test(), toString()
//RegExp 객체
const str = "abcdef";
const regex = /a/g;
const exam = [
//일치 확인
str.match(regex),
//찾기
str.search(regex),
//찾아서 교체
str.replace(regex),
//찾아서 분리
str.split(regex),
];# Collection
비용을 절감하기 위하여 상황마다 효율적인 데이터 형태로 처리하는 것이 필요하다
컬렉션은 데이터 항목의 그룹을 의미한다 -> list, set, tree, graph
자바스크립트 Collection의 2가지 타입
# Indexed Collections
인덱스 값을 기준으로 정렬되어 있는 데이터 집합
Array
이름과 인덱스로 참조외더 정렬된 값들의 잡합이다
자바스크립트는 명시적인 배열 데이터 타입을 가지고 있지 않다
Array 객체 생성방법
배열 리터럴 : 대괄호로 묶기 []
Array 객체 생성자 : new Array(arrayLength); 길이만 지정된 배열, new Array(ele0, ele1, ...); 요소만 지정된 배열
//Array 객체
//길이만 지정해서 배열 생성
new Array(23);
//요소만 지정해서 배열 생성
new Array("hi", "hello");Array 객체 특징
배열 요소의 참조
- index로 참조, 0부터 시작
- index값을 속성 이름으로 사용하여 표준 객체의 속성처럼 저장
- index로 문자열 사용 불가능, 무조건 정수로만 참조하여 저장
배열에 값 저장
- index로 참조하지 않으면 객체의 속성으로 저장됨
배열의 반복 처리 시 -> for문. forEach문 활용
# Keyed Collections
Key 값을 기준으로 정렬되어 있는 데이터 집합
Map, Set
키와 값을 매핑하여 저장한다
저장된 순서대로 각 요소들을 반복적으로 접근할 수 있다
# Map 객체
간단한 키와 값을 서로 매핑시켜 저장하고 저장된 순서대로 요소를 반복적으로 접근
[key, value]
Map 인스턴스 속성 : size
Map 인스턴스 method : get, has, clear, delete, set, keys, values, entries, forEach
# Map과 Object는 어떤 차이가 있을까?
| Object | Map | |
| 속성의 데이터 타입 | String, Symbol만 가능 | 모든 값을 키로 활용 가능 |
| default 속성과의 충돌 | Object prototype의 기본속성과 동일한 키를 생성시 충돌 | 기본적으로 갖고 있는 속성이 없어 기본 속성들과 충돌 없음 |
| 객체의 크기 | 수동으로 추적 | size 인스턴스 속성으로 얻을 수 있음 |
| 순서 보장 | 순서 보장 X | 추가된 순서대로 반복 |
| iterable 여부 | iterable X | iterable |
| 퍼포먼스 | 키, 값 쌍의 빈번한 추가 제거 시 퍼포먼스 좋지 않음 | 키, 값 쌍의 빈번한 추가 제거 시 퍼포먼스 좋음 |
| 직렬화 구문분석 제공 여부 | 직렬화와 구문분석 제공(JSON.stringify, JSON.parse) | 제공 X |
# WeakMap
키에 대한 강력한 참조를 생성하지 않는 키/값 쌍의 모음
키는 object만을 허용
객체 정보를 노출하지 않는다 -> 객체의 사적 정보 저장, 상세 구현내용 숨기기 위해서 사용된다
WeakMap 인스턴스 속성 : size
WeakMap 인스턴스 method : get, has, delete, set
# Set
모든 값들의 집합이다
입력된 순서에 따라 저장된 요소를 반복처리할 수 있다
특정 값은 Set 내에서 하나만 존재
배열은 set으로, set은 배열로 변환 가능하다
for ... of 를 통해 순회 가능하다
Set 인스턴스 속성 : size
Set 인스턴스 method : has, clear, delete, add
# WeakSet
객체 컬렉션으로 object 값만 허용한다
약한 참조를 가진다
WeakSet 인스턴스 method : has, delete, add
순환 관련 method 없음
# JSON 객체
인터넷에서 자료를 주고 받을 때 자료를 표현하는 방법
키-값 쌍, 배열 자료형, 기타 모든 직렬화 가능한 값
직렬화란 무엇일까?
다양한 환경 간 데이터를 주고 받기 위해 직렬화 작업이 필요
직렬화 : Object -> 문자열 변환
역직렬화 : 문자열 -> Object로 변환
파일 확장자 : .json
객체의 형태와 유사하다
JSON 정적 method
JSON.stringify : 직렬화
JSON.parse : JSON 형태로 역직렬화 -> 문자열이 객체 형태가 아니면 오류 발생, try... catch문으로 에러를 핸들링하자!
# intl 객체
각 언어에 맞는 문자, 숫자, 시간, 날짜 비교를 제공하는 국제화 API를 위한 namespace
동일한 데이터를 언어나 지역별로 다른 형식으로 보여주기 위
▶ DateTimeFormat 생성자 함수
언어에 맞는 날짜, 시간 서식을 적용하기 위한 객체
인스턴스 method : format, formatRange, formatToParts, formatRangeToParts ...
//intl 객체 DateTimeFormat 생성자 함수
//인스턴스 생성 언어 설정
const dateTimeFormatKo = new Intl.DateTimeFormat("ko");
const example = [
//한국 기준 형식에 맞춘 한국 날짜
dateTimeFormatKo.format(), //'2024. 1. 14.'
//각 부분별로 type과 value로 반환
dateTimeFormatKo.formatToParts()];
// [
{ type: 'year', value: '2024' },
{ type: 'literal', value: '. ' },
{ type: 'month', value: '1' },
{ type: 'literal', value: '. ' },
{ type: 'day', value: '14' },
{ type: 'literal', value: '.' }
]formatRange 함수는 지정된 날짜부터 현재까지의 날짜 범위를 표현한다
▶NumberFormat 생성자 함수
언어에 맞는 숫자 서식을 적용하기 위한 객체
인스턴스 method : format, formatRange, formatToParts, formatRangeToParts ...
// NumberFormat 생성자 함수
const numberFormat = new Intl.NumberFormat("ko", {
//출력할 number의 서식 지정
style: "currency",
currency: "KRW",
});
//KRW 즉 한화로 format되어서 출력
numberFormat.format(100000); // ₩100,000# 프로토타입
# 프로토타입 객체
자바스크립트는 프로토타입 기반 객체지향 언어이다
프로토타입 객체란?
객체의 인스턴스를 만드는 부모 객체의 개념이다
자바스크립트의 모든 객체는 부모 객체인 프로토타입 객체와 연결된다
부모객체의 속성과 메서드를 상속받아 사용 가능하다
▶ 접근하기
__proto__ 라는 접근자 속성으로 접근 가능 -> __proto__ 로 Object.prototype 객체에 접근한다
▶ 생성하기
함수 타입에만 prototype 이라는 필드가 존재한다
함수를 활용하여 부모 객체의 인스턴스를 생성할 수 있다
- 생성자 함수
- 인스턴스 객체 생성시 사용
- 대문자 함수명 컨벤션 사용
- new 키워드와 함께 호출
인스턴스의 부모 객체 == 생성자 함수.prototype
constructor : 자기 자신을 생성한 객체 참조
# 프로토타입 chain과 상속
프로토타입 chain이란?
객체의 속성 참조시, 속성이 없는 경우 프로토타입 체인이 동작한다 -> [[Prototype]] 을 통해서 부모 객체를 탐색
모든 객체의 부모는 Object.prototype이다 -> 프로토타입 체인의 종점
만약 마지막 부모 객체인 Object.prototype에서까지 속성을 찾지 못하면 undefined 가 반환된다
=> 부모 객체를 타고 올라가면서 속성을 탐색하는 것을 프로토타입 chain 이라고 한다!
- 객체와 프로토타입에 동일한 이름의 속성이나 메서드가 있는 경우 -> 객체의 속성이 먼저 참조된다
- property shadowing : 프로토타입 속성이 가려지는 현상
- method overriding : 프로토타입 메서드가 가려지는 현상
# Class 문법
class 메서드명 { ..... }
class 내에는 메서드만 작성 가능하다
인스턴스 생성 -> new 클래스명();
//class의 형태
class Person {
//인스턴스 생성 및 클래스 필드 초기화 (생략 가능)
constructor(name, age, gender) {
//멤버 변수
//인스턴스 속성 초기화
this.name = name;
this.age = age;
this.gender = gender;
}
//static 으로 메서드 작성시 -> 인스턴스를 생성하지 않아도 호출 가능
//get : 속성 조회 및 조작 -> 무조건 값을 반환
get uppercaseName() {
return this.name.toLocaleUpperCase();
}
//set : 속성 할당하며 조작
set plusAge(age) {
this.age += age;
}
get whatIsGender() {
if (this.gender === "female") {
return "여자입니다!";
} else {
return "남자입니다!";
}
}
}
const jinny = new Person("jinny", 100, "female");
console.log(jinny.whatIsGender); // 여자입니다!# 상속 extends
코드의 재사용 관점에서 상속이 필요하다
extends와 super 키워드를 통해 class에서 상속을 구현한다
class 부모클래스 { ..... }
class 자식 extends 부모 { ....}
class Person {
//인스턴스 생성 및 클래스 필드 초기화 (생략 가능)
constructor(name, age, gender) {
//멤버 변수
//인스턴스 속성 초기화
this.name = name;
this.age = age;
this.gender = gender;
}
}
//Person class를 상속 받는 Children class
//상속 extends
class Children extends Person {
constructor(name, age, gender) {
//super : 부모 클래스의 생성자를 호출
// 자식 클래스의 생성자가 this에 접근하고 수정 가능함
super(name);
}
play() {
return this.name + " 는 지금 놀고 있답니다!";
}
}
const child = new Children("jina");
child.play(); // jina 는 지금 놀고 있답니다!
# this 와 화살표 함수
# this란?
현재 실행 중인 코드에서 어떤 객체에 바인딩 되어 있는지를 나타낸다
this 의 값은 실행 컨텍스트에 따라 동적으로 결정된다
1. 전역 컨텍스트
this 는 전역 객체를 가리킨다
객체의 메서드 내에 내부 함수가 있을 경우 함수 호출방식으로 취급되어 전역 객체를 바라본다
2. 함수 호출
this 는 호출 시점에 따라 동적으로 결정
function exampleFunction() {
console.log(this);
}
exampleFunction(); // 전역 객체 (브라우저: window, Node.js: global)
const obj = {
method: exampleFunction,
};
obj.method(); // obj3. 메소드 호출
this 는 그 메소드를 호출한 객체를 가리킨다
const myObject = {
myMethod: function() {
console.log(this);
},
};
myObject.myMethod(); // myObject4. 생성자 함수
this 는 생성된 인스턴스를 가리킨다
function MyClass() {
this.property = "example";
}
const myInstance = new MyClass();
console.log(myInstance.property); // example5. 이벤트 핸들러
this 는 이벤트를 발생시킨 요소를 가리킨다
document.getElementById("myButton").addEventListener("click", function() {
console.log(this); // 클릭된 버튼 요소
});6. 화살표 함수
ES6 부터 화살표 함수 사용
익명함수 형태
(인자들) => { .... }
this 는 함수가 생성된 시점에서의 상위 스코프의 this를 따른다 -> 정적 바인딩
const arrowFunction = () => {
console.log(this);
};
arrowFunction(); // 전역 객체 (화살표 함수는 정적으로 바인딩되므로 상위 스코프의 this를 따름)# 새로 알게 된 점
이번 데이터 처리 객체와 빌트인 객체 그리고 매커니즘 파트가 끝이 났다
양도 많고 처음 배우는 개념이 많아서 이해하는 데 시간이 오래 걸렸다
그렇다고 완벽히 이해된 것도 아니라 반복해서 복습이 필수인 것 같다
이번 강의에서 가장 기억에 남는 개념은 Class 문법이었다
Class 를 만들어보고 자식 Class에 상속하는 코드를 구성하면서 Class 문법에 대해 이해할 수 있었다
또한 Class 간에 속성을 상속하고 메서드를 호출하는 과정이 신기했다
프로토타입 chain의 개념 역시 이번 강의를 통해서 확실하게 배우게 되었다
헷갈리는 개념들은 이해가 될 때까지 다시 공부를 해야겠다
'TIL > 프로그래머스 데브코스' 카테고리의 다른 글
| 클라우딩 어플리케이션 엔지니어링 TIL Day 13 - 가계부 구현하기 (0) | 2024.01.17 |
|---|---|
| 클라우딩 어플리케이션 엔지니어링 TIL Day 12 - 가계부 구현하기 요구사항 분석 및 기본 세팅 (1) | 2024.01.16 |
| 클라우딩 어플리케이션 엔지니어링 TIL Day 11 (1) (2) | 2024.01.12 |
| 클라우딩 어플리케이션 엔지니어링 TIL Day 9 (1) | 2024.01.11 |
| 클라우딩 어플리케이션 엔지니어링 TIL Day 10 (2) (1) | 2024.01.08 |
# 객체
# 문자열
문자열 내에 이스케이프 문자 사용 가능
줄바꿈 문장 표현 가능 -> 이스케이프 문자(\n), 템플릿 리터럴(백틱 `)
데이터 보관시 문자열 형태로 저장 유용 -> 텍스트 형태, 객체 형태(JSON.stringify)
# 문자열 조작
▶문자열 요소 접근
charAt
유사 배열이라 배열처럼 접근
const aaa = "가나다라마바사";
console.log(aaa.charAt(3)); //라
console.log(aaa[3]) //라▶ 문자열 비교
알파벳순을 비교하여 순서가 뒤에 올수록 크다고 판단
//알파벳 순서로 크기 비교
const abc = "abc";
const def = "def";
console.log(abc < def); //true변수 또는 객체의 속성이 문자열을 가지고 있으면 String 인스턴스 속성과 메서드 사용 가능하다
# String 객체
문자열을 다룰 때 사용하는 원시 래퍼 빌트인 객체
함수로 바로 사용
▶ 인스턴스 메서드
문자열 접근 및 찾기
const aaa = "가나다라마바사";
//접근 및 비교
const exam = [aaa.at(0), // 가
aaa.charAt(0), // 가
aaa.indexOf("라"), // 3
aaa.search("카")]; // -1문자열 포함 여부
const aaa = "가나다라마바사";
//문자열 포함 여부
const exam = [aaa.includes("바"), //true
aaa.startsWith("나"), //false
aaa.match("가")]; //["가"]문자열 비교
const aaa = "가나다라마바사";
const bbb = "안녕하세요";
//문자열 비교
const exam = [aaa.localeCompare(bbb)];문자열 변경
//문자열 변경
const changeString = [
"abcdef".toLocaleUpperCase(), //ABCDEF
"ABCDEF".toLocaleLowerCase(), //abcdef
"hello".replace("h", "H"), //Hello
"hello".replace("l", "L"), //heLlo
"hello".replaceAll("l", "L"), //heLLo
];문자열 추가 및 합치기
//문자열 추가 및 합치기
const addString = [
//길이 length 값 , 빈 length에 채울 값
"abcdef".padStart(10, "1"), // '1111abcdef'
"ABCDEF".padEnd(10, "k"), //'ABCDEFkkkk'
//문자열 반복
"hello".repeat(2), // 'hellohello'
//문자열 합치기
"hello".concat(" nice to meet you!"), // 'hellonice to meet you!'
"hello" + " nice to meet you!", // 'hellonice to meet you!'
];문자열 분리하기
//문자열 분리하기
const partString = [
//5번째 인덱스부터 마지막까지 자르기
"abcdef".slice(4),
//2번째 인덱스부터 4번째 인덱스까지 자르기
"abcdef".slice(1, 4),
"abcdef".substring(4),
"abcdef".substring(1, 4),
//배열로 변경
"abcdef".split(),
//공백 제거
" abc ".trim(),
];
# 정규표현식
문자열에서 특정 문자 조합을 찾기 위한 패턴
/pattern/flags
정규표현식 생성 방법
1. 리터럴 표기법
평가할 때 정규 표현식을 컴파일
정규식이 변하지 않으면 리터럴 표기법을 사용하자
/pattern/flag
2. RegExp 객체
런타임 때 컴파일
패턴이 변할 가능성이 있거나, 알 수 없는 데이터에서 가져오는 정규식의 경우 생성자 함수 사용하자
new RegExp(/pattern/, flag)
▶정적 속성 : lastIndex
▶생성자 함수 : RegExp.prototype
▶인스턴스 속성 : flags, dotAll, global, ignoreCase, multiline, source, sticky, unicode
▶ 인스턴스 method : compile(), exec(), test(), toString()
//RegExp 객체
const str = "abcdef";
const regex = /a/g;
const exam = [
//일치 확인
str.match(regex),
//찾기
str.search(regex),
//찾아서 교체
str.replace(regex),
//찾아서 분리
str.split(regex),
];# Collection
비용을 절감하기 위하여 상황마다 효율적인 데이터 형태로 처리하는 것이 필요하다
컬렉션은 데이터 항목의 그룹을 의미한다 -> list, set, tree, graph
자바스크립트 Collection의 2가지 타입
# Indexed Collections
인덱스 값을 기준으로 정렬되어 있는 데이터 집합
Array
이름과 인덱스로 참조외더 정렬된 값들의 잡합이다
자바스크립트는 명시적인 배열 데이터 타입을 가지고 있지 않다
Array 객체 생성방법
배열 리터럴 : 대괄호로 묶기 []
Array 객체 생성자 : new Array(arrayLength); 길이만 지정된 배열, new Array(ele0, ele1, ...); 요소만 지정된 배열
//Array 객체
//길이만 지정해서 배열 생성
new Array(23);
//요소만 지정해서 배열 생성
new Array("hi", "hello");Array 객체 특징
배열 요소의 참조
- index로 참조, 0부터 시작
- index값을 속성 이름으로 사용하여 표준 객체의 속성처럼 저장
- index로 문자열 사용 불가능, 무조건 정수로만 참조하여 저장
배열에 값 저장
- index로 참조하지 않으면 객체의 속성으로 저장됨
배열의 반복 처리 시 -> for문. forEach문 활용
# Keyed Collections
Key 값을 기준으로 정렬되어 있는 데이터 집합
Map, Set
키와 값을 매핑하여 저장한다
저장된 순서대로 각 요소들을 반복적으로 접근할 수 있다
# Map 객체
간단한 키와 값을 서로 매핑시켜 저장하고 저장된 순서대로 요소를 반복적으로 접근
[key, value]
Map 인스턴스 속성 : size
Map 인스턴스 method : get, has, clear, delete, set, keys, values, entries, forEach
# Map과 Object는 어떤 차이가 있을까?
| Object | Map | |
| 속성의 데이터 타입 | String, Symbol만 가능 | 모든 값을 키로 활용 가능 |
| default 속성과의 충돌 | Object prototype의 기본속성과 동일한 키를 생성시 충돌 | 기본적으로 갖고 있는 속성이 없어 기본 속성들과 충돌 없음 |
| 객체의 크기 | 수동으로 추적 | size 인스턴스 속성으로 얻을 수 있음 |
| 순서 보장 | 순서 보장 X | 추가된 순서대로 반복 |
| iterable 여부 | iterable X | iterable |
| 퍼포먼스 | 키, 값 쌍의 빈번한 추가 제거 시 퍼포먼스 좋지 않음 | 키, 값 쌍의 빈번한 추가 제거 시 퍼포먼스 좋음 |
| 직렬화 구문분석 제공 여부 | 직렬화와 구문분석 제공(JSON.stringify, JSON.parse) | 제공 X |
# WeakMap
키에 대한 강력한 참조를 생성하지 않는 키/값 쌍의 모음
키는 object만을 허용
객체 정보를 노출하지 않는다 -> 객체의 사적 정보 저장, 상세 구현내용 숨기기 위해서 사용된다
WeakMap 인스턴스 속성 : size
WeakMap 인스턴스 method : get, has, delete, set
# Set
모든 값들의 집합이다
입력된 순서에 따라 저장된 요소를 반복처리할 수 있다
특정 값은 Set 내에서 하나만 존재
배열은 set으로, set은 배열로 변환 가능하다
for ... of 를 통해 순회 가능하다
Set 인스턴스 속성 : size
Set 인스턴스 method : has, clear, delete, add
# WeakSet
객체 컬렉션으로 object 값만 허용한다
약한 참조를 가진다
WeakSet 인스턴스 method : has, delete, add
순환 관련 method 없음
# JSON 객체
인터넷에서 자료를 주고 받을 때 자료를 표현하는 방법
키-값 쌍, 배열 자료형, 기타 모든 직렬화 가능한 값
직렬화란 무엇일까?
다양한 환경 간 데이터를 주고 받기 위해 직렬화 작업이 필요
직렬화 : Object -> 문자열 변환
역직렬화 : 문자열 -> Object로 변환
파일 확장자 : .json
객체의 형태와 유사하다
JSON 정적 method
JSON.stringify : 직렬화
JSON.parse : JSON 형태로 역직렬화 -> 문자열이 객체 형태가 아니면 오류 발생, try... catch문으로 에러를 핸들링하자!
# intl 객체
각 언어에 맞는 문자, 숫자, 시간, 날짜 비교를 제공하는 국제화 API를 위한 namespace
동일한 데이터를 언어나 지역별로 다른 형식으로 보여주기 위
▶ DateTimeFormat 생성자 함수
언어에 맞는 날짜, 시간 서식을 적용하기 위한 객체
인스턴스 method : format, formatRange, formatToParts, formatRangeToParts ...
//intl 객체 DateTimeFormat 생성자 함수
//인스턴스 생성 언어 설정
const dateTimeFormatKo = new Intl.DateTimeFormat("ko");
const example = [
//한국 기준 형식에 맞춘 한국 날짜
dateTimeFormatKo.format(), //'2024. 1. 14.'
//각 부분별로 type과 value로 반환
dateTimeFormatKo.formatToParts()];
// [
{ type: 'year', value: '2024' },
{ type: 'literal', value: '. ' },
{ type: 'month', value: '1' },
{ type: 'literal', value: '. ' },
{ type: 'day', value: '14' },
{ type: 'literal', value: '.' }
]formatRange 함수는 지정된 날짜부터 현재까지의 날짜 범위를 표현한다
▶NumberFormat 생성자 함수
언어에 맞는 숫자 서식을 적용하기 위한 객체
인스턴스 method : format, formatRange, formatToParts, formatRangeToParts ...
// NumberFormat 생성자 함수
const numberFormat = new Intl.NumberFormat("ko", {
//출력할 number의 서식 지정
style: "currency",
currency: "KRW",
});
//KRW 즉 한화로 format되어서 출력
numberFormat.format(100000); // ₩100,000# 프로토타입
# 프로토타입 객체
자바스크립트는 프로토타입 기반 객체지향 언어이다
프로토타입 객체란?
객체의 인스턴스를 만드는 부모 객체의 개념이다
자바스크립트의 모든 객체는 부모 객체인 프로토타입 객체와 연결된다
부모객체의 속성과 메서드를 상속받아 사용 가능하다
▶ 접근하기
__proto__ 라는 접근자 속성으로 접근 가능 -> __proto__ 로 Object.prototype 객체에 접근한다
▶ 생성하기
함수 타입에만 prototype 이라는 필드가 존재한다
함수를 활용하여 부모 객체의 인스턴스를 생성할 수 있다
- 생성자 함수
- 인스턴스 객체 생성시 사용
- 대문자 함수명 컨벤션 사용
- new 키워드와 함께 호출
인스턴스의 부모 객체 == 생성자 함수.prototype
constructor : 자기 자신을 생성한 객체 참조
# 프로토타입 chain과 상속
프로토타입 chain이란?
객체의 속성 참조시, 속성이 없는 경우 프로토타입 체인이 동작한다 -> [[Prototype]] 을 통해서 부모 객체를 탐색
모든 객체의 부모는 Object.prototype이다 -> 프로토타입 체인의 종점
만약 마지막 부모 객체인 Object.prototype에서까지 속성을 찾지 못하면 undefined 가 반환된다
=> 부모 객체를 타고 올라가면서 속성을 탐색하는 것을 프로토타입 chain 이라고 한다!
- 객체와 프로토타입에 동일한 이름의 속성이나 메서드가 있는 경우 -> 객체의 속성이 먼저 참조된다
- property shadowing : 프로토타입 속성이 가려지는 현상
- method overriding : 프로토타입 메서드가 가려지는 현상
# Class 문법
class 메서드명 { ..... }
class 내에는 메서드만 작성 가능하다
인스턴스 생성 -> new 클래스명();
//class의 형태
class Person {
//인스턴스 생성 및 클래스 필드 초기화 (생략 가능)
constructor(name, age, gender) {
//멤버 변수
//인스턴스 속성 초기화
this.name = name;
this.age = age;
this.gender = gender;
}
//static 으로 메서드 작성시 -> 인스턴스를 생성하지 않아도 호출 가능
//get : 속성 조회 및 조작 -> 무조건 값을 반환
get uppercaseName() {
return this.name.toLocaleUpperCase();
}
//set : 속성 할당하며 조작
set plusAge(age) {
this.age += age;
}
get whatIsGender() {
if (this.gender === "female") {
return "여자입니다!";
} else {
return "남자입니다!";
}
}
}
const jinny = new Person("jinny", 100, "female");
console.log(jinny.whatIsGender); // 여자입니다!# 상속 extends
코드의 재사용 관점에서 상속이 필요하다
extends와 super 키워드를 통해 class에서 상속을 구현한다
class 부모클래스 { ..... }
class 자식 extends 부모 { ....}
class Person {
//인스턴스 생성 및 클래스 필드 초기화 (생략 가능)
constructor(name, age, gender) {
//멤버 변수
//인스턴스 속성 초기화
this.name = name;
this.age = age;
this.gender = gender;
}
}
//Person class를 상속 받는 Children class
//상속 extends
class Children extends Person {
constructor(name, age, gender) {
//super : 부모 클래스의 생성자를 호출
// 자식 클래스의 생성자가 this에 접근하고 수정 가능함
super(name);
}
play() {
return this.name + " 는 지금 놀고 있답니다!";
}
}
const child = new Children("jina");
child.play(); // jina 는 지금 놀고 있답니다!
# this 와 화살표 함수
# this란?
현재 실행 중인 코드에서 어떤 객체에 바인딩 되어 있는지를 나타낸다
this 의 값은 실행 컨텍스트에 따라 동적으로 결정된다
1. 전역 컨텍스트
this 는 전역 객체를 가리킨다
객체의 메서드 내에 내부 함수가 있을 경우 함수 호출방식으로 취급되어 전역 객체를 바라본다
2. 함수 호출
this 는 호출 시점에 따라 동적으로 결정
function exampleFunction() {
console.log(this);
}
exampleFunction(); // 전역 객체 (브라우저: window, Node.js: global)
const obj = {
method: exampleFunction,
};
obj.method(); // obj3. 메소드 호출
this 는 그 메소드를 호출한 객체를 가리킨다
const myObject = {
myMethod: function() {
console.log(this);
},
};
myObject.myMethod(); // myObject4. 생성자 함수
this 는 생성된 인스턴스를 가리킨다
function MyClass() {
this.property = "example";
}
const myInstance = new MyClass();
console.log(myInstance.property); // example5. 이벤트 핸들러
this 는 이벤트를 발생시킨 요소를 가리킨다
document.getElementById("myButton").addEventListener("click", function() {
console.log(this); // 클릭된 버튼 요소
});6. 화살표 함수
ES6 부터 화살표 함수 사용
익명함수 형태
(인자들) => { .... }
this 는 함수가 생성된 시점에서의 상위 스코프의 this를 따른다 -> 정적 바인딩
const arrowFunction = () => {
console.log(this);
};
arrowFunction(); // 전역 객체 (화살표 함수는 정적으로 바인딩되므로 상위 스코프의 this를 따름)# 새로 알게 된 점
이번 데이터 처리 객체와 빌트인 객체 그리고 매커니즘 파트가 끝이 났다
양도 많고 처음 배우는 개념이 많아서 이해하는 데 시간이 오래 걸렸다
그렇다고 완벽히 이해된 것도 아니라 반복해서 복습이 필수인 것 같다
이번 강의에서 가장 기억에 남는 개념은 Class 문법이었다
Class 를 만들어보고 자식 Class에 상속하는 코드를 구성하면서 Class 문법에 대해 이해할 수 있었다
또한 Class 간에 속성을 상속하고 메서드를 호출하는 과정이 신기했다
프로토타입 chain의 개념 역시 이번 강의를 통해서 확실하게 배우게 되었다
헷갈리는 개념들은 이해가 될 때까지 다시 공부를 해야겠다
'TIL > 프로그래머스 데브코스' 카테고리의 다른 글
| 클라우딩 어플리케이션 엔지니어링 TIL Day 13 - 가계부 구현하기 (0) | 2024.01.17 |
|---|---|
| 클라우딩 어플리케이션 엔지니어링 TIL Day 12 - 가계부 구현하기 요구사항 분석 및 기본 세팅 (1) | 2024.01.16 |
| 클라우딩 어플리케이션 엔지니어링 TIL Day 11 (1) (2) | 2024.01.12 |
| 클라우딩 어플리케이션 엔지니어링 TIL Day 9 (1) | 2024.01.11 |
| 클라우딩 어플리케이션 엔지니어링 TIL Day 10 (2) (1) | 2024.01.08 |
