전체 글

[TIL] JS 숫자 야구 게임, BOM, 쿠키

✍ Today I Learned [숫자 야구 게임] 페이지가 리로딩되기 전까지의 게임이 기록되어야 하기 때문에 랜덤 숫자 생성은 버튼으로 하는 것이 좋다. if문에서는 실행될 확률이 높은 조건절을 위쪽으로 배치하는 것이 좋다. 나는 3S 상황이 가장 위쪽에 올라와있었는데 Out 상황의 확률이 더 높으므로 둘의 순서를 바꿔주었다. 기록을 측정하기 위해 시작 시간을 변수에 할당하는 시점은 함수의 가장 마지막 부분이어야 한다. 전역 변수의 선언이나 초기화는 스크립트의 시작 부분에서 하는 것이 좋다. 유저의 기록을 Map 구조에 저장했었는데 Index로 접근하여 정렬하는 것이 까다로운 관계로 Array와 Object의 조합으로 변경하는 것이 좋을 것 같다. 그러면 sort() 메서드를 이용해서 정렬할 수 있다...

[TIL] JS 함수, 클로저, call(), apply(), bind(), 구조분해할당

✍ Today I Learned [함수 Functions] 익명 함수란? 말 그대로 이름이 없는 함수. 예를 들면 함수 표현식에서 사용되는 함수는 변수를 통해 호출하기 때문에 함수 이름이 필요하지 않다. const x = function (a, b) {return a * b}; let z = x(4, 3); 함수를 만들어내는 자바스크립트 내장 함수 Function() 생성자를 사용하여 함수를 만들 수도 있다. 그러나 위의 익명 함수 코드와 동일하게 작동하기 때문에 굳이 사용할 필요는 없다. const myFunction = new Function("a", "b", "return a * b"); let x = myFunction(4, 3); 자바스크립트는 초기화가 아닌 선언만 호이스팅 되기 때문에 변수 선..

[JavaScript] 자바스크립트의 클래스(Class)

클래스란? 클래스(Class)란 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메서드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. ES6에 도입되었으며, JavaScript 객체용 템플릿이라고 볼 수 있다. 클래스 생성 class ClassName { constructor() { ... } } class 키워드를 사용한다. 생성자 메서드 constructor()를 사용한다. name과 year 속성을 가진 'Car'라는 클래스를 만들어보자. class Car { constructor(name, year) { this.name = name; this.year = year; } } // 객체 생성 let myCar1 = new Car("Ford",..

[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으로 반환,..