Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- relative
- React
- javascipt
- react-hook-form
- scope
- box-shadow
- className
- Grid
- css#cascading#display#block#inline
- javascript
- var
- grid-column-start
- localStorage
- gird-row-end
- grid-template-areas
- confirm()
- grid-row-start
- createElement
- classList
- package.json
- grid-column-end
- foreach()
- valuable
- collapsing-margins
- border-style
- variables
- prompt()
- python #qqplot #qq-plot #code
- CSS
- mongodb
Archives
- Today
- Total
data life
[JavaScript] 최신 JavaScript 기능 (2024) 본문
1. 프라이빗 클래스 필드와 메소드
- 객체 지향 프로그래밍에서 중요한 역할을 합니다.
- 다른 사람이 작성한 함수를 사용할 시, 프라이빗해야 하는 문제를 해결해줍니다.
class MyClass {
#privateMethod() {
console.log("This is a private method.");
}
publicMethod() {
console.log("This is a public method.");
this.#privateMethod(); // 클래스 내부에서만 호출 가능
}
}
const instance = new MyClass();
instance.publicMethod(); // "This is a public method." 출력
// 아래 코드는 문법 오류입니다. 클래스 외부에서 호출할 수 없습니다.
// instance.#privateMethod();
2. at() 함수
- 배열의 음수 인덱스를 사용하여 마지막 항목에 엑세스하도록 도와주는 함수입니다.
const arrs = [1, 2, 3];
const arr = arrs.ar(-1);
const arr = arrs[arrs.length - 1]; // 기존방식
3. toReversed(), toSorted(), with(), toSpliced()
- reverse(), sort(), splice() 함수들은 이미 익숙하도록 사용하고 있지만 배열을 변경한다는 점에서 불편함을 느꼈을 수 있습니다. 위의 함수들은 배열을 수정하지 않고 수정된 복사본을 반환하므로 복사를 만들 필요가 없어졌습니다.
const months = ["Mar", "Jan", "Feb", "Dec"];
const sortedMonths = months.toSorted();
console.log(sortedMonths); // ['Dec', 'Feb', 'Jan', 'Mar']
console.log(months); // ['Mar', 'Jan', 'Feb', 'Dec']
const months = ["Jan", "Mar", "Apr", "May"];
const months2 = months.toSpliced(1, 0, "Feb");
console.log(months2); // ["Jan", "Feb", "Mar", "Apr", "May"]
console.log(months); // ["Jan", "Mar", "Apr", "May"]
const items = [1, 2, 3];
const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]
const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]
4. Object.prototype.hasOwnProperty()
- 객체가 특정 속성을 자체 속성으로 갖고있는지 여부를 확인하는 데 사용됩니다.
- 객체의 직접적인 속성만 확인하며, 존재하면 true, 상속된 속성이거나 전혀 선언되지 않은 속성이면 false를 반환
const myObject = {
name: "John",
age: 30
};
console.log(myObject.hasOwnProperty("name")); // true
console.log(myObject.hasOwnProperty("gender")); // false
주의할 점으로는 객체 생성의 근원지를 장담할 수 없을 경우엔 다음과 같이 사용해야합니다.
Object.prototype.hasOwnProperty.call(myObject, 'name');
'Front-end > JavaScript' 카테고리의 다른 글
[JavaScript] AOS - Animate On Scroll 사용하기 (1) | 2023.10.22 |
---|---|
[네트워크] 웹페이지를 보기까지의 과정 (0) | 2023.10.22 |
[JavaScript] flat()과 flatMap() 함수 알아보기 (0) | 2023.09.13 |
[JavaScript] 프로토타입 (0) | 2023.03.10 |
[JavaScript] Fetch (0) | 2023.03.10 |