$$config title: JS keywords: - JavaScript $$ # 자바스크립트 개발 환경 세팅 [Sublime Text](https://www.sublimetext.com/) #### 변수를 생성하는 `var`, `let`, `const` `var`은 변수를 선언하고, 또 선언해도 에러가 나지 않는다. (코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있음) `let`은 변수 재선언 시 에러, 변수 값 재할당 가능 (굿굿굿) `const`는 변수 재선언 시 에러가 나지만, 변수 값 재할당이 불가능하다. --- #### 콘솔 한 줄에 하나씩, `console.clear();` --- #### [콘솔에 로그를 남기는](https://programmers.co.kr/learn/courses/3/lessons/153), `console.log` console.log("현재 시각은 am 2:00"); ㅤ --- ㅤ #### 변수의 자료형 - number - 정수, 실수, 지수 - string (문자형) - boolean (True, False) ㅤ --- ㅤ #### [자료형 출력](https://programmers.co.kr/learn/courses/3/lessons/157), `type of` ``` var a = "Hello World"; console.log(a, typeof(a)); // Hello World String 출력 ``` ㅤ --- #### 브라우저의 경고문 : `alert` #### 사용자에게 입력 받기 : `prompt` ㅤ ``` var name = prompt("이름을 입력해주세요 ") alert(name + "님 환영합니다."); console.log(name,"님 환영합니다."); ``` --- #### 문자열을 숫자로 변환 : [parseInt](https://programmers.co.kr/learn/courses/3/lessons/161), [parseFloat](https://programmers.co.kr/learn/courses/3/lessons/890) ㅤ ``` var height = prompt("키를 입력해 주세요"); // ex) 173.9 입력 console.log(height, typeof(height)); // 173.9 string 출력, 입력 받는 값은 String이라는 것을 알 수 있다. var height_int = parseInt(height); // height_int 변수를 정수형으로 변환 console.log(height_int, typeof(height_int)); // 184 'number' 출력 var height_float = parseFloat(height); // height_int 변수를 실수형으로 변환 console.log(height_float, typeof(height_float)); // 184.4 'number' 출력 ``` <문자열의 앞부분이 숫자여야 인식할 수 있다.>정상적이지 않는 숫자나 표현할 수 없는 범위의 수일때에는 NaN, Infinity 출력 --- ### [객체](https://programmers.co.kr/learn/courses/3/lessons/163) - object #### 객체 생성 ``` var wooju = {name = "신우주", age = 18, height = 173} // wooju : 객체, name = "신우주" : 속성 ``` ㅤ #### 객체 속성 불러오기 ``` wooju.name wooju["name"] //속성의 이름을 문자열로 적어야함. ``` --- ##### undefined : 값 선언이 되지 않은 변수를 의미 ##### null : 아무 것도 있지 않은 변수 ---ㅤ ### 연산자 ㅤ #### 이항 연산자 (두개의 피연산자(A, B)를 가지는 연산자) - '+ , - , * , / , % --- #### 증감 연산자 - ++, -- <각각 a=a+1, a=a-1과 같다> ##### ++a; // **실행 전**에 변수 a에 1을 더함. ``` var a = 1; consol.log(a); // 1 출력 console.log(a++); // 1 출력 console.log(a); // 2 출력 ``` ##### a++; // **실행 후**에 변수 a에 1을 더함. ``` var a = 1; consol.log(a); // 1 출력 console.log(++a); // 2 출력 console.log(a); // 2 출력 ``` --- ㅤ #### 관계연산자 : 두 표현식(A, B)의 관계를 비교하는 이항연산자. #### ㅤㅤㅤㅤㅤㅤ관계에 따라 boolean 타입의 true, false로 표현됨. |관계연산자|동작|True인 예시|False인 예시| |------|---|---|---| |<|A보다 B가 더 큰 경우 참|3 < 5|3 < 3| |>|A보다 B가 더 작은 경우 참|5 > 3|3 > 3| |<=|A보다 B가 크거나 같은 경우 참|3 <= 3|4 <= 3| |>=|A보다 B가 작거나 같은 경우 참|3 >= 3|3 >= 4| |==|A와 B가 같은 경우 참|3 == 3|4 == 3| |!=|A와 B가 같지 않은 경우 참|3 != 4|3 != 3| --- ㅤ ### 논리연산자 #### 두 boolean 피연산자에 대해 연산하는 연산자. --- ㅤ #### AND(&&) 연산자 두 피연산자가 모두 true인 경우에만 true를 나타내는 이항연산자 |ㅤ|True|False| |------|---|---|---| |True|True|False| |False|False|False| --- ㅤ #### OR(||) 연산자 두 피연산자가 하나라도 true인 경우 true를 나타내는 이항연산자 |ㅤ|True|False| |------|---|---|---| |True|True|True| |False|True|False| --- ㅤ #### NOT(!) 연산자 ##### : 피연산자가 true인 경우 false를, false인 경우 true를 나타내는 단항연산자 --- ㅤ #### 연산자 우선 순위 : 수학에서 곱하기를 더하기보다 먼저 계산하는 것 처럼, Javascript에서도 연산자에 우선순위가 존재. ㅤ ##### 우선순위 순으로 정리한 연산자 - ++, -- - ! - *, /, % - +, - - <, <=, >, >= - ==, != - && - || --- ##### 예시 문제 ``` 2 * 3 > 4 + 5 && 6 / 3 == 2 || !false // 답 : True ``` --- ### [함수](https://programmers.co.kr/learn/courses/3/lessons/200) #### 함수의 정의 - 호출에 의해 여러번 실행할 수 있는 코드 블럭 - 반복되는 코드 감소 - 코드의 개발 및 수정 용이 ㅤ #### 함수 정의 구문 ``` function 함수이름(인자1, 인자2){ /* 실행될 코드 */ return 반환값; } ``` --- - 인자 : 함수의 정의부분에 나열되어 있는 변수 - 여러개인 경우 콤마(,)로 구분. - 인자가 필요없는 경우 없어도 됨
- **함수 안의 코드**에서 변수처럼 활용 가능 ㅤ - return 구문 : 함수의 출력으로 내보낼 값 - return 구문을 만나면 함수는 즉시 **종료됨** - 함수를 호출한 표현식은 **반환값**으로 대치됨 ㅤ #### 함수의 호출 방법 `함수이름(인자, ...)`의 형태로 호출 ㅤ ##### 함수 호출 구문 예시 ``` var inp = prompt(); console.log("Hello World"); var randomValue = Math.random(); ``` --- ### 번외 - Math.pow(A,b) : A의 B 제곱을 구해 줌 - Math.sqrt(A) : A의 제곱근을 구해 줌 - Math.random() : 0~1 사이의 임의의 난수를 발생시켜 줌 ## 괄호 : 우선순위를 명시하기 위해 괄호를 사용. 괄호안의 계산식이 먼저 계산됨. - 부가적 효과 - 코드의 가독성 향상 - 연산자 우선순위 실수 방지