일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 레이아웃
- 하이퍼링크
- 리액트훅
- 인스타그램만들기
- DOM
- html
- BOM
- node prompt
- 비동기
- 프로그래밍
- vue.js설치법
- 폼태그
- css
- 코딩야학
- 반복문
- 뷰 설치법
- 동기
- 배열
- JavaScript
- 웹코딩
- 주니어 개발자
- 리액트네이티브배포
- jQuery
- 프론트엔드
- 쉽게설치
- 코딩
- form태그
- JS
- 두잇리액트네이티브
- 자바스크립트
- Today
- Total
이진욱의코딩
[JS] 자바스크립트의 여러가지 연산자, 함수의 정의에 대해 알아봅시다. 본문
이번 시간에는 여러 가지 연산(+, -, *, /,%)을 하는 법과 비교 연산자, 논리 연산자, 함수에 대해 알아봅시다.
자바스크립트를 이용해서 여러 가지 연산을 할 수 있습니다.
덧셈, 뺄셈, 곱셈, 나눗셈을 비롯해서 나머지도 구할 수 있습니다.
var a = 3, b = 5;
console.log(a+b);
console.log(a-b);
console.log(a*b);
console.log(a/b);
console.log(a&b);
이렇게 console.log()를 이용해서 연산을 할 수 있습니다.
var n = 1;
console.log(++n);
console.log(n++);
변수 n의 값에 하나하나 증감을 시킬 수 있는 증감 연산도 가능합니다. 피연산자가 하나이면 단항 연산자라고 하고
두 개이면 이항 연산자라고 합니다.
console.log(Math. 명령어(a, b));를 이용해서 지수곱, 제곱근, 랜덤추출, 반올림 등을 할 수도 있습니다.
console.log(Math.pow(2,3)); //지수 곱
console.log(Math.sqrt(16)); //제곱근
console.log(Math.random()); //랜덤추출
console.log(Math.floor(2.4)); //내림
console.log(Math.ceil(7.1)); //올림
console.log(Math.round(2.4)); //반올림

비교 연산자에 대해 알아봅시다. 관계 연산자라고도 하며 양측 값을 비교해서 true를 출력하거나 false를 출력합니다.
※비교 연산자의 특징
- 두 문자열의 strictly equal은 두 문자열의 문자가 같은 순서를 가지고, 같은 길이를 가지고, 대응하는 위치의 문자가 같을 때를 말한다
- 두 숫자의 strictly equal은 두 수가 숫자적으로 같을 때(값이 같을 때)를 말한다.. NaN은 NaN을 포함하여 어떤 것과도 같지 않다, 음의 0, 양의 0은 같다.
- 두 부울 피연산자의 strictly equal은 둘 다 참이거나 둘 다 거짓인 경우를 말한다.
- 서로 다른 두 객체는 strict비교든 abstract비교든 같지 않다.
- 객체를 비교하는 표현은 오직 피연산자가 같은 객체를 참조한 경우만 참이다.
- Null과 Undefined 자료형은 자기 자신과 strict equal이고 서로 간엔 abstract equal이 적용된다.
<script>
var a=10, b=2;
console.log(a > b);
console.log(a < b); //true는 1, false는 0이다
console.log(a == b);
console.log(a != b);
console.log(a <= b);
console.log(a >= b);
console.log(a == a);
var aa =1, bb= "1"; //숫자와 문자
console.log(aa == bb);
console.log(aa != bb);
console.log(aa === bb); // 값 뿐만 아니라 데이터형을 비교한다.
console.log(aa !== bb);
var s1 = "a", t1 = "b"; //abc는 뒤로갈수록 값이 크다는것을 알 수 있다.
console.log(s1 == t1);
console.log(s1 != t1);
console.log(s1 > t1);
var s2 = "abcd", t2 = "bc"; //맨 앞의 문자로 판별한다. 시작하는 알파벳이 커야 큰거임
console.log(s2 < t2);
console.log(s2 > t2);
//참이냐 거짓이냐 판별하는것을 boolean이라고 한다.
</script>
출력 결과는

논리 연산자에 대해 알아봅시다.
관계 연산자의 값은 boolean값으로 반환됩니다. 불형(boolean)을 이용한 것이 논리 연산자입니다.
논리 연산자의 종류에는 and, or, not이 있고, &&, ||,! 기호를 사용합니다.
console.log(true && false);
console.log(true && true);
console.log(false && false); //and : 둘중에하나라도 false면 false이다.
console.log(true || true);
console.log(true || false); //or : 둘중에 하나라도 트루이면 트루
console.log(false || false);
console.log(!true); //트루가 아니라는 뜻
console.log(!false);
var height = 180;
var age = 20;
console.log(height >= 180 && age >= 20);
console.log(height >= 180 && age < 20);
console.log(height >= 180 || age < 20);
console.log(height >= 180 && age >= 20 && age <30);
console.log(age < 8 || age >= 65);
/* 우선순위
1. ++, --
2. !
3. * / % +-
4. < > <= >= == !=
5. &&
6. ||
*/

이제 연산자는 여기까지 알아보고 이제부터는 함수에 대해서 알아보도록 합시다.
자바스크립의 함수란?
=> 어떤 입력을 받아 특정한 기능이나 계산을 수행 후 값을 되돌려주는 코드
단, 입력이나 결과 없이 특정 기능만 수행도 가능
함수를 실행하는 걸 보통 호출한다 라고 표현을 한다.
기본적인 틀은 이렇습니다.
function 함수이름(매개변수1, 매개변수2){
실행할 코드
return 결과값;
}
함수이름(변수1, 변수2)
여기서 실제로 응용을 해서 적어본다면
function test3(){
var a = 10;
var b = 20;
return a+b;
}
console.log(test3());
이렇게 쓸 수 있습니다.
더해서 이번에는 전역 변수와 지역변수에 대해 알아봅시다.
변수는 유효 범위에 따라 전역 변수(Global Variable)와 지역변수(Local Variable)로 구분할 수 있습니다.
- 전역 변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수입니다.
- 지역변수는 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수입니다. 함수 외부에서는 접근할 수 없습니다.
예제로 바로 보시죠
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var jbVar = 'Lorem';
function jbFunc() {
var jbVar = 'Ipsum';
}
document.write( jbVar );
</script>
</body>
</html>
변수 jbVar의 값을 함수 외부에서는 Lorem으로, 함수 내부에서는 Ipsum으로 정했습니다.
함수 외부에서 jbVar를 불러왔으므로 전역 변수의 값이 출력됩니다.
Lorem
여기까지 제가 공부한 내용입니다. 감사합니다!!
'JS' 카테고리의 다른 글
[JS] 함수(function)와 배열(array)에 대해 알아봅시다. (0) | 2019.11.18 |
---|---|
[js] 자바스크립트의 기본을 알아봅시다. (0) | 2019.11.13 |
(Node.js) 동기와 비동기 그리고 콜백_callback에 대해서 알아봅시다. (0) | 2019.10.30 |
node.js설치방법과 node.js를 이용해서 웹서버만들기 (1) | 2019.09.27 |
ajax를 이용한 초기페이지 구현 (0) | 2019.09.26 |