FrontEnd/JavaScript

[JavaScript] 배열 메서드 arr.slice()

arr.slice() slice() 메서드는 배열의 start부터 end 전 까지의 값을 복사하여 새로운 배열로 반환하고, 원본 배열은 바뀌지 않는다. 구문 arr.slice(start,end); // end-1까지 start의 경우 default 값은 0이며, end 값을 지정하지 않을 경우 배열의 길이까지 복사한다. 사용 예시 const arr = ['a', 'b', 'c', 'd']; console.log(arr.slice(1, 3)); // [ 'b', 'c' ] console.log(arr.slice(1)); // ['b', 'c', 'd'] console.log(arr.slice(-3, -1)); // ['b', 'c'] start, end가 음수일 경우 위 arr 배열의 끝에 있는 'd'가 ..

[JavaScript] 배열 메서드 arr.filter()

배열에서 조건이 일치하는 요소를 찾길 원할 때, filter 를 알기 전 까지는 for문을 돌리고 .. 또 if문을 중첩해서 사용했다. 다른 사람은 어떻게 해결했는지 찾다가, 배열 메서드인 filter를 발견했는데 filter() 는 배열에서 조건을 충족하는 요소들을 새로운 배열 형태로 반환하는 함수라고 한다. 만약 충족하는 요소가 하나도 없다면 빈 배열이 반환된다. 사용 예시 const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["..

[JavaScript] 자바스크립트 다양한 이벤트(Event) 정리

마우스 이벤트 이벤트 설명 click 클릭시 발생 dbclick 더블클릭시 발생 mouseover 마우스 포인터가 영역 위로 올라올 경우 발생 mouseout 마우스 포인터가 영역에서 벗어날 경우 발생 mousedown 마우스 버튼을 누를 경우 발생 mouseup 마우스 버튼을 눌렀다 놓을 경우 발생 mousemove 마우스를 움직일 경우 발생 contextmenu contextmenu(마우스 우클릭시 나오는 메뉴)가 나오기 전에 발생 키보드 이벤트 이벤트 설명 keydown 키보드의 버튼이 내려가는 순간 발생 keyup 키보드의 버튼이 내려가는 순간 발생 ('a', '5' 등 출력이 가능한 키에서만 동작하며 Enter, ESC 등의 키에는 반응하지 않음) keypress 눌러진 키보드의 버튼이 다시 올..

[JavaScript] Boolean 활용하기

용어 설명 undefined와 null null은 비어있는 값이고, undefined는 변수에 아무것도 할당되지 않았을 때의 값이다 자바스크립트에서는 변수의 선언과 초기화를 동시에 하지 않아도 되기 때문에, 선언만 된 변수는 undefined라는 값을 갖게 된다 let n = null; let u; console.log(n); console.log(u); null undefined NaN (Not a Number) NaN은 'Not a Number'의 약자이며, 숫자가 아닌 것을 숫자로 표현하려 할 때 반환된다 let n = parseInt('abcd'); console.log(n); NaN false와 true로 간주되는 것들 자바스크립트 if문이나 while문의 조건 부분에는 Boolean이 아닌 다..

[JavaScript] 다양한 자바스크립트 스타일 가이드

W3Schools JavaScript 스타일 가이드 JavaScript Style Guide W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 깃허브 인기 JavaScript 스타일 가이드 GitHub - rwaldron/idiomatic.js: Principles of Writing Consistent, Idiomatic JavaScript Principles of Wri..

[JavaScript] 자바스크립트 Date 정리

날짜와 관련된 프로그램은 Date 객체를 활용해 만들 수 있다 객체 만들기 우선 객체를 만들어야 활용할 수 있으며, 두 가지 방법이 있다 현재 날짜로 설정 파라미터 없이 new Date()를 하면 현재 날짜로 설정되어 있는 Date 객체가 생성되어 리턴된다 let date = new Date(); 원하는 날짜로 설정 파라미터를 써주면 원하는 날짜로 설정할 수 있다 만약 날짜만 쓸 경우, 0시 0분 0초로 지정된다 // 2022년 1월 11일 18시 50분 30초 let date1 = new Date('Jan 11, 2022 18:50:30'); let date2 = new Date('2022-01-11T18:50:30'); // 1999년 03월 02일 (날짜만) let date3 = new Date('..

[JavaScript] 자바스크립트 Array 정리

배열의 길이 length 속성은 배열의 길이를 담고 있다 let brands = ['Apple', 'Coca-Cola', 'Starbucks']; console.log(brands.length); 3 배열에서 특정 값 찾기 문자열에서 사용했던 indexOf가 배열에서도 똑같이 동작한다 array.indexOf(item)을 하면 array배열에 item이 포함되어 있는지 확인할 수 있다 만약 포함되어 있다면, item이 있는 인덱스가 리턴된다 포함되어 있지 않다면, -1이 리턴된다 여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴된다 let brands = ['Apple', 'Coca-Cola', 'Starbucks']; console.log(brands.indexOf('Starbucks')); con..

[JavaScript] 자바스크립트 String 정리

문자열의 길이 length 속성은 문자열의 길이를 담고 있다 let str = 'Codeit'; console.log(str.length); 6 특정 인덱스의 문자 받아오기 str.charAt(index)를 하면 문자열 str의 index 인덱스에 있는 문자를 받아올 수 있다 let str = 'Codeit'; console.log(str.charAt(2)); d 문자열 안에서 다른 문자열 검색 str.indexOf(searchValue)를 하면 문자열 str 내에 문자열 searchValue가 포함되어 있는지 확인할 수 있다 만약 포함되어 있다면, 문자열이 시작되는 문자의 인덱스가 리턴된다 포함되어 있지 않다면, -1이 리턴된다 여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴된다 let str =..