프로그래머스의 "Hello, JavaScript: 자바스크립트 입문" 무료 강의를 듣고
본인의 편의를 위해 정리한 문법 노트입니다.
개발자 도구
- console.log 확인, 직접 명령어를 입력하여 실행 및 결과 확인 가능
- Microsoft Edge, Chrome 등의 웹브라우저에서 F12 키를 눌러 접근
변수 선언
| var name; name = wina; |
var name = wina; | var name name = prompt("이름 입력"); |
- prompt를 이용하여 사용자에게 값을 입력받을 수 있음
기본 자료형
| 숫자(number) | var a=10, b=2.5; | · 64bit 실수와 정수 표현 가능 · 결과 값에 수학적 오류나 기타의 경우 NaN, Infinity으로 표시 |
| 문자열(string) | var c="한글입니다", d="d"; | · 따옴표('), 쌍따옴표(")를 사용하여 표현 (시작과 끝은 맞춰주어야 함) · 따옴표 내에서 쌍따옴표, 쌍따옴표 내에서 따옴표는 그냥 사용 가능 but, '~' 내 따옴표('), "~" 내 쌍따옴표(")를 쓰려면 역슬래시(\) 사용 ex) var a = '따옴표 내 쌍따옴표 " 는 사용 가능'; var b = "쌍따옴표 내 따옴표 ' 는 사용 가능"; var c = '따옴표 내 따옴표는 \' 로 사용 가능'; var d = "쌍따옴표 내 쌍따옴표는 \" 로 사용 가능"; var e = "역슬래시는 \\처럼 두번 붙여쓰면 사용 가능"; var f = "줄바꿈은 \n으로 사용 가능"; |
| 참/거짓(boolean) | var e=true, f=false; | · 참과 거짓을 나타내는 자료형 |
- 1과 "1"은 서로 다름 (숫자와 문자열)
- 문자열을 숫자로 바꾸려면 parseInt, parseFloat
- 해당 변수의 자료형을 확인할 때, typeof(변수)
객체 자료형(Object)
- 위의 기본 자료형보다 복잡한 자료를 표현하기 위해 사용
| 객체 선언 | var obj = { name:"wina", age:5, ... } |
| 객체 접근 (2가지) | · obj.name · obj["name"] |
undefined와 null
| undefined | · 선언 이후 초기화되지 않은 변수 타입이나 값 · 값과 자료형 모두 undefined ex) var un_test; console.log("값은 ", un_test,", 자료형은 ",typeof(un_test)); 결과> 값은 undefined, 자료형은 undefined |
| null | · 변수 선언 시, 명시적으로 아무것도 없는 빈 상태를 나타낼 때 사용 · 값은 null, 자료형은 object ex) var null_test = null; console.log("값은 ", null_test,", 자료형은 ", typeof(null_test)); 결과> 값은 null, 자료형은 object |
산술 연산자(Arithmetic Operator)
| 이항 연산자 (binary operator) |
· A □ B · 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(*), 나머지(%) |
| 단항 연산자 (unary operator) |
· □A · 피연산자 앞에 붙는 +,-는 이항 연산자가 아닌 단항 연산자 |
| · 증감 연산자 - 표현식 안에서 변수의 값을 증감시킬 수 있음 ex) var a = 1; console.log(++a); // 결과값 : 2 console.log(a); // 결과값 : 2 var a = 1; console.log(a++); // 결과값 : 1 console.log(a); // 결과값 : 2 |
- Math 관련 명령어
· Math.pow(a,b) : a의 b승
· Math.sqrt(a) : a의 제곱근
· Math.rnadom() : 0에서 1 사이의 랜덤값
함수
- 호출되어 실행되는 코드
- 반복되는 코드를 감소시키며, 개발 및 수정이 편함
| 함수 선언 | function 함수이름( 파라미터1, 파라미터2, ... ) { /* 함수 내 실행코드 */ return 반환값; } ex) function sum( a, b ) { return a + b; } |
| 함수 호출 | 함수이름( 파라미터1, 파라미터2 ... ) ex) sum( 2, 5 ) |
관계 연산자(Relational Operator)
· boolean 타입으로 true 또는 false
· >, <, >=, <=, ==, !=
논리 연산자(Logical Operator)
· boolean 타입으로 true 또는 false
| AND(&&) 연산자 | OR(||) 연산자 | ||||
| TRUE | FALSE | TRUE | FALSE | ||
| TRUE | true | false | TRUE | true | true |
| FALSE | false | false | FALSE | true | false |
- NOT(!) 연산자
· true는 flase, false는 true
연산자 우선순위
1. ++, --
2. !
3. *, /, %
4. +, -
5. <, <=, >, >=
6. ==, !=
7. &&
8. ||
- 괄호를 사용할 경우, 괄호 안의 계산식이 우선되며 가독성 향상 및 실수 방지를 위해서도 사용
문자열(String)
| 문자열 길이 | · .length 또는 대괄호 사용 ex) str.length or str["length"] |
| 문자열 붙이기 | · .concat 또는 + 연산자 사용 ex) str.concat(str2) or str + str2 |
| 특정 위치의 문자열 출력 |
· .charAt 또는 대괄호 사용, 첫 문자는 0, 마지막 문자는 .length-1 ex) str.charAt(0) or str[0] |
| 부분 문자열 출력 | · .substring( a, b ) : a부터 b까지 해당하는 부분 문자열 출력 ex) var str_test = "abcdefg"; str_test.substring(1,5); // 결과값 : bcde str_test.substring(4); // 결과값 : efg · .substr( c, d ) : c부터 d 값의 길이만큼 문자열 출력 ex) var str_test2 = "abcdefg"; str_test2.substr(1,5); // 결과값 : bcdef str_test2.substr(4); // 결과값 : efg str_test2.substr(-5,3); // 결과값 : cde str_test2.substr(-5); // 결과값 : cdefg |
| 문자열 검색 | · .indexOf(a) : 해당 문자열에서 a라는 문자열과 처음으로 일치하는 위치를 찾을 때 사용 · .lastIndexOf(b) : 해당 문자열에서 b라는 문자열과 마지막으로 일치하는 위치를 찾을 때 사용 ex) var str = "가나다라가나다라마"; str.indexOf("다라"); // 결과값 : 2 str.lastIndexOf("다라"); // 결과값 : 6 |
| 구분자 함수 | · .split("구분자") : 문자열을 구분자로 나누어서 배열로 반환하는 함수 ex) var str = "1, 2, 3, 4, 5"; arr = str.split(","); // 결과값 : ["1", "2", "3", "4", "5"] |
배열(Array)
- 값을 저장할 수 있는 변수의 연속된 공간이며, 인덱스를 통해 각각의 변수에 접근 가능
| 배열 선언 | · 빈 배열 : var arr = []; · 초기화된 배열 : var arr = [1, 2, 3, 4, 5]; · 여러 자료형이 섞인 배열 : var mix_arr = [ 1, false, 2.55, "test", {name:"wina"}, [0,1,2]] ]; |
| 배열의 길이 | · .length 사용 |
| 배열 내 변수 접근 | · 대괄호 안에 인덱스를 사용하여 접근 ex) arr[0] = □ |
| 배열 내 추가/삭제 | · .push(value) : 배열의 뒤에 값을 추가하고 길이를 반환 · .pop() : 배열의 뒤에 값을 반환하고 삭제 · .shift() : 배열의 앞에 값을 반환하고 삭제 · unshift(value) : 배열의 앞에 값을 추가하고 길이를 반환 ex) var arr = [1, 2, 3, 4, 5]; arr.pop(); // 결과값 : 5 arr; // 결과값 : [1, 2, 3, 4] arr.shift(); // 결과값 : 1 arr; // 결과값 : [2, 3, 4] arr.push(6); // 결과값 : 4 arr; // 결과값 : [2, 3, 4, 6] arr.unshift(9); // 결과값 : 5 arr; // 결과값 : [9, 2, 3, 4, 6] arr.reverse(); // 결과값 : [6, 4, 3, 2, 9] arr.sort(); // 결과값 : [2, 3, 4, 6, 9] |
| 배열 정렬 및 역순 | · .sort() : 배열 안의 값 정렬 · .reverse() : 배열 안의 값들을 역순 ex) var arr = ['a', 'b', 'd', 'c', 'e'] arr.reverse(); // 결과값 : ['e', 'c', 'd', 'b', 'a'] arr.soft(); // 결과값 : ['a', 'b', 'c', 'd', 'e'] |
| 배열 붙이기 | · .concat 사용 ex) var arr1 = [1, 2, 3], arr2 = [4, 5, 6]; arr1.concat(arr2); // 결과값 : [1, 2, 3, 4, 5, 6] |
| 배열 검색 | · .indexOf(value) : 해당 배열에서 value값과 처음으로 일치하는 위치를 찾을 때 사용 · .lastIndexOf(value) : 해당 배열에서 value값과 마지막으로 일치하는 위치를 찾을 때 사용 ex) var arr = [1, 2, 3, 1, 2, 3]; arr.indexOf(3); // 결과값 : 2 arr.lastIndexOf(3); // 결과값 : 5 |