본문 바로가기
반응형

방구석코딩/자바스크립트21

자바스크립트 효율적인 코드 작성 예시(예제) 자바스크립 효율적인 코드 작성 예시(예제)에 대해서 하나씩 보도록 하겠습니다. 코드 작성에 있어 성능을 최적화하고 개선하는 것이 샘플 데이터를 통해 배우거나 하는 경우에는 별거 아닌 것처럼 느껴질 수 있지만 실무에 적용하게 되면 엄청난 차이를 보이게 됩니다. 따라서 아래에서 잘된 예시와 그렇지 않은 예시를 보여주면서 효율적인 코드 작성하는 방법에 대해서 알아보겠습니다. 주석 처리하기 주석은 작성한 코드가 어떤 걸 의미하는지 설명하는 부분입니다. 코드를 실행 시 실제로 작동하지는 않지만 코드를 보는 사람이 쉽게 알 수 있도록 설명을 적어두는 것입니다. 이렇게 해두면 코드를 읽는 가독성이 향상되고 변수의 용도를 쉽게 파악할 수 있습니다. 예를 들어 x 및 y와 같은 변수를 사용하는 대신 firstName 및.. 2023. 5. 29.
자바스크립트 디버깅이란, 디버깅 수정 방법 자바스크립트에서 디버깅이란 무엇인지 알아보고, 디버깅 수정 방법에 대해서 알아보도록 하겠습니다. 디버깅이란 디버깅이란 코드를 작성하는 동안 오류가 발생할 수 있기 때문에 디버깅을 통해서 오류가 발생한 이유에 대해 알 수 있습니다. 이렇게 출력된 디버깅을 통해 코드를 수정할 부분을 알 수 있습니다. 디버깅 수정 방법 및 종류 구문 오류 대괄호, 세미콜론 또는 괄호 누락과 같이 코드 구문에 오류가 있는 경우 구문 오류가 발생합니다. 이러한 오류는 코드가 제대로 실행되지 못하게 하며 일반적으로 브라우저의 JavaScript 엔진에 의해 포착됩니다. 오류 메시지는 오류가 발생한 정확한 위치를 가리킵니다. let number = 10; if (number === 10 { console.log("Number is .. 2023. 5. 25.
자바스크립트 이벤트 리스너 종류 자바스크립트에서 이벤트 리스너 종류에 대해 알아보고 이벤트 리스너란 무엇인지에 대해 알아보도록 하겠습니다. 이벤트 리스너 및 사용자 입력 처리는 JavaScript에서 중요한 개념입니다. 사용자 작업에 응답하는 대화형 웹 페이지 및 애플리케이션을 만들 수 있기 때문입니다. 이벤트 리스너란 자바스크립트에서 이벤트 리스너는 버튼 클릭이나 키보드 누름과 같은 HTML 요소에서 발생하는 특정 이벤트를 기다리는 기능입니다. 이벤트가 발생하면 함수가 트리거되고 이벤트에 대한 응답으로 일부 작업을 수행할 수 있습니다. HTML 요소에 이벤트 리스너를 추가하려면 먼저 JavaScript를 사용하여 요소를 선택해야 합니다. 이는 getElementById() 또는 querySelector()와 같은 다양한 메서드를 사용.. 2023. 5. 22.
자바스크립트 DOM이란, 조작(방법) 자바스크립트에서 DOM이란 Document Object Model의 약자로써 HTML 문서를 트리 형태로 계층적으로 표현한 것입니다. DOM을 조작하는 것은 프론트엔드 개발자에게 필수적인 기술입니다. 트리의 각 요소는 노드이며 개발자는 JavaScript를 사용하여 이러한 노드를 조작하여 웹 페이지의 콘텐츠와 스타일을 동적으로 업데이트할 수 있습니다. 다음은 자바스크립트에서 DOM 조작방법에 대해 알아보겠습니다. DOM 요소에 접근하기 요소 콘텐츠 및 속성 수정 요소 추가 및 제거 이벤트 처리 자바스크립트 DOM 요소 액세스 JavaScript를 사용하여 DOM 요소를 조작하기 전에 먼저 액세스해야 합니다. 다음을 포함하여 DOM의 요소에 액세스하는 방법에는 여러 가지가 있습니다. getElementBy.. 2023. 5. 18.
자바스크립트 객체 생성, 배열, 추가, 삭제 자바스크립트 객체는 구조화된 방식으로 데이터를 저장하고 조작하는 방법입니다. 객체는 키-값 쌍으로 생각할 수 있는 속성으로 구성됩니다. 각 속성에는 속성을 식별하는 문자열인 키와 문자열, 숫자, 부울, 배열 또는 다른 객체와 같은 모든 데이터 유형의 값이 있습니다. 자바스크립트 객체 생성, 배열 JavaScript에서 객체를 생성하려면 키-값 쌍을 중괄호 {}(으)로 묶어야 합니다. 다음은 사람을 나타내는 객체의 예입니다. const person = { name: 'John', age: 25, isStudent: true, hobbies: ['reading', 'music', 'sports'], address: {street: '123 Main St', city: 'New York', state: 'NY.. 2023. 5. 15.
자바스크립트 배열 선언, 추가, 삭제 배열과 객체는 데이터를 저장하고 조작하는 데 사용되는 JavaScript의 기본 데이터 구조입니다. 이 섹션에서는 배열과 객체, 정의 방법 및 JavaScript에서 사용 방법에 대해 설명합니다. 자바스크립트 배열 선언 자바스크립트 배열 선언에 대해 알아보겠습니다. 배열은 단일 변수에 저장되는 데이터 값의 모음입니다. 배열의 데이터 값을 요소라고 하며 각 요소는 인덱스로 식별됩니다. JavaScript에서 배열은 대괄호를 사용하여 정의되며 모든 데이터 유형을 포함할 수 있습니다. 배열 선언 예시 다음은 JavaScript에서 배열을 정의하는 방법의 예입니다. const numbers = [1, 2, 3, 4, 5]; const fruits = ['apple', 'banana', 'orange']; con.. 2023. 5. 11.
자바스크립트 함수 선언, 표현식 예시 (feat.매개변수) 자바스크립트 함수선언과 표현식에 대해서 알아보겠습니다. 함수는코드를 함께 그룹화하고 특정 작업을 수행하는 데 사용됩니다. 함수는 프로그램 전체에서 재사용하고 여러 번 호출할 수 있는 코드 블록입니다. 자바스크립트 함수 선언, 표현식 예시 자바스크립트에서 함수 선언하는 방식은 function 키워드 뒤에 함수 이름, 괄호 세트 및 중괄호를 사용하여 정의됩니다. 다음은 기본 예시입니다. function greet() { console.log('Hello!'); } greet(); 이 예제에서는 문자열 'Hello!'를 콘솔에 간단히 기록하는 greet라는 함수를 정의합니다. 그런 다음 greet()를 사용하여 함수를 호출합니다. 함수 매개변수 매개변수란 프로그래밍에서 특정 작업이나 계산을 수행하는 데 사용되.. 2023. 5. 9.
[자바스크립트] 루프문, for, while, do-while 자바스크립트 루프문에는 일반적으로 for, while, do-while문을 가장 많이 사용합니다. 루프문은 특정 조건이 충족될 때까지 코드 블록을 반복적으로 실행하는 데 사용됩니다. 각 유형별 루프문의 구문과 차이점을 살펴보겠습니다. For 루프문 for 루프는 코드 블록을 실행하려는 횟수를 알고 있을 때 사용됩니다. for 루프의 구문은 다음과 같습니다. for (initialization; condition; increment) { // code to be executed } 초기화 문은 루프 시작 시 한 번 실행됩니다. 루프 변수에 값을 선언하고 할당하는 곳입니다. condition 문은 각 루프 반복이 시작될 때 평가됩니다. 참이면 루프가 계속됩니다. false이면 루프가 종료됩니다. 'incre.. 2023. 5. 2.
반응형

티스토리툴바