프론트엔드/JavaScript27 [ JavaScript ] sort() 메서드와 sort((a, b) => a - b)의 차이점 자바스크립트의 배열 정렬 메서드 sort()는 매우 강력한 도구입니다. 하지만 기본 sort()와 sort((a, b) => a - b) 사이에는 중요한 차이점이 있습니다. 이 글에서는 두 방식의 동작 원리와 차이점을 상세히 설명하겠습니다.1. 기본 sort()의 동작 방식sort() 메서드는 배열을 정렬하지만, 기본적으로 문자열로 변환하여 정렬을 수행합니다. 즉, 배열의 요소가 숫자든 문자열이든 상관없이 모두 문자열로 취급하여 유니코드 순서에 따라 정렬합니다.예제:const arr = [10, 2, 30, 21];arr.sort();console.log(arr); // [10, 2, 21, 30]위 결과를 보면 숫자 값이 제대로 정렬되지 않았음을 알 수 있습니다. 이는 10, 2, 30, 21이 문자열.. 2025. 1. 29. [ JavaScript ] findIndex와 indexOf의 차이점 알아보기 JavaScript를 사용할 때, 배열에서 특정 값을 찾는 것은 자주 사용되는 작업입니다. 이를 위해 주로 `findIndex`와 `indexOf` 메서드를 활용할 수 있는데, 이 둘은 비슷해 보이지만 중요한 차이점이 있습니다. 이번 글에서는 `findIndex`와 `indexOf`의 차이점을 예제와 함께 알아보겠습니다. findIndex 메서드findIndex는 배열의 각 요소를 콜백 함수로 검사해, 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만약 조건을 만족하는 요소가 없으면 -1을 반환합니다. 사용 방식arr.findIndex(callback(element, index, array), thisArg);리턴 값콜백 함수의 조건을 만족하는 첫 번째 요소의 인덱스를 반환하며, 없을 경우 -1을.. 2024. 10. 17. [ javascript ] HTML, CSS, JS로 음악 플레이어 만들기 HTML, CSS, JavaScript를 사용해 음악 플레이어를 만들어보았습니다. 이 플레이어는노래 정보 표시, 재생/일시정지, 이전/다음 곡으로 넘어가기, 진행 바 등기본적인 음악 플레이어 기능을 구현합니다. 30분 만에 영상 보며 따라만들기 1. HTML 구조우선, HTML 파일을 작성합니다. 음악 플레이어의 기본 구조는 다음과 같습니다. Song Artist 0:00 0:00 container: 전체 플레이어를 감싸는 컨테이너입니다.song-info: 노래 이름, .. 2024. 9. 9. [ Javascript ] Drop Down(드롭다운) 메뉴 만들기 결과물 Drop 버튼을 누르면 아래와 같이 메뉴가 나오는 토글 버튼을 만들어 보았다. codepen 실제 결과물 보기: https://codepen.io/pen?template=VwNqPGw dropDown.html 버튼 클릭 시 dp_menu() 함수가 실행된다. Menu들은 기본으로 display:none 스타일링이 되어있다가 버튼이 클릭되면 display: block으로 바뀐다. Drop Menu1 Menu2 Menu3 Menu4 dropDown.css body { margin: 10px; padding: 10px; text-align: center; } .dropdown { position: relative; display: inline-block; } .button { padding: 10px .. 2024. 4. 23. [ JavaScript ] Class 초기값 설정해주기, 상속 하기 Class 초기값 설정해주기 constructor(생성자) constructor(생성자)를 이용하면 class 객체의 초기 값을 설정해 줄 수 있다. 단, class 내부에서 constructor는 한 개만 존재할 수 있다. 아래는 constructor를 이용하여 Person 클래스에 초기 값을 설정해 보았다. class Person { constructor() { this.name = 'Sam'; //this 키워드로 프로퍼티 설정해주기 } printName() { // 메서드 console.log(this.name); // 위의 this.name을 전달 받는다 } } const person = new Person(); // 위의 Person class를 const person에 지정한다. person.. 2022. 12. 5. [ JavaScript ] currentTarget vs target 차이점 자바스크립트를 공부하던 중 e.currentTarget와 e.target의 차이점이 궁금해서 포스팅하게 되었다. 쉽게 말하자면 자바스크립트는 이벤트가 요소(element) 간에 전파가 된다. 이런 경우로 인해 currentTarget과 target이 선택하는 요소가 달라진다. currentTarget vs target 차이점 currentTarget : 이벤트를 등록해 놓은 요소를 반환한다. target : 이벤트가 발생한 요소를 반환한다. 예제 나를 선택하면 나는 target 다른 target const currDiv = document.getElementById('currDiv'); currDiv.addEventListener('click',(e)=>{ console.log('currentTarget.. 2022. 11. 17. [ JavaScript ] ES6의 화살표 함수 화살표 함수(arrow function) 화살표 함수(arrow function)는 ES6 문법에서 함수를 표현하는 새로운 방식이다. 그렇다고 해서 기존 function을 이용한 함수 선언 방식을 사용하지 않는건 아니다. 사용 용도에 따라 달라진다. 일반 함수를 이용한 선언 setTimeout(function() { console.log('Hello world'); }, 1000); 화살표 함수를 이용한 선언 setTimeOut(() => { console.log('Hello world') }), 1000); 일반 함수와 화살표 함수의 차이점 서로 가리키고 있는 this 값이 다르다. 일반 함수는 자신이 종속된 객체를 this로 가리킨다. 화살표 함수는 자신이 종속된 인스턴스를 가리킨다. 일반 함수의 예.. 2022. 10. 23. [ 자바스크립트 ] <script> 태그는 어디에 위치하는게 효율적일까? 태그는 어디에 위치하는게 가장 효율적일까? 를 적는 크게 4곳을 정리해 보았습니다: 1. parsing HTML Blocked parsing HTML fetching js executing js 태그 안에 가 있는 경우 parsing HTML fetching js executing js parsing HTML Blocked parsing HTML fetching js executing js parsing HTML executing js fetching js parsing을 하다가, script에서 defer을 보면, "main.js를 다운 받자" 명령만 시켜두고 나머지 HTML을 끝까지 parsing 한다. parsing이 끝난뒤에 다운로드 되어지 JavaScript 파일을 실행한다. 2022. 9. 30. [ 자바스크립트 ] Filter() 함수: 배열에서 조건을 만족하는 요소를 추출하는 방법 JavaScript에서 배열을 다룰 때, 특정 조건을 만족하는 요소들만 추출하고 싶을 때가 있습니다. 이때 유용하게 사용되는 메서드가 바로 filter()입니다. filter()filter()은 배열에 사용하며, 주어진 함수의 조건을 만족하는 모든 요소를 모아 새로운 배열로 반환합니다. 이 메서드는 원본 배열을 변경하지 않으며, 콜백 함수에서 true를 반환하는 요소들만 새로운 배열에 포함됩니다. 구문arr.filter(callback(element[, index[, array]])[, thisArg]) 매개변수filter 함수의 매개변수는 callbackFunction과 thisArg입니다.callbackFunction에는 3개의 매개변수를 사용할 수 있습니다.callback(element, ind.. 2022. 9. 15. 이전 1 2 3 다음 728x90
