본문 바로가기

javascript54

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 - 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.
JavaScript - Callback 함수란 Updated 2021/05/13 자바스크립트 함수의 특징은 함수가 값이 될 수 있다는 점이다. CallBack 함수란 - 함수 안에서 사용되는 함수로 그 속에서 일종의 루틴 또는 동작을 완성하기 위해 호출된다. 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 일반 함수를 말한다. - 그 자체로 특별한 선언이나 문법적 특징을 가지고 있지는 않다. 일반적인 자바스크립트 함수일 뿐이다. -> 한마디로 콜백함수는 수동태처럼 자기 의지가 없다. 함수가 콜백함수을 밖으로 불러내야지만 나온다. Callback 함수를 사용하는 이유 - 비동기처리 Callback 함수를 사용하는 이유는, 자바스크립트에서 비동기적 프로그래밍을 할 수 있기 때문이다. - 어떤 일을 다른 객체에게 시키고, 그 일이 끝.. 2021. 3. 23.
JavaScript - 동기(Sync)와 비동기(Async) Updated 2021/05/14 자바스크립트는 싱글 스레드 프로그래밍 언어로 단일 호출 스택이 있어 한 번에 하나의 일만 처리할 수 있다. 그러므로 자바스크립트는 동기 방식으로 진행이 된다. 하나의 호출 스택만 있어 함수를 순서대로 줄세우고 하나씩 처리한다. - 동기는 요청 후 응답을 받아야 다음 동작을 실행하는 방식 - 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식 자바스크립트에서 비동기가 필요한 이유 웹 페이지를 로딩할때, 우선 웹 페이지의 기본 레이아웃을 보여주고 보여줄 수 있는 것만 우선 보여주는 것이 더 바람직할 것이다. 사용자가 지루하지 않도록 먼저 떡밥을 던저주는 것이다. 자바스크립트에서 비동기방식을 사용하는 방법 비동기적 callback 함수 사용 ES6 Promis.. 2021. 3. 5.
JavaScript - var / const / let 세 변수의 차이점 자바스크립트의 변수선언 방식에는 var, let, const가 있다. 이 차이를 알아보자 var 변수 선언 방식에 있어서 큰 단점을 가지고 있다. 같은 변수를 여러번 선언하면, 에러가 나야 하는데 어디서든 사용가능하다. 그래서 코드가 길어지면 처음에 사용한 변수명을 잊어버리고 실수로 같은 것을 쓰기라도 하면 꼬이게 된다. var name = 'JS'; // 처음에 선언하고 name = 'React'; // 재할당(그위에 다른 값 덮어씌우기) 가능하다. var name = 'Java' // 모든게 다~~가능 그래서 ... !! ES6 이후, 이를 보완하기 위해 추가 된 변수타입이 let 과 const 이다. (immutable 여부의 차이, 즉 변경가능하냐 아니냐) let 은 변수에 재할당이 가능하다. l.. 2021. 2. 24.
반응형

티스토리툴바