본문 바로가기

Frontend145

JavaScript의 class를 사용해보자 클래스(Class)원래 JavaScript에서는 생성자 함수라는 방식을 통해서 객체를 생성했었다. 생성자 함수의 경우 유지보수나 상속에 어려움이 있었다. 이러한 점을 개선하기 위해 ECMA2015부터 class 개념이 등장한다. class의 경우에는 함수선언식과 다르게 호이스팅이 되지 않아 클래스를 반드시 정의한 후에 사용할 수 있다. class 클래스이름 {   멤버변수;   메서드명(){};}let | const 인스턴스이름 = new 클래스이름(); Propertyclass내에서는 property(객체가 지닌 속성 / 변수 등)를 설정하는 것이 가능하다.  class내에 직접 선언하거나, 메서드 내에서 this를 통해 property를 바인딩하는 방법이 있다. class내에서는 글로벌 함수로의 th.. 2024. 7. 30.
JavaScript 프로토타입(prototype)과 생성자 함수 JavaScript는 흔히 프로토타입 기반 언어라고 불린다. 프로토타입이란 객체 간의 상속을 구현하기 위해 사용된다. 부모 객체 역할을 하는 객체로부터 메서드와 속성들을 상속받기 위해 프로토타입 객체를 갖게 된다. 더보기  기본형과 참조형을 선언하고 console.dir()을 사용하여 요소를 출력하면 위와 같이 참조형의 경우에만 프로토타입을 갖는 것을 알 수 있다. 기본형의 경우에는 상속받을 메서드와 속성이 없기 때문에 프로토타입을 가지고 있지 않는다. 모든 참조형의 경우 프로토타입을 갖고 있으며, 상속되는 속성과 메서드들이 객체의 생성자의 prototype에 정의되어 있다. 참조형의 프로토타입은 최종적으로 Object이다.  프로토타입 프로퍼티(Prototype) 프로토타입 프로퍼티란 Object.. 2024. 7. 30.
JavaScript 콜백함수란? 콜백 함수는 전달인자로 다른 함수에 전달되는 함수를 뜻한다.  함수의 파라미터로 다른 함수를 받아서 내부에서 그 함수를 호출할 수 있다. function 변수명(콜백함수명) { 콜백함수명(); }자바스크립트의 경우 코드를 위에서 아래로 순차적으로 시행하지만, 종종 순차적으로 실행되지 않고 코드의 실행이 끝나기 전에 다음 코드로 넘어가는 일이 발생한다. 이것을 비동기처리라고 하는데, 콜백함수의 경우 주로 이 비동기처리에 사용된다. 예를 들어 대표적인 비동기 함수인 setTimeout()경우 코드의 실행이 끝날 때까지 기다리지 않고 바로 다음 코드로 넘어간다. 아래 예제의 경우 변수를 선언하고, 3초뒤에 변수에 증감연산자를 시행하는 setTimeout()을 설정하고 이후 변수를 console.log로 호출하.. 2024. 7. 29.
JavaScript : sort()와 localeCompare()을 이용해 정렬해보자 sort().sort(비교함수)sort() 메서드는 배열의 요소를 정렬하여 배열을 반환한다. 비교함수를 작성하지 않으면 기본 정렬 순서는 문자열의 유니코드를 따른다. localeCompare()참조문자열.localeCompare(비교문자열);localeCompare() 메서드는 참조 문자열이 지정된 문자열 앞 혹은 뒤에 오는지, 동일한 문자열인지를 나타내는 수치를 반환한다. 비교문자열 전에 참조문자열이 오면 음수, 비교문자열 뒤에 참조문자열이 오면 양수, 동등한 경우 0을 반환한다.  sort와 localeCompare 사용한 테이블 정렬아래 예시에서 오름차순이 아니라 내림차순으로 설정하고 싶다면, b를 참조문자열, a를 비교문자열로 설정하면 된다.See the Pen Untitled by cod.. 2024. 7. 29.
JavaScript의 특징: 스코프와 실행 컨텍스트 스코프(Scope)영어 단어로 scope는 '범위'라는 뜻이다. JavaScript에서는 코드 내에서 식별자(변수, 함수명과 같이 어떤 대상을 다른 대상과 구분하여 식별이 가능한 이름)를 찾아내기 위한 규칙으로, 식별자에 접근할 수 있는 유효범위를 의미한다. 모든 스코프는 하나의 계층 구조로 연결되어 최상위의 전역 스코프와 연결된다. JavaScript의 스코프 종류는 다음과 같다.전역 스코프 코드의 최상위 범위로 프로그램 전체에 접근하여 사용이 가능하다. 하지만 전역 스코프가 많아질수록 브라우저가 무거워지기 때문에 전역 스코프 사용을 최소화하는 것이 좋다.지역 스코프  함수 또는 특정 코드 블록 내에서만 접근해서 사용할 수 있다. 해당 스코프와 하위 스코프에서만 참조가 가능하며, 외부에서는 접근 할 .. 2024. 7. 29.
JavaScript : DOM에서 class를 설정해보자 classListclassList는 CSS의 클래스 목록에 접근하여 지정한 클래스를 추가, 제거 등의 기능을 할 수 있다. 인라인형식의 스타일의 경우 다른 디자인을 설정하기 어렵지만, 클래스를 통해 지정하는 경우에는 이벤트에 따라 클래스를 추가, 제거 하는 등의 기능을 통해 조율이 쉽다. 메서드설명.length 해당 요소의 클래스의 수를 반환한다..add()해당 요소의 클래스 이름을 추가한다. .contains()해당 요소에 지정된 클래스 이름이 있는지 여부를 확인한다. (true / false).item(index)해당 요소에서 지정된 인덱스 번호로 클래스 이름을 반환한다. (0부터 시작).remove()해당 요소에서 하나 이상의 클래스 이름을 제거한다. .toggle(클래스명, true|false)해.. 2024. 7. 29.

티스토리툴바