kiki-dev

자바스크립트 배열의 메소드

요소 추가, 제거 메서드 arr.push() - 맨 끝에 요소 추가 arr.pop() - 맨 끝에 요소 제거 arr.shift() - 맨 앞 요소 제거 arr.unshift() - 맨 앞 요소 추가 splice() 요소 추가,삭제, 교체가 모두 가능한 메서드 arr.splice(index[, deleteCount, elem1, ..., elemN]) index - 첫 번째 요소 (음수 인덱스도 사용가능) deleteCount - 제거하고자 하는 요소의 개수 elem1, ..., elemN - 배열에 추가할 요소 요소 삭제 예제 let arr = ["I", "study", "JavaScript"]; arr.splice(1, 1); // 인덱스 1부터 요소 한 개를 제거 alert( arr ); // ["I..

자바스크립트 JSDoc 함수에 주석 달기

JSDoc 자바스크립트 문서화 도구, js 파일 내 주석을 사용하여 코드를 작성하고 인터페이스를 설명하는 문서를 생성할 수 있다. (요즘 대부분의 에디터들은 JSDoc 기능을 기본으로 제공해준다.) /** 인사말을 출력하는 함수*/ function hello(name) { alert(`안녕하세요! ${name}님`); } /** * 인사말을 출력하는 함수 * @param {string} name 이름 */ function hello(name) { alert(`안녕하세요! ${name}님`); } hello("kiki") 함수 위에서 /** 엔터를 치면 jsdoc 주석이 자동완성된다. @param {}중괄호는 권장하는 타입을 적어줄수 있다.

자바스크립트 배열

배열 특수한 형태의 객체로, 순서가 있는 자료를 저장하고 관리하는 용도에 최적화된 자료구조이다. // 대괄호 (가장 많이 쓰이는 방법임) let arr = [item1, item2...]; // new Array (잘 쓰이지 않음) let arr = new Array(item1, item2...); let fruits = ["사과", "오렌지", "자두"]; alert( fruits[0] ); // 사과, 특정 요소 접근 fruits[2] = '배'; // 요소 수정 ["사과", "오렌지", "배"]로 바뀜 fruits[3] = '레몬'; // 배열에 요소 추가 ["사과", "오렌지", "배", "레몬"]으로 바뀜 alert( fruits.length ); // 4 length 프로퍼티는 배열의 길이를 ..

[TIL] Today I Learned

📚 오늘 한 일 자바스크립트- 문자열 공부 🔥 느낀점 백틱에 표현식사용할수 있다는점 ${...} 이게 훨씬 더 편리한거 같다. 특정문자에 접근할 수있는 대괄호 [] 배열처럼 인덱스번호쓰면 접근할 수 있는데 charAt랑 다른점은 없으면 undefined 반환하고 charAt은 없으면 빈문자열을 반환한다. 또 몰랏던건 문자의 불변성 대괄호로 접근해서 한글자만 변경하는건 불가능하고, 다시 잘 만들어서 재할당해줘야한다는거, 또 문자열에 관련된 다양한 메소드들 ✨ 배운점 백틱은 문자열을 여러 줄에 걸쳐 쓸 수 있게 해주고 문자열 중간에 ${...}를 사용해 표현식도 넣을수 있음 자바스크립트는 UTF-16을 사용해 문자열을 인코딩한다. \n (줄바꿈) 같은 특수 문자 사용가능 문자열에서 글자 하나 추출할때는 대괄..

자바스크립트 문자열

문자열 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장된다. 자바스크립트에서 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16형식을 따른다. 따옴표의 종류 let single = '작은따옴표'; let double = "큰따옴표"; let backticks = `백틱`; 작은따옴표와 큰따옴표는 기능상 차이가없다. function sum(a, b) { return a + b; } alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3. 템플릿 리터럴 방식 백틱으로 감싼 문자열 중간에 표현식${...}을 문자열 중간에 넣어주면 표현식을 삽입할 수 있다. 특수 기호 자바스크립트엔 줄 바꿈 문자를 비롯한 다양한 '특수' 문자들이 있다. let guestList = "손..

[TIL] Today I Learned

📚 오늘 한 일 자바스크립트 숫자형 🔥 느낀점 소수의 정밀도 손실은 예전에 유튜브를 통해서도, 또 수업을 통해서 대충 프로그램 언어가 정확한 소수점을 표현할 수 없다고 인지하고 있었는데 요번에 글을 읽으면서 알게되었다. 아무래도 소수가 나오는 숫자들은 정수로 바꿔서 계산을 한뒤에서 소수로 바꿔주는게 좋을거 같다 ✨ 배운점 e왼쪽의 수에 e 오른쪽에 있는 수 만큼 10의 거듭제곱, 거듭제곱한 수로 나누는 효과가 있다. 1e3 = 1 * 1000 1e-3 = 1 / 1000 (=0.001) 2진법을 사용해 0.1또는 0.2를 정확하게 저장하는 방법은 없다(무한 소수가된다) 숫자와 관련된 내장 객체 Math와 함수들 Math 객체, toString(), parseInt(), parseFloat(), isNaN..

티스토리 블로그 무료스킨 배포

상단에 광고 한번씩 클릭해 주시면 제작자에게 큰 도움이 됩니다 :) [목차기능 수정] - 화면이 줄어들면 따라다니는 목차부분 수정 비로그인시 댓글 css 미적용 수정 리스트 간격 수정 목차 댓글가리는 현상 수정 폰트어썸 아이콘 svg 코드로 변경, 페이징네이션 없을시 아래하단 공백생기는거수정 기존에 사용하셧던분들 아이콘 안보이시면 이 파일로 교체해서 사용 or 폰트어썸 코드 위에 한줄 수정하시면 됩니다 티스토리 무료 스킨 배포 개인적으로 사용하려고 했던 블로그 스킨 무료로 배포합니다. 글 상세보기 디자인 목차 기능 제목 1,2,3는 자동으로 목차가 생성되는 기능이 있습니다. 수정사항 빨간색 박스친 부분의 링크 주소 수정하여 사용하시거나 필요 없으면 제거하시면 됩니다. 해당 부분의 코드 참고하세요~ 스킨 ..

자바스크립트 숫자형

숫자를 입력하는 다양한 방법 1e3 = 1 * 1000 1.23e6 = 1.23 * 1000000 'e'는 e왼쪽의 수에 e 오른쪽에 있는 수만큼의 10의 거듭제곱을 곱하는 효과가 있다. let ms = 1e-6; // 1에서 왼쪽으로 6번 소수점 이동 // 10을 세 번 거듭제곱한 수로 나눔 1e-3 = 1 / 1000 (=0.001) // 10을 여섯 번 거듭제곱한 수로 나눔 1.23e-6 = 1.23 / 1000000 (=0.00000123) 'e' 우측에 음수가 있으면, 이 음수의 절댓값만큼 10을 거듭제곱한 수로 나누는 것을 의미한다. toString(base) let num = 255; alert( num.toString(16) ); // ff alert( num.toString(2) ); /..

[TIL] Today I Learned

📚 오늘 한 일 자바스크립트의 원시 래퍼 객체 🔥 느낀점 자바스크립트에서는 원시값에 내장메소드를 지원해주는데 원시값인데 어떻게 객체의 메소드를 활용하는 건지 몰랐었는데 이번에 알게 되었다. 또 자바스크립트에서 어떤 함수는 그냥 사용할 수 있는데 어떤 함수들은 즉 메소드들은 객체 뒤에 . 을 붙여서 사용한다는게 예전에는 헷갈렸는데 배우면서 더 명확해진 거 같다. ✨ 배운점 자바스크립트에서는 원시값에 메소드를 호출하려고 하면 임시 객체(원시 래퍼 객체)가 만들어지고 래퍼 객체는 원시 타입에 따라 종류가 다양하고 래퍼 객체 마다 제공하는 메서드 역시 다르고 메서드가 실행되고 나서 객체는 사라진다 또 자바스크립트는 최적화가 잘되어 있어서 이 과정이 리소스를 그렇게 잡아먹지 않는다고 한다.

자바스크립트 원시값의 메서드

원시값의 메소드 자바스크립트는 원시값(문자열,숫자 등)을 마치 객체처럼 다룰 수 있게 해 준다. 객체에서처럼 메서드를 호출할 수 있는데 그렇다고 원시값이 객체는 아니란 것을 상기하도록 하자! 원시값과 객체의 차이점 원시값 원시형의 종류는 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined형으로 총 일곱 가지 이다. 객체 프로퍼티에 다양한 종류의 값을 저장할 수 있다. {} 중괄호를 사용해 만들 수 있으며, 자바스크립트에는 여러 종류의 객체가 있는데 함수도 객체의 일종이다. 객체의 장점 중 하나는 함수를 프로퍼티로 저장할 수 있다는 것이다. 원시 래퍼 객체 원시값에 메서드를 호출하려 하면 임시 객체(원시 래퍼 객체)가 만들어진다..

[TIL] Today I Learned

📚 오늘 한 일 제이쿼리란 무엇인가? 제이쿼리 기초문법 제이쿼리 선택자 🔥 느낀점 기초를 튼튼히 하지 않으면 안된다는것을 오늘 다시 느낀다,, 정말 아무것도 모르고 제이쿼리를 그냥 사용했었던거 같다. 젤루 충격인건 선택자 $()루 맨날 선택해놓구 걍 선택되나보당~ 하구 사용했던것,, $()로 선택하면 제이쿼리 객체가 생성된다는고,, 그러니깐 제이쿼리 객체 메소드를 사용할 수 있었던건데,, 바보 같은 나 ^_^;; 제이쿼리 선택자들도 한번 정리하고 나니깐 명확해졌다! ✨ 배운점 제이쿼리 - 자바스크립트의 라이브러리 라이브러리란? 필요한 기능들을 미리 구현해둔것

제이쿼리 선택자

제이쿼리 선택자 제이쿼리에서는 CSS선택자뿐만 아니라 몇몇 비표준 선택자까지도 사용할 수 있다. 비표준 선택자는 사용자 편의성을 위해 제이쿼리에서 자체적으로 추가한 선택자 문법이다. 이러한 비표준 선택자를 사용하면 더욱 세분화된 선택을 하기 위한 필터링을 진행할 수 있다. CSS선택자 $("*") $(".class") $("element") $("#id") $("selector1, selecotr2") 선택자 설명 * 모든 요소를 선택 .class 지정한 클래스를 가지는 모든 요소 선택 element 지정된 태그명을 가지는 모든 요소 선택 #id 지정한 ID 속성을 가지는 하나의 요소를 선택 , 지정한 선택자들의 모든 결과들을 결합하여 선택 비표준 필터링 선택자 $("div:odd") $("div:eve..