javascript

이벤트 리스너를 공부하는 중에 예전에 분명 input 값을 가져와서 사용하는 방법이 있었던 거 같은데 하면서 뒤적거리다가 드디어 찾아냈다. 다시 안까먹게 적어둬야지. 이벤트도 정리해둬야 하고... 왜 이렇게 할 일이 밀려있지 사용자가 입력을 완료한 input 값을 출력하기 결론부터 말하면 input.value를 사용하면 된다. 아래 예제를 통해 이해하자. 텍스트를 입력하면 제목 태그를 변경하고 input의 텍스트를 비우는 예제이다. + 텍스트를 입력하지 않았다면 아무 일이 일어나지 않도록 할 것 안녕하세요 클릭! 입력 칸에 응애를 치면 안녕하세요가 응애로 바뀌고 입력창은 빈 칸으로 바뀐다.

구조분해할당... 이름만 들어도 귀찮고 진짜 많이 안쓸 거 같은데 javascript에서 가장 많이 쓰이는 문법 중 하나라고 한다. 아직 배울 게 정말 산더미처럼 많구나... 라고 느낀 부분이다. 화이팅해서 차근차근 학습하고 프로젝트에도 적용시켜보자. 구조분해할당(Destructuring Assignment) : 배열 또는 객체의 구조를 분해하여, 그 값을 개별 변수에 담는 표현식을 의미한다. const arr = [1, 2, 3, 4, 5]; 이런 배열이 하나 있다고 생각해보자. 배열의 값을 사용하는 방법은 arr[0]과 같이 인덱스에 접근하는 것이다. const one = arr[0]; const two = arr[1]; const three = arr[2]; 쓰다보니 매우 귀찮다. 이걸 간편하게 하..

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..

함수를 생성하는 방법 3가지 1. 함수 선언문 (function statement) 2. 함수 표현식 (function expression) 3. Function() 생성자 함수 이때 함수 선언문과 함수 표현식은 함수 리터럴 방식으로 함수를 생성한다. 자바스크립트에서 함수명은 선택사항이다. 이름이 없는 함수를 익명함수(anonymous function) 라고 한다. 자바스크립트 함수 리터럴은 function 키워드로 시작. 함수 선언문 방식으로 선언된 함수는 이름이 있어야 한다. function add(x,y) { return x+y; } console.log(add(3, 4)); // (출력값) 7 함수 표현식 방법으로 함수 생성하기 자바스크립트에서는 함수도 하나의 값처럼 취급한다. (이러한 특징 때문..

배열, 객체 리터럴 모두 자료형은 object이다. 하지만 배열은 Array.prototype 객체가 부모 객체, 객체 리터럴 방식으로 생성한 객체는 Object.prototype 객체가 부모 객체이다. splice(start, deleteCount, item) start: 배열에서 시작 위치 deleteCount: start에서 지정한 시작 위치부터 삭제할 요소의 수 item: 삭제할 위치에 추가할 요소 delete는 원소 자체를 삭제하지는 않음. 원소 자체를 삭제하려면 splice를 사용하는 것이 용이. 생성자 함수로 배열과 같은 객체를 생성할 때는 반드시 new 연산자를 같이 써야한다. 호출할 때 인자가 1개이고, 숫자인 경우: 호출된 인자를 length로 갖는 빈 배열 생성 그 외의 경우: 호출된..