본문 바로가기

JavaScript80

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.
JavaScript - Callback 함수란 Updated 2021/05/13 자바스크립트 함수의 특징은 함수가 값이 될 수 있다는 점이다. CallBack 함수란 - 함수 안에서 사용되는 함수로 그 속에서 일종의 루틴 또는 동작을 완성하기 위해 호출된다. 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 일반 함수를 말한다. - 그 자체로 특별한 선언이나 문법적 특징을 가지고 있지는 않다. 일반적인 자바스크립트 함수일 뿐이다. -> 한마디로 콜백함수는 수동태처럼 자기 의지가 없다. 함수가 콜백함수을 밖으로 불러내야지만 나온다. Callback 함수를 사용하는 이유 - 비동기처리 Callback 함수를 사용하는 이유는, 자바스크립트에서 비동기적 프로그래밍을 할 수 있기 때문이다. - 어떤 일을 다른 객체에게 시키고, 그 일이 끝.. 2021. 3. 23.
JavaScript - ForEach, For in 그리고 For of updated 2021/05/04 신입사원 두달 차, 전통적인 For문을 사용하다 옛날 방식이라는 소리를 들었다. 그래 ! 이참에 for문 세계에 깊숙히 입문해봐야겠다. 처음엔 전통적인 for문도 감지덕지였지만ㅠㅠ, 이제는 for문 세계의 자매품 같은.. 느낌의 메소드들을 만나보자 간장, 국간장, 진간장느낌이랄까 한마디로 for문하고 용도는 똑같지만 타자를 적게친다 이말이다. forEach 문 얘는 Array 배열에서만! 사용가능한 반복문이다. 원소를 나열하여 검사하는 기능이 있다. 화살표 함수를 사용하여 각 원소들을 element라는 변수에 담아 forEach문을 돌면서 실행한다. 기본적인 사용 방법이다. 전통적인 for문 대신 인덱스# 가 들어간 수식을 사용하고 싶을 때 사용한다. 전통적인 for 문.. 2021. 3. 11.
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.
반응형

티스토리툴바