728x90 JavaScript16 [JavaScript] <script> 태그의 위치 async 속성을 추가한다면, 자바스크립트 코드와 HTML 코드를 동시에 읽습니다. 자바스크립트 코드가 모두 읽혔다면, HTML 파싱을 멈추고 자바스크립트 코드를 실행합니다. 기본 설정에 비해 코드를 읽는 시간은 절약이 되지만, 실행하는 동안은 똑같이 시간이 지연된다는 점에서 유사한 문제점을 가지고 있습니다. 1-3. defer 속성 추가 defer 속성을 추가한다면, async 옵션과 유사하게 자바스크립트 코드와 HTML 코드를 동시에 읽습니다. 하지만 코드가 모두 로딩된 다음에 바로 실행하는 것이 아니라, HTML 파싱이 완료될 때까지 기다리다가 페이지가 모두 로딩이되면 실행됩니다. 2. 태그 내부 2-1. inline 방식 코드가 짧다면 직접적으로 HTML 코드에 자바스크립트 코드를 삽입할 수도 있.. 2024. 2. 12. [JavaScript] toggle() 메서드 toggle() 메서드는 요소에 클래스를 추가하거나 삭제합니다. 만약 요소에 해당 클래스가 존재하지 않는다면 추가하고, 존재한다면 삭제를 하는 on/off 스위치와 유사한 역할을 합니다. 만약 toggle()이 없다면 이전 글에서 정리한 addEventListener()와 조건문을 활용해서 기능을 구현해야 합니다. toggle() 메서드를 활용함으로써 코드가 더 간결해집니다. toggle() 메서드의 또 다른 장점은, 기존에 가지고 있는 클래스들을 유지할 수 있다는 것입니다. 만약 toggle() 을 사용하지 않고 어떤 요소에 새로운 클래스를 설정하면, 먼저 존재하던 클래스들이 사라지게 됩니다. 다음은 toggle() 메서드의 사용 예시입니다. index.html 내용 더보기 h1 Information .. 2024. 2. 4. [JavaScript] 고차 함수 (Higher-Order Function) 고차 함수(Higher-Order Function)이란 함수를 인자로 받거나 함수를 반환하는 함수입니다. 먼저 알아두어야 할 것은 자바스크립트가 선언형 프로그래밍로 분류되는 함수형 프로그래밍(Functional Programming)이라는 것입니다. 함수형 프로그래밍에서는 함수를 1급 시민(First-Class Citizen)으로 인식한다고 설명되는데, 1급 객체로 인식하고 있다는 뜻이 됩니다. 이는 함수를 다음과 같이 변수에도 할당하는 것을 가능하게 합니다. const square_func = function(x) { return x * x; } square(5); // Output : 25 이러한 특징을 통해 함수를 인자로 받거나 함수를 반환하는 함수인 고차 함수가 정의될 수 있습니다. 이번 글에서는.. 2023. 9. 7. [JavaScript] 화살표 함수 (Arrow Function) 화살표 함수 (Arrow Function Expression)는 기존의 함수 선언식에서 function 키워드가 생략함과 동시에 더 간소화한 형태의 함수 선언입니다. 화살표 함수의 사용 가능한 구문은 다음과 같습니다. () => expression param => expression (param) => expression (param1, paramN) => expression () => { statements } param => { statements } (param1, paramN) => { statements } 형식을 화살표 (=>) 기준으로 나눈다면, 화살표의 좌항은 매개변수를, 우항에는 함수로 사용될 표현식이나 statement“s”들이 들어가게 됩니다. 좌항에서 매개변수가 만약 한 개라면 소괄.. 2023. 9. 6. [JavaScript] 즉시 실행 함수 (IIFE) IIFE는 Immediately Invoked Function Expression의 약자로, 정의가 되는 순간 바로 실행이 되는 함수인 즉시 실행 함수를 뜻합니다. IIFE의 구문은 다음과 같습니다. (function (exParameter) { // content })(exArgument); ((exParameter) => { // content })(exArgument); 구문을 크게 두 부분으로 나눌 수 있는데, 1) 함수의 정의를 감싸는 소괄호와 2) 끝에 붙어 있는 소괄호입니다. 1) 첫 번째 부분은 익명인 함수의 정의가 들어가게 됩니다. 이때, function 연산자나 화살표 함수를 사용할 수 있습니다. 함수의 정의를 괄호로 묶어주는 이유는 함수 선언문이 아닌, 함수 표현식으로 만들기 위해서입.. 2023. 9. 4. [JavaScript] 프로토타입 (Prototype) 자바스크립트에서 만들어지는 객체는 프로토타입(Prototype)이라는 속성이 모두 내장되어 있습니다. 어떠한 프로토타입을 가지면, 그 프로토타입의 속성과 메서드를 상속받게 됩니다. 간단한 예시로 강아지라는 객체는 동물이라는 프로토타입을 가지고 있다고 가정한다면, 동물 객체가 가지는 속성과 메서드를 강아지 객체가 상속받아서 사용할 수 있게 됩니다. 프로토타입을 사용함으로써 같은 코드를 재사용할 수 있게 되어 효율성과 코드 가독성을 높일 수 있습니다. 또한, 여러 개의 객체를 생성할 때 같은 프로토타입에서 속성과 메서드를 불러오기 때문에 메모리도 아낄 수 있습니다. 앞서 모든 객체가 프로토타입을 가진다고 언급했는데, 프로토타입도 객체이기 때문에 프로토타입 자체도 프로토타입을 가지게 됩니다. 이것을 프로토타입.. 2023. 8. 20. 이전 1 2 3 다음 반응형
