JavaScript

[JavaScript] try / catch로 예외 처리하기

예외 처리란? 예외는 프로그램 실행 중에 발생하는 런타임 오류를 의미한다. 이러한 예외가 발생했을 때 프로세스는 더 이상 동작하지 않기 때문에 try / catch / finally를 사용한 예외처리를 통해 프로세스가 동작할 수 있게 해주어야 한다. try / catch / finally try { 예외를 처리하길 원하는 실행 코드; } catch (ex) { 예외가 발생할 경우에 실행될 코드; } finally { try 블록이 종료되면 무조건 실행될 코드; } try 블록 - 기본적으로 가장 먼저 실행되고, 에러 발생이 예상되는 코드를 작성한다. (기본) catch 블록 - try 블록에서 발생한 예외 코드나 Error 객체를 인수로 전달받아 처리한다. (옵션) finally 블록 - 예외처리와 관계..

[TIL] JS 정규표현식, 생성자 함수, 프로토타입

✍ Today I Learned [정규 표현식 Regular Expression] 정규 표현식이란? 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 패턴이다. /검색패턴/플래그 search(/str/flag) - 해당 문자열에서 인수로 전달받은 정규 표현식과 일치하는 첫 번째 문자열의 인덱스를 반환, 찾지 못하면 -1 반환 indexOf()와 다른 점은? search()는 시작 위치를 지정할 수 없다 indexOf()는 정규표현식을 사용할 수 없다 replace(/str/flag) - 지정된 값을 다른 값으로 바꾸고 새 문자열로 반환. 첫 일치 항목만 대체하고, 대소문자를 구분한다. 정규식을 함께 사용하면 더 편리하다. match(/str/flag) - 해당 문자열에서 인수로 전달받은 정규 표현식과 ..

[TIL] JS 클래스, JSON

✍ Today I Learned 스스로 하지 않으면 발전은 없다! 분발하자! [Style Guide] operator 양쪽에 공백 두기 변수 이름 시작에 숫자나 대문자 X 달러($) 기호로 이름을 시작하지 않기 파일명은 소문자로 하는 것을 추천 [Best practices] 전역 변수, new, ==, eval() 가급적 사용하지 않기 변수는 상단에 선언하고, 선언하면서 초기화 객체, 배열 선언은 const 자바스크립트는 자동형변환 되는 경우가 많으므로 언제나 데이터 타입에 유의하기 switch 문은 언제나 default로 끝내기 eval() 함수 사용하지 않기 [Mistakes] = 할당 연산자와 == 비교 연산자 헷갈리지 말기(할당은 할당 값을 반환) switch문은 타입까지 비교하는 엄격한 비교를 ..

[TIL] JS 퀴즈 파티

✍ Today I Learned [travel 링크 이동 없이 이미지 바꾸기] document에 addEventListner를 걸었을 경우, 페이지 내 어떤 곳이든 클릭될 수 있기 때문에 조건문으로 범위를 잡아줘야 한다. contains() 메서드는 class에 해당 값이 존재하는지를 true or false로 반환한다. let targetCls = e.target.classList.contains('click'); // true or false 반환 [퀴즈 1 영화 제목 입출력하기] 입력하자마자 바로 출력(HTML에 결괏값 데이터 쌓기) -> innerHTML로 배열[배열.length-1] 버튼뿐만 아니라 입력 창도 disabled HTMLElement.focus() 메서드는 지정된 요소로 포커스를 설..

[TIL] JS 데이터 타입, 형변환, 호이스팅, 엄격모드, this

✍ Today I Learned undefined - 값이 할당되지 않아 '타입'이 정해지지 않은 것을 의미한다. (정의되지 않은 변수, 값이 할당되지 않은 변수) null - object 타입이며, '값'이 정해지지 않은 것을 의미한다. typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true typeof로는 배열(또는 Date)인지 아닌지 확인할 수 없다. (이럴 땐 isArray() 사용) 빈 객체로 초기화하고 싶을 때? string은 "", number는 0, array는 [], object는 {}, 나머지는 null 설정 Number()는 빈 문자열은 0으로 반환,..

[JavaScript] 자바스크립트의 새로운 자료구조 Set, Map

Set이란? Set이란 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션이다. 중복 값 여부는 배열에서도 find() 메서드를 이용하여 확인할 수 있지만, 배열 내 전체 요소를 순환하여 찾기 때문에 성능면에서 Set보다 효율적이지 않다. Set은 값의 유일무이함을 확인하는 데에 최적화되어있다. Set 메서드 or 프로퍼티 new Set() or new Set(iterable) - Set 객체 생성 및 초기화. iterable 객체를(주로 배열) 전달받으면 그 안의 값을 복사해서 넣어준다. // Set 객체 생성 const letters = new Set(["a","b","c"]); // Set 객체 생성 const letters = new Set(); // Set 객체에 add로 값 추가 letters...

[TIL] JS Set, 로또 번호 추첨기, Map

✍ Today I Learned [생일, 디데이 계산기] getTime() 메서드는 1970년 1월 0시 0분 0초부터 현재까지의 시간을 밀리초 단위로 환산한 값을 반환한다. Date() 객체를 할당한 변수끼리는 밀리 초로 연산이 가능하다. 기간을 출력할 때에는 주로 밀리초 단위를 사용하여 연산한다. 날짜 관련 데이터는 moment.js 또는 FullCalendar 를 활용하는 것도 좋은 방법! Set 객체에서 entries() 메서드로 값을 출력하려면 반복문을 중첩으로 사용해야 한다. 객체도 연관 배열이라고 볼 수 있다. [로또 번호 추첨기 ver. 1 (Set을 사용하기)] Set객체는 중복을 허용하지 않기 때문에 새로운 Set의 size가 6이 될 때까지 while문을 실행한다. 빈 배열을 만들어서..

[TIL] JS 배열 순환 메서드, break, continue, Date

✍ Today I Learned [조건에 맞는 데이터 출력하기] 1번 문제에서 사용자한테 입력받은 key값으로 데이터를 출력하려면 KeyName이라는 변수를 선언하고 el[keyName] 이런 방식으로 접근하면 된다. map() 메서드는 새로운 배열을 만들어내지만 filter() 메서드는 말 그대로 필터링이다. return이 true인 요소만을 반환한다. 너무 return 값을 의식하지 말자. 집합적인 데이터 관리에 있어서 명칭이 필요하면 객체, 동일한 형태로 쌓는 거면 배열. 배열과 객체를 반드시 번갈아 가면서 사용할 필요는 없다. 연관 배열은 key값이 있는 배열이니까 keys() 메서드를 사용할 수 있을 줄 알았는데 작동하지 않는다. let과 const 키워드는 Block Scope를 제공한다. 전..