JavaScript의 연산자/함수 [처음 만난 리액트 #3]

리액트를 배우기 위해 필요한 기초 지식 정리 📄 & 실습 환경 구축 💻

 

[무료] 처음 만난 리액트(React) - 인프런 | 강의

---

JavaScript의 연산자 (Operator) 

 

대입 연산자 (Assignment operator)

변수의 값을 대입하기 위해 사용하는 연산자 (=)

 

오른쪽 값을 왼쪽 값에 대입

대입연산자는 항상 오른쪽에서 왼쪽 방향으로 흐름이 흘러감!

 

let a = 10;
let b = 20;

consol.log(a);
//출력 결과: 10

consol.log(b);
//출력 결과: 20

 

사칙 연산자

산술 연산자

● 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)

● 나머지를 구하는 연산자(%)

● 지수 연산자(**)

 

let a = 2;
let b = 4;

consol.log(a + b);
// 출력 결과: 6

consol.log(a - b);
// 출력 결과: -2

consol.log(a * b);
// 출력 결과: 8

consol.log(a / b);
// 출력 결과: 0.5

consol.log(a % b);
// 출력 결과: 2

consol.log(a ** b);
// 출력 결과: 16

 

* 산술연산자와 대입연산자를 함께 사용하는 연산자

 

let a = 2;
let b = 4;

a += b; // a = a + b
consol.log(a);
// 출력 결과: 6

a -= b; // a = a - b
consol.log(a);
// 출력 결과: 2

a *= b; // a = a * b
consol.log(a);
// 출력 결과: 8

a /= b; // a = a / b
consol.log(a);
// 출력 결과: 2

 

증가 연산자 (++)

감소 연산자 (--)

● postfix 방식: a++ 

증감 전의 값을 반환하고, 이후에 변수의 값이 증감

● prefix 방식: ++a

변수의 값을 증감시키고, 이후에 증감된 변수의 값을 반환

 

let a = 1;
let b = a++;

console.log(a, b);
// 출력 결과: 2, 1

let c = 1;
let d = ++c;

console.log(c, d);
// 출력 결과: 2, 2

 

관계 연산자 (Relational operator)

변수들 사이의 관계를 비교하기 위해 사용하기 때문에 비교 연산자(Comparison operators)라고 하기도 함

<, >, <=, >=

 

비교 연산자는 왼쪽의 변수를 기준으로!

ex)

a < b     (a가 b보다 작다)

a > b     (a가 b보다 크다)

a <= b   (a가 b보다 작거나 같다)

a >= b   (a가 b보다 크거나 같다)

 

let a = 1;
let b = 2;

console.log(a < b);
// 출력 결과: true

console.log(a > b);
// 출력 결과: false

console.log(a <= b);
// 출력 결과: true

console.log(a >= b);
// 출력 결과: false

 

동등 연산자 (Equality operators)

두 변수의 값이 같은지 다른지를 판단

 

a == b  (a가 b와 같다)

a != b  (a가 b와 같지 않다)

 

일치 연산자 (Strict equality operators)

일반적인 프로그래밍 언어들과 다르게 JavaScript에서는 단순히 동등한지 비교하는 것 이외에, 변수의 자료형까지 같은지 엄격하게 비교할 수 있도록 일치 연산자를 제공

 

a === b  (a가 b와 값과 자료형이 모두 같다)

a !== b  (a가 b와 값이나 자료형이 같지 않다)

 

let a = 1;
let b = '1';

console.log(a == b);
// 출력 결과: true

console.log(a != b);
// 출력 결과: false

console.log(a === b);
// 출력 결과: false

console.log(a !== b);
// 출력 결과: true

 

이진 논리 연산자 (Binary logical operators)

true와 false 값만을 가지는 논리형 값을 비교할 때 사용하는 연산자

이진 논리 연산자의 결과 또한 논리형 값

 

● and : 양쪽 모두가 true일 경우에만 true를 반환

a && b  (a와 b가 모두 true일 경우에만 true)

● or : 하나라도 true일 경우 true를 반환

a || b     (a 또는 b가 true일 경우에는 true)

 

let a = true;
let b = false;

console.log(a && b);
// 출력 결과: false

console.log(a || b);
// 출력 결과: true

 

조건부 연산자 (Conditional operator)

조건에 따라 결과가 두 개로 나눠지게 되기 때문에 삼항 연산자(Ternary operator)라고도 함 

조건식 ? true일 경우 : false일 경우 

 

let a = true;
let b = false;

console.log(a ? 1 : 2);
// 출력 결과: 1

console.log(b ? 1 : 2);
// 출력 결과: 2

 

▼ JavaScript 연산자 참고 링크 

Expressions and operators - JavaScript | MDN

---

JavaScript의 함수

함수란?

입력을 받아서 정해진 출력을 하는 것 

함수의 입력을 파라미터(parameters), 인자(arguments)라고 함 

 

// function statement를 사용
function sum(a, b) {
	return a + b;
}

console.log(sum(10, 20));
// 출력 결과: 30

// arrow function expression을 사용
const multipy = (a, b) => {
	return a * b;
}

console.log(multiply(10, 20));
// 출력 결과: 200

 

JavaScript에서 함수를 정의하는 방법 두 가지 : funtion statement를 사용 / arrow function expression을 사용

 

react의 컴포넌트 중 함수 컴포넌트가 하나의 JavaScript 함수임을 기억하자!

 

▼ JavaScript 함수 참고 링크 

Functions - JavaScript | MDN