본문 바로가기

JavaScript85

JavaScript 알고리즘(2) 버블정렬(Bubble Sort) Updated 10/30/22 알고리즘 두번째 시간😀 원리를 알아가니 퍼즐이 맞춰지는 느낌이다. 이렇게 하나하나 알아가보자! 자 그럼 버블정렬에 대해 알아가보자 버블 정렬(Selection Sort) 정렬알고리즘 중 버블 정렬은 가장 큰 숫자를 선택해서 뒤로 보낸다. 옆 원소랑 비교해서 더 작은 값은 앞으로, 최대값을 뒤로 보내자! 뒤죽박죽인 배열 내의 숫자들을 오름차순(1, 2, 3, ... 10)으로 정렬해보자 자, 준비물은 array, temp 다. 이 변수들 안에 숫자들을 담아 능력껏 줄세워보자. 첫번째 원소자리에는 1st - 10th 원소 검사해서 젤 큰 수를 맨뒤로 넣고, 두번째 원소자리에는 1st - 9th 원소 검사해서 젤 큰 수를 맨뒤로 넣고, 세번째 원소자리에는 1st - 8th 원소 .. 2021. 7. 19.
JavaScript 알고리즘 (1) 선택 정렬 (Selection Sort) 예전에는 알고리즘을 생각해볼 여유도 없이 프로그래밍 언어와 문법 위주로만 공부하기 바빳다. 알고리즘까지 배울 레벨과 여력이 안된다고 생각하여 주위에서 중요성을 설파할 때면 귓등으로 넘긴 것 같다.코딩테스트를 그때그때 머리에 의존하여 풀어내면서 이제서야 알고리즘에 대한 중요성을 확실히 깨달았다. 하지만 자바스크립트로 푸는 알고리즘 자료는 많이 없다. 아마도 자바스크립트 언어 특성상 파이썬이나 자바에 비해 자료구조 등을 효율적으로 쉽게 풀어내기가 어려워서라고 생각한다. 그렇지만 포기는 없다. 자 그럼 이제부터 한걸음씩 시작해보자. updated 06/09/24알고리즘 강의를 2번째 보고있는 중이다. 개념과 이해는 어느정도 잡혔지만어느날 누군가 나에게 던진 질문처럼 이 알고리즘이 왜 사용해야하는지에 대한 답은.. 2021. 7. 18.
JavaScript - URL 인코딩(encodeURI) / 디코딩하기(decodeURI) 신입 네 달차, 프로젝트의 URL 안의 특수문자가 유니코드로 인코딩되어 표시되었다. 그래서 URL 을 사용하는 메소드의 결과가 제대로 나오지 않는 이슈가 발견되었다. 문제해결을 위해 encodeURI() 의 문서를 살펴보며 해결을 모색하였다. URL 전체를 건들고 싶을 때, URL 의 (영어제외) 전체가 인코딩 / 디코딩 된다. endcodeURIComponent() var encodeStr = encodeURI("http://www.mywebpage.com/한글.jsp"); console.log(encodeStr); // "http%3A%2F%2Fwww.mywebpage.com%2F%ED%95%9C%EA%B8%80.jsp" decodeURIComponent() var decodeStr = decodeU.. 2021. 6. 17.
javaScript - sort () 로 오름차순 내림차순 정렬하기 sort() 자바스크립트 배열의 오름차순, 내림차순은 sort() 라는 함수로 간단하게 만들 수 있다. 단 sort 만 사용하게 되면 ASCII 문자 순서로 정렬되어 숫자의 크기대로 나오지 않는다. 그래서 안에 내장함수를 넣어주어 앞 뒤 인덱스와 비교한 뒤 정렬해준다. 숫자 정렬 // 오름차순 score.sort(function(a, b) { return a - b; // 1, 2, 3, 4, 10, 11 }); // 내림차순 score.sort(function(a, b) { return b - a; // 11, 10, 4, 3, 2, 1 }); 2021. 5. 16.
JavaScript - map 함수란 (feat. filter) map () 이란 - 반복문을 돌며 배열 안의 요소들을 1대 1로 짝지어 매핑해준다. - 결과로 나오는 새 배열과 !== 기존배열 은 다르다. (기존 배열을 수정하지 않고 새로운 배열을 만들기 때문) - 단, [ 배열 안에 { 객체 } 가 들어있으면, ] 객체는 공유된다. 새 배열 = 기존 배열.map((요소, 인덱스, 배열) => { return 요소 }); map() 으로 짝수만 출력하기 - 새 배열의 아이템 갯수는 === 기존배열 아이템 갯수와 같다. 그래서 map으로 거른 부분을 제외한 나머지는 undefined 가 된다. 출력화면 ** tip. 만약 빈칸으로 남아있는게 싫다면 filter 함수로 필터링 해주면 된다. filter() 으로 짝수만 출력하기 출력화면 ** 나의생각 map 과 filt.. 2021. 5. 12.
javaScript - slice와 splice 비교하기 updated(01/20/24) splice 와 slice 로 배열의 원소들을 추가 삭제 교체 등을 해보자! - slice 는 원본 배열을 건드리지 않고, 수정된 복사 배열을 리턴한다. (삭제만 가능) - splice 는 직접적으로 삭제, 추가, 교체한 원본 배열을 리턴한다. (삭제 교체 추가 가능) slice( 시작인덱스#, 마지막인덱스# ) copy 된 새로운 배열 이 나온다 (원본은 유지) 이친구는 삭제만 가능하다 시작인덱스# 부터 ~ 마지막 인덱스# 직전까지만 삭제된다 **마지막 인덱스#는 optional 로 안넣으면 끝까지 삭제된다 const arr = [a, b, c, d, e]; 이고 const copy = arr.slice(1, 4); 이면 첫번째 인덱스 부터 4번째 인덱스 직전(=== 3.. 2021. 5. 7.
JavaScript - 비구조화 할당하기 비구조화 할당(Destructuring Assignment)이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 ECMAScript6(2015)에 추가된 자바스크립트 표현식(expression)이다. BEFORE 비구조화 할당 원소에 별명(변수)를 붙여 따로 불러내고 싶다. (너만💛) 근데 걸림돌이 있었으니.... 변수 선언을 거쳐야 불러낼 수 있다는 거다. 그래서 다이렉트로 부를 수 있게 비구조화 할당이 나왔다. AFTER 비구조화 할당 변수 선언과 객체(혹은 배열) 선언을 한방에 할 수 있다. (이젠 우리 둘이 다이렉트로 볼수있어💛) 배열일 때는 const [ 변, 수, 이, 름 ] 으로 = [ "선언해주면", "순서대로", "배열원소와", "매칭된다." ] 객체일 때는 - .. 2021. 5. 6.
javaScript - input type="file" 특정 파일확장자 이미지 업로드 이미지 업로드 기능을 구현 중이다. 특정 파일확장자만 업로드 하고 싶다면 에 accept 속성을 추가하자 ! // gif, jpg, png 파일만 보여줌 // 모든 오디오 파일을 보여줌 // 모든 비디오 파일을 보여줌 // 모든 이미지 파일을 보여줌 파일업로드 버튼을 눌러 파일선택창이 나타나면 !! accept 로허락한 파일만 마우스 클릭이 가능하다. 2021. 5. 1.
JavaScript - Math.ceil / Math.floor / Math.round 소수점을 처리하는 방법 중 가장 많이 사용되는 올림, 버림, 반올림의 간단한 사용방법은 아래와 같다. - Math.ceil() : 소수점 올림, 정수 반환 Math.ceil(.95); // 1 Math.ceil(4); // 4 Math.ceil(7.004); // 8 Math.ceil(-0.95); // -0 Math.ceil(-4); // -4 Math.ceil(-7.004); // -7 - Math.floor() : 소수점 버림, 정수 반환 Math.floor( 45.95); // 45 Math.floor( 45.05); // 45 Math.floor( 4 ); // 4 Math.floor(-45.05); // -46 Math.floor(-45.95); // -46 - Math.round() : 소수.. 2021. 4. 7.
반응형

티스토리툴바