JavaScript 연산자 / 함수

 

1. 산술 연산자 (arithmetic operators)

1-1. 더하기 연산자 +

console.log(2 + 3);       // 5
console.log("2" + "3");   // "23"
console.log("2" + 3);     // "23"
console.log(2 + "3");     // "23"

 

더하기 연산자를 사용하여 숫자나 문자열을 더할 수 있습니다. 이때, 더하기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 문자열로 변환합니다.

 

 

1-2. 빼기 연산자 -

console.log(5 - 2);       // 3
console.log("5" - "2");   // 3
console.log("5" - 2);     // 3
console.log(5 - "2");     // 3
console.log("five" - 2);  // NaN

 

빼기 연산자를 사용하여 숫자를 뺄 수 있습니다. 이때, 빼기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

 

 

1-3. 곱하기 연산자 *

console.log(2 * 3);       // 6
console.log("2" * "3");   // 6
console.log("2" * 3);     // 6
console.log(2 * "3");     // 6
console.log("two" * 3);   // NaN

 

곱하기 연산자를 사용하여 숫자를 곱할 수 있습니다. 이때, 곱하기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

 

 

1-4. 나누기 연산자 /

console.log(6 / 3);       // 2
console.log("6" / "3");   // 2
console.log("6" / 3);     // 2
console.log(6 / "3");     // 2
console.log("six" / 3);   // NaN

 

나누기 연산자를 사용하여 숫자를 나눌 수 있습니다. 이때, 나누기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

 

 

1-5. 나머지 연산자 %

console.log(7 % 3);       // 1
console.log("7" % "3");   // 1
console.log("7" % 3);     // 1
console.log(7 % "3");     // 1
console.log("seven" % 3); // NaN

 

나머지 연산자를 사용하여 나눗셈의 나머지를 구할 수 있습니다. 이때, 나머지 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

 

 

 

2. 할당연산자 (assignment operators)

2-1. 등호연산자 =

let x = 10;
console.log(x);   // 10

x = 5;
console.log(x);   // 5

 

등호 연산자를 사용하여 변수에 값을 할당할 수 있습니다.

 

 

2-2. 더하기 등호 연산자 +=

let x = 10;
console.log(x);   // 10

x += 5;
console.log(x);   // 15

 

더하기 등호 연산자를 사용하여 변수에 값을 더할 수 있습니다.

 

 

2-3. 빼기 등호 연산자 -=

let x = 10;
console.log(x);   // 10

x -= 5;
console.log(x);   // 5

 

빼기 등호 연산자를 사용하여 변수에서 값을 뺄 수 있습니다.

 

 

2-4. 곱하기 등호 연산자 *=

let x = 10;
console.log(x);   // 10

x -= 5;
console.log(x);   // 50

 

곱하기 등호 연산자를 사용하여 변수에 값을 곱할 수 있습니다.

 

 

2-5. 나누기 등호 연산자 /=

let x = 10;
console.log(x);   // 10

x /= 5;
console.log(x);   // 2

 

나누기 등호 연산자를 사용하여 변수에서 값을 나눌 수 있습니다.

 

 

2-6. 나머지 등호 연산자 %=

let x = 10;
console.log(x);   // 10

x %= 3;
console.log(x);   // 1

 

나머지 등호 연산자를 사용하여 변수에서 값을 나눈 나머지를 구할 수 있습니다.

 

3. 비교 연산자 (comparison operators)

3-1. 일치 연산자 

console.log(2 === 2);   // true
console.log("2" === 2);   // false
console.log(2 === "2");   // false

 

일치 연산자를 사용하여 두 값이 같은지 비교할 수 있습니다. 이때, 일치 연산자는 자료형까지 비교합니다.

 

 

3-2. 불일치 연산자 !==

console.log(2 !== 2);   // false
console.log("2" !== 2);   // true
console.log(2 !== "2");   // true

 

불일치 연산자를 사용하여 두 값이 다른지 비교할 수 있습니다. 이때, 불일치 연산자는 자료형까지 비교합니다.

 

 

3-3. 작다 연산자 <

console.log(2 < 3);   // true
console.log(2 < "3");   // true
console.log("2" < 3);   // true

 

작다 연산자를 사용하여 두 값을 비교할 수 있습니다. 이때, 작다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

 

 

3-4. 크다 연산자 >

console.log(2 > 3);   // false
console.log(2 > "3");   // false
console.log("2" > 3);   // false

 

크다 연산자를 사용하여 두 값을 비교할 수 있습니다. 이때, 크다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

 

 

3-5. 작거나 같다 연산자 <=

console.log(2 <= 3);   // true
console.log(2 <= "3");   // true
console.log("2" <= 3);   // true
console.log(2 <= 2);   // true

 

작거나 같다 연산자를 사용하여 두 값을 비교할 수 있습니다. 이때, 작거나 같다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

 

 

3-6. 크거나 같다 연산자 >=

console.log(2 >= 3);   // false
console.log(2 >= "3");   // false
console.log("2" >= 3);   // false
console.log(2 >= 2);   // true

 

크거나 같다 연산자를 사용하여 두 값을 비교할 수 있습니다. 이때, 크거나 같다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

 

 

4. 논리 연산자 (logical operators)

4-1. 논리곱 연산자 &&

console.log(true && true);   // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);   // false

 

논리곱 연산자를 사용하여 두 값을 비교할 수 있습니다. 이때, 논리곱 연산자는 두 값이 모두 true일 경우에만 true를 반환합니다.

 

 

4-2. 논리합 연산자 ||

console.log(true || true);   // true
console.log(true || false);   // true
console.log(false || true);   // true
console.log(false || false);   // false

 

논리합 연산자를 사용하여 두 값을 비교할 수 있습니다. 이때, 논리합 연산자는 두 값 중 하나라도 true일 경우 true를 반환합니다.

 

 

4-3. 논리부정 연산자 !

console.log(!true);   // false
console.log(!false);   // true
console.log(!(2 > 1));   // false

 

논리부정 연산자를 사용하여 값을 반대로 바꿀 수 있습니다. 이때, 논리부정 연산자는 true를 false로, false를 true로 바꿉니다.

 

 

 

5. 삼항 연산자 (ternary operator)

let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result);   // "크다"

 

삼항 연산자를 사용하여 조건에 따라 값을 선택할 수 있습니다. 이때, 삼항 연산자는 조건식 ? true일 때의 값 : false일 때의 값 형태로 사용합니다.

 

 

 

6. 타입 연산자 (type operators)

console.log(typeof 123);   // "number"
console.log(typeof "123");   // "string"
console.log(typeof true);   // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);   // "object"
console.log(typeof {});   // "object"
console.log(typeof []);   // "object"
console.log(typeof function(){});   // "function"

 

typeof 연산자를 사용하여 값의 자료형을 확인할 수 있습니다. 이때, typeof 연산자는 원시 자료형의 경우, 해당 자료형의 이름을, 객체나 함수의 경우, "object" 또는 "function"을 반환합니다. typeof null의 경우 "object"를 반환하는 버그가 있습니다.

 

 

 

7. 함수

7-1. 함수 선언문

function Add (x, y) {
    return x + y;
}

 

function 키워드를 사용하여 add라는 함수를 선언하였습니다. 함수 선언문을 사용하면 함수를 미리 정의해두고, 필요할 때 호출할 수 있습니다.

 

 

7-2. 함수 표현식

let add = function (x, y){
    return x + y;
}

 

function 키워드를 사용하여 add라는 변수에 함수를 할당하였습니다. 함수 표현식을 사용하면 함수를 변수에 할당하여 익명 함수를 생성할 수 있습니다.

함수 선언문 / 함수 표현식은 동일하게 작동하고 동일한 역할을 한다.

 

 

7-3. 함수 호출

함수 호출 1
console.log(add(10, 20));

함수 호출 2
let functionResult = add(10, 20);
console.log(functionResult);

 

위에서 만든 함수를 사용하려면 호출을 해야 한다.

함수의 input 은 매개변수 (매개체가 되는 변수)

함수의 return 문 뒤에 오는 값은 반환값 이라고 한다.

 

8. 스코프

8-1. 전역 스코프 (global scope)

let x = 10;

function printX() {
  console.log(x);
}

printX();   // 10

 

전역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조합니다. 전역 스코프에서 선언된 변수는 어디에서든지 참조할 수 있습니다.

 

 

8-2. 지역 스코프 (local scope)

function printX() {
  let x = 10;
  console.log(x);
}

printX();   //

 

지역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조합니다. 지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조할 수 있습니다.

 

 

9. 화살표 함수 (arrow function)

화살표 함수는 Es6 에서 등장한 신 문법 이라고 한다. 되도록이면 function 를 잘 다루고 난 뒤에 화살표 함수로 찬찬히 넘어가는 것을 추천

9-1. 기본적인 화살표 함수

let add = (x, y) => {
  return x + y;
}

console.log(add(2, 3));   // 5

 

 

9-2. 한 줄로 된 화살표 함수

let add = (x, y) => x + y;

console.log(add(2, 3));   // 5

 

 

9-3. 매개변수가 하나인 화살표 함수

let square = x => x * x;

console.log(square(3));   // 9