본문 바로가기

Frontend/JavaScript55

JavaScript 내장함수 : Object관련 내장함수 Object는 참조형 타입을 생성할 때  객체 간의 상속에서 가장 최상위에 위치하는 객체이다. 참조형 타입의 경우 Object을 상속받아 Object의 다양한 속성들을 사용할 수 있다. 속성설명객체.hasOwnProperty(속성)객체의 속성이 상속받지 않은 속성인지 알려준다, 자신의 속성이면 true반환객체.isPrototypeOf(대상)객체가 대상의 조상인지 알려준다, 조상이면 true반환Object.getPrototypeOf(객체)객체의 prototype을 조회할 수 있다.Object.setPrototypeOf(객체, 상위 객체)객체의 prototype을 설정할 수 있다. 객체 instanceof 생성자객체가 특정 생성자의 자식인지 조회할 수 있다.객체.propertyIsEnumerable(속성)객.. 2024. 8. 10.
JavaScript : Symbol에 대해서 알아보자 Symbol은 생성자가 기본형 값을 반환하는 내장 객체이다. Symbol의 값은 변경 불가능한 기본값(primitive value)이며 고유한 값이기 때문에 충돌하지 않도록 할 때 많이 쓰인다. Symbol();Symbol의 경우 매번 호출할 때마다 새로운 고유한 값을 생성하기 때문에, 객체의 속성 key로 사용하여 충돌하지 않게 하는 등의 역할을 한다.   Symbol의 경우 숫자로 변환하거나 문자열을 추가하는 등의 값을 변경할 수 없으며 for~in 문에서 Symbol key를 가지고 있는 경우 열거되지 않는다. 2024. 8. 6.
JavaScript : 사용자 지정 데이터 특성(dataset)을 이용해보자 HTML에서 사용자 지정 데이터 특성 (data-*) HTML5부터 추가된 내용으로 HTML 태그 내에 'data-'로 시작하는 속성을 설정해서, 사용자 지정 데이터 특성이라는 특정 클래스를 형성할 수 있다. 임의의 데이터를 스크립트로 HTML와 DOM 사이에서 교환할 수 있다. data-속성명 : "속성값" 모든 html element에서 사용이 가능하며, 모든 문자열은 속성의 값이 될 수 있다.  아래 예시처럼 태그에 data-속성명을 통해서 값을 저장할 수 있고, 해당 값의 경우에는 DOM이 생성될 때 "data-"로 시작하는 속성들을 하나로 모아서 "dataset"으로 따로 모아서 관리하게 된다. JavaScript에서는 속성명을 camelCase로 변환한다. bg-color가 bgCo.. 2024. 8. 5.
JavaScript : 구조분해할당(Distructuring)에 대해 알아보자 구조분해할당이란 배열이나 객체의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 하는 표현식을 얘기한다. 객체나 배열에서 데이터 전체가 아닌 일부분만 필요한 경우가 생기는데, 이럴 때 일부분만 '분해'할 수 있도록 하는 표현식이다. Array 구조분해할당let [item1, item2=default, ..., rest] = array구조분해할당이 나오기 이전에는 일부분의 데이터를 추출하기 위하여 배열의 index를 사용해 값을 추출하여 사용하거나, 변수를 교환하기 위해서는 임시 변수가 필요했었다. 구조분해할당을 통해서 이러한 점들을 간편하게 할 수 있게 되었다.array의 첫번째, 두번째 요소는 각각 item1과 item2에 저장되고 array의 2번째 요소가 값이 없을 경우 default param.. 2024. 8. 5.
JavaScript : Array관련 내장함수 이전에 배열의 제어에 대해서 공부했었다. 이 기존 Array 객체에서 ES6 버전에서 추가된 함수들에 대해 다뤄보고자 한다.함수설명filter(함수)주어진 필터링 값이 참인 경우의 배열 요소들만으로 새로운 배열을 생성한다.find(함수)주어진 요구조건을 만족하는  첫 번째 요소를 반환한다. 없으면 undefinedfindIndex(함수)주어진 요구조건을 만족하는 배열의 첫번째 요소에 대한 인덱스를 반환한다. 없으면 -1forEach(함수)배열의 각각 요소를 순회하며 함수를 호출한다.keys()length의 속성을 읽은 다음 0 ~ length-1의 정수를 Array Iterator 을 반환한다.map(함수)배열 내의 모든 요소 각각에 대하여 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환한다.re.. 2024. 8. 4.
JavaScript 내장함수 : String관련 내장함수 String 객체는 문자열을 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 변수 또는 객체 프로퍼티가 문자열 값을 가지고 있으면 별도의 생성 없이 String 객체의 프로퍼티와 메서드를 사용할 수 있다.  메서드설명charAt()지정한 위치의 문자가 무엇인지 알 수 있다.codePointAt()지정한 위치의 문자를 유니코드로 변환한다.fromCodePoint()유니코드를 문자로 변환한다.indexOf()지정한 문자열의 첫 번째 인덱스 위치를 알아낸다.lastIndexOf()지정한 문자열의 마지막 인덱스 위치를 알아낸다slice()매개변수에 맞게 문자열을 추출한다. 첫번째 인수로 전달한 인덱스에 해당하는 문자부터 두번째 인수에 전달된 인덱스에 해당하는 문자 이전까지의 문자를 반환한다.substring()r.. 2024. 8. 4.

티스토리툴바