this
객체에서 화살표 함수가 아닌 메서드를 추가하였을 경우 메서드 내에서 this가 가르키는 것은 메서드를 감싸는 객체이다.
const obj = {
name: 'ho',
age: 24,
func() {
console.log(this) // obj객체를 가르킨다. this.name 일 경우 ho출력.
}
}
obj.func();
참고로 객체 내에서 메서드(함수) func() {} = func: funciton() {}과 같다.
만약 화살표 함수일 경우?
const obj1 = {
name: 'ho',
age: 24,
func: () => {
console.log(this) // this는 window를 가르킨다.
}
}
obj1.func();
즉 obj1객체에 한번 감싸진 함수가 아닌 객체 프로퍼티 일부로 취급되어
this는 obj1객체를 감싸는 전역객체 window객체를 가르킨다.옵셔널 체이닝
최근에 추가된 문법으로 일부 브라우저에서 사용하기 위해서는 폴리필해줘야한다.
API를 받아오는 과정에서 로딩시간이 있기 때문에 받아온 객체를 활용하기 위해서는 안전 장치가 필요했다. 예로
const obj = {}
console.log(obj && obj.top && obj.top.font)
이런식으로 객체의 존재여부에 안전장치를 걸어놓고 사용하는 경우가 많았다.
이것을 간단하게 해주는게 옵셔널 체이닝인데 사용방법은
console.log(obj?.top?.font)
이런식으로 사용할 수 있다. ?앞에 프로퍼티가 존재하지 않으면
undefined를 출력하여 오류를 피할 수 있다.
만약 안에 메서드가 있는 경우라면
obj?.top?.func?.()
이런식으로 사용하면 된다.
래퍼객체
원시값에서도 메서드를 사용할 수 있게 하는 일시적인 객체.
메서드는 객체내에서 선언할 수 있지만 문자열에서도 메서드를 사용하는 경우들이 있다 예를들어
const str = 'hello'
str.toUpperCase() // HELLO 출력이외에도 slice 등 자바스크립트에 내장된 메서드들이 많은데 이것들을 사용 할 수 있게 해주는 것이 래퍼객체이다. 메서드를 선언하면 일시적으로 원시값을 객체로 만들고 메서드를 실행하여 처리한뒤 객체는 사라진다.
숫자형 관련 메서드
123..toString(진수) 숫자를 원하는 진수로 바꿔준다.
소수점을 구분하기 위해 온점을 두개찍어줘야한다.
isNaN(인수) : 인수를 숫자형으로 변환하였을 때 NaN이면 true반환.
isFinite(인수) : 인수를 숫자형으로 변환하였을 때
NaN, Infinite, -Infinite 이면 false 반환
*빈 문자열('')의 경우 숫자형은 0이므로 주의.
Object.is(a,b) (a === b)인지 검증 같으면 true반환
* NaN === NaN 일반적으로는 false, Object.is(NaN === NaN) true;
parseInt(value,진수) : 숫자 또는 숫자로 시작하는 문자형을 정수부분만 반환한다.
2번째 인자는 기입한 문자형 숫자가 몇진수인지를 나타내며 10진수로 변환해서 반환.
ex) parseInt('123.35px',10) => 123
*10진수일 경우 두번째 인자 생략가능.
parseFloat(value) : 부동소수점까지 실수로 반환.문자형 관련 메서드
\n: 문자열 내에서 줄바꿈 기능
\': 문자열 내에서 따옴표
\\: 문자열 내에서 \
특수문자는 length를 1차지 한다. ex) 'ab\n'.length // 3
for (let i of 'hello') { // 문자 반복문
console.log(i) // h, e, l, l, o
}
str.indexOf(subStr, pos) : 부분 문자열찾기로 문자열 내에서 pos 이후 부분부터
subStr을 찾아 index를 반환
* index는 0부터 계산해서 반환하며 pos 이후부터 계산한 값이 아님.
str.includes(subStr, pos) : pos이후로 str에 subStr 찾아서 존재하면 true반환
str.startsWith(subStr) : str이 subStr로 시작하는지 확인
str.endsWith(subStr) : str이 subStr로 끝나는지 확인
str.slice(start, end) : str을 start에서 end-1 index까지 잘라내어 반환.
*start, end값 음수가능 음수일경우 뒤에서부터 찾으며
endindex부터 start-end 길이 까지 잘라내어 반환.
str.repeat(n) : 문자열 n번 반복.
str.charAt(index) : index에 해당하는 문자열 반환.
str.concat(str1,str2, ..) : 문자열 합치기
str.padEnd(targetLength,str1) : str의 길이가 targetLength가 되도록
str1을 str의 우측에서부터 반복해서 채워넣음.
str.padStart(targetLength,str1) : 좌측에서부터 채워넣음
str.search(regExp) : 정규표현식에 대응하는 문자열의 인덱스 반환
str.trim() : 문자열 양 끝 공백제거
