this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성된다. this는 코드 어디서든 참조할 수 있다. 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다. 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다. 함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다. 단, this가 가리키는 값, 즉 this..
자바스크립트
lodash 라이브러리는 javascript의 인기있는 라이브러리로 객체, 배열 등의 데이터 구조를 쉽게 변환하여 사용하게끔 도와준다. lodash라는 이름은 _를 사용하기 때문에 따온 것으로 보인다. 나는 스크롤 내릴 때 콘솔이 여러 번 찍히는 것을 막기 위해 throttle 메서드를 사용했다. window.addEventListener('scroll', _.throttle(()=>{ console.log('scroll!')}, 300)); lodash 라이브러리의 설치 과정은 다음과 같다. cdn 방식 npm 설치 방법 npm i -g npm npm i --save lodash import 방법(npm 설치시) import _ from 'lodash'; 자세한 사항은 https://lodash.com..
이벤트 리스너를 공부하는 중에 예전에 분명 input 값을 가져와서 사용하는 방법이 있었던 거 같은데 하면서 뒤적거리다가 드디어 찾아냈다. 다시 안까먹게 적어둬야지. 이벤트도 정리해둬야 하고... 왜 이렇게 할 일이 밀려있지 사용자가 입력을 완료한 input 값을 출력하기 결론부터 말하면 input.value를 사용하면 된다. 아래 예제를 통해 이해하자. 텍스트를 입력하면 제목 태그를 변경하고 input의 텍스트를 비우는 예제이다. + 텍스트를 입력하지 않았다면 아무 일이 일어나지 않도록 할 것 안녕하세요 클릭! 입력 칸에 응애를 치면 안녕하세요가 응애로 바뀌고 입력창은 빈 칸으로 바뀐다.
switch문에 범위를 주는 방법은 간단하다. switch (조건)에 true를 넣어주고 case에 범위를 설정해주면 된다. 아래 예제를 살펴보며 이해하도록 하자. let a = 90; switch (true) { case (a>90): console.log('A'); break; case (a>80): console.log('B'); break; case (a>70): console.log('C'); break; default: console.log('탈락입니다.'); } 실행 결과는 B가 나온다.
산술연산자 1. 이항 산술연산자 + : 덧셈, 자바스크립트에서는 특이하게 숫자 + 문자열도 값이 나온다. - : 뺄셈 * : 곱셈 / : 나눗셈 % : 나머지. 주로 홀수인지 짝수인지 알아볼 때 사용 ** : 제곱. 예전에는 pow를 사용했다고 한다. 2. 증감연산자 반환 부수효과 a++ 값 그대로 1 증가 ++a 1 증가한 값 1 증가 a-- 값 그대로 1 감소 --a 1 감소한 값 1 감소 x += y x = x + y x -= y x = x - y x *= y x = x * y x /= y x = x / y x %= y x = x % y x **= y x = x ** y * a++ 등의 증감 연산자가 많이 이용되기는 하지만, 예상치 못한 오류를 방지하기 위해 사용을 지양하고 x += y의 방법을 쓴..
자바스크립트는 동적타입을 가진 언어이다. 따라서 특정 값이 할당된 변수에 그와 다른 자료형의 값을 넣는 것이 가능하다. 자유롭기는 하나, 그만큼 자료형 관련 오류에 취약하다는 단점이 있다. * 동적타입(Dynamic typed), 정적타입(Static typed) : 타입을 컴파일에서 확인하는 언어가 정적타입 언어, 런타임에 확인하는 언어를 동적타입 언어라고 한다. 정적타입 언어 : C, C++, C# 등이 있다. 동적타입 언어 : javascript, python 등 정적타입의 장점 1. 타입 에러로 인한 문제점을 초기에 발견할 수 있어 높은 안정성을 자랑한다. 2. 컴파일 시에 미리 타입을 결정해서 실행속도가 빨라진다. 정적타입의 단점 1. 코드 작성 시 변수형을 결정해주어야 하는 번거로움이 있다. ..
이스케이프 문자는 자바스크립트 뿐만 아니라 다른 언어에서도 유용하게 사용하는 것이므로 알아두도록 하자. 주의해야 할 것은 \(백슬래시)를 사용해야 한다는 것. 특수문자 설명 \n 줄 바꿈 \\ 역슬래시 그대로 출력 \' , \" 따옴표 그대로 출력 \t 탭 \r 캐리지 리턴, 윈도우에서는 (\r\n) 조합으로 줄 바꿈 \b, \f, \v 백스페이스, 폼피드, 세로탭. 잘 사용하지 않음 \xXX 16진수 유니코드 XX로 표현한 유니코드 글자 \uXXXX UTF - 16 인코딩 규칙을 사용하는 16진수 코드 XXXX 로 표현한 유니코드 기호 \u{X...XXXXXX} (한 개에서 여섯 개 사이의 16진수 글자) UTF - 32로 표현한 유니코드 기호. 몇몇 특수한 글자는 두 개의 유니코드 기호를 사용해 인코..
원시자료형 불리언 (boolean) 1. true/false를 나타내는 자료형. 2. 참 또는 거짓. 상반된 둘 중 하나의 값을 담을 수 있다. 3. 직접 할당되기보다는 반환값으로 프로그램 곳곳에서 활용된다. 숫자 (number) 1. 자바스크립트에서는 정수와 실수 구분이 없다. (정수도 실수로 처리한다고 한다.) 2. 정수는 2^53 - 1까지 안정적으로 표현 가능하다. 3. 1/0 -> infinity, 타입은 'number'. 무한대를 표현할 수 있다. 4. -1/0 또한 가능하다. -infinity. 타입은 마찬가지로 'number'. 문자열 (string) 1. 큰 따옴표("), 작은 따옴표('), 백틱(`) 등으로 작성할 수 있다. 2. c와 같은 언어와 달리, 문자열을 하나만 저장할 수 있는..
ctrl + L : 콘솔 비우기 console.log() : 출력 console.info() : 정보. 사용하는 브라우저도 있고 그렇지 않은 브라우저도 있음 console.warn() : 경고. 문제가 될 수 있는 부분에서 사용 console.error() : 오류. 오류가 발생한 상황에 사용 ctrl + / : 주석처리 주석 (단축키 : ctrl + /) 사람들에게 보여줄 목적으로 작성. ex) 코드에 대한 설명, 추후 진행해야 할 사항 등 변수 : 데이터를 담는 용도로 사용 var, let, const 등으로 변수를 선언할 수 있다. 하지만 var는 호이스팅 등의 문제로 사용하지 않는 것을 권장. let과 const를 사용하자 변수의 특징 1. 이미 만들어진 변수를 다시 선언할 수는 없다. ex) l..
