본문 바로가기

Frontend146

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.
JavaScript 내장함수 : 숫자 관련 내장함수 숫자 확인 함수함수명설명isFinite()해당하는 값이 유한한 값인지 확인한다. true - 유한한 값 / false - 무한한 값isNaN()해당하는 값이 NaN(Not a Number)인지 확인한다. Number.isInteger() 해당하는 값이 정수인지 확인한다. 숫자 변환 함수함수명설명parseInt(string, 진법)string을 진법에 맞게 숫자로 변환시킨다. (진법: 2, 8, 10, 16)parseFloat(string)string을 유리수로 바꿔준다. 진수리터럴진수리터럴설명0b | 0B2진수 표기법0o | 0O8진수 표기법 Math 관련 함수 및 프로퍼티Math 관련 함수함수명설명Math.abs()절대값을 반환한다.Math.round()소수점 이하를 반올림한 정수를 반환한다. Math.. 2024. 8. 4.

티스토리툴바