[2주차] 자바스크립트 문법 종합반 : 연산자, 함수

자바스크립트 문법 종합반

-연산자

 (1) 산술연산자

 (2) 할당연산자

 (3) 비교연산자

 (4) 논리연산자

 (5) 삼항연산자

 (6) 타입연산자

-함수

 (1) 함수 정의하기

 (2) 함수 호출하기

 (3) 함수 매개변수와 반환값

 (4) 함수 스코프

 (5) 화살표 함수

---

연산자

1. 산술연산자 (arithmetic operators)

// 연산자 (+, -, *, /, %)

// 1. 산술 연산자(arithmetic operators)
// 1-1. 더하기 연산자(+)
// 문자열 우선순위
console.log(1 + 1); // 2
console.log(1 + "1"); // 11
console.log("1" + "1"); // 11
// 더하기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 문자열로 변환합니다.

// 1-2. 빼기 연산자(-)
// 숫자 우선순위
console.log(1 - "2"); // -1
console.log(1 - 2); // -1
console.log(5 - 2);       // 3
console.log("five" - 2);  // NaN // 숫자가 아닌 수(하지만 type of 는 number)
// 빼기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

// 1-3. 곱하기 연산자(*)
// 숫자 우선순위
console.log(2 * 3); // 6
console.log("2" * "3"); // 6
console.log(2 * "3");     // 6
console.log("two" * 3);   // NaN // 숫자가 아닌 수(하지만 type of 는 number)
// 곱하기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

// 1-4 나누기 연산자((/)
//숫자 우선순위
console.log(6 / 3);       // 2
console.log("6" / "3");   // 2
console.log("6" / 3);     // 2
console.log(6 / "3");     // 2

let result1 = "six" / 3
console.log("six" / 3);   // NaN // // 숫자가 아닌 수(하지만 type of 는 number)
console.log(typeof result1); // number
// 나누기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

// 1-5. 나머지 연산자(%)
console.log(5 % 2) // 1 // 5 나누기 2 해서 나온 나머지
// 나머지 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

 

 

 

2. 할당 연산자(assignment operators)

// 연산자
// 2. 할당 연산자(assignment operators)
// assignment 할당 ex.오른쪽 값 value를 왼쪽 변수에 할당하는 것
// 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; // x = x + 5 와 같은 말이다. 원래 있던 x값에서 5를 더해줘
console.log(x);   // 15
x += 5; // x = x + 5 와 같은 말이다. 원래 있던 x값에서 5를 더해줘
console.log(x);   // 총 x = 10 에 + 5 총 두번이므로 // 20

// 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. 비교 연산자(comparison operators)
// 좌랑 우랑 또는 어떤 값을 비교해서 true 또는 False 를 반환하는 연산자 // 중요한 개념임

// 3-1. 일치 연산자(===)
// type(자료형)까지 일치해야 true를 반환(return)하는 연산자
console.log(2 === 2);   // 숫자2 와 숫자 2가 같은가? // true
console.log("2" === 2);   // 문자열2 와 숫자 2가 같은가? // false
console.log(2 === "2");   // false

// 3-2. 불일치 연산자(!==)
// 일치 연산자에 반대의 개념, type(자료형)까지 일치해야 true 반환함
console.log(2 !== 2);   // 숫자 2와 숫자 2가 다르니? // false
console.log("2" !== 2);   // 문자열 2와 숫자 2가 다르니? // true
console.log(2 !== "2");   // true

// 3-3. 작다(<) 연산자
// 작다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다. 숫자 우선순위
console.log(2 > 3);   // false
console.log(2 > "3");   // 숫자 2와 문자열 3보다 크니?-> 문자열 3이 숫자 3으로 자동변환 // false
console.log("2" > 3);   // false

// 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. 논리 연산자(logical operators)
// Boolean(ture와 false)를 비교하는 연산자
// strict한 정도 && > ||

// 4-1. 논리곱(&&) 연산자
// 두 값이 모두 true 일때 true 반환
console.log(true && true);   // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);   // false

console.log(true && null); // null
console.log(true && NaN); // NaN
console.log(true && undefined); // undefined

// 4-2. 논리합(||) 연산자
// 두 값 중 하나라도 true 인 경우 true 반환
console.log(true || true);   // true
console.log(true || false);   // true
console.log(false || true);   // true
console.log(false || false);   // false

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

// 4-3. 논리부정(!) 연산자
// 결과값을 반대로 바꿈
console.log(!true);   // false
console.log(!false);   // true
console.log(!(2 > 1));   // false

console.log(!null); // true
console.log(!NaN); // true
console.log(!undefined); // true

let a = true;
console.log(!a); // false

 

 

 

 

5. 삼항 연산자(ternary operator)

// 연산자
// 5. 삼항 연산자(ternary operator)
// 활용 빈도 높음, 중요함
// 조건에 따라 값을 선택한다 // 항이 총 세개라서 삼항 연산자 // 조건항 결과항1 결과항 2
// 조건이 true이면 결과1항을 반환, false면 결과2항을 반환
let x = 10;
let result = (x > 5) ? "크다" : "작다"; // x가 5보다 큰가요 ? // true
console.log(result);   // "크다"

let y = 20; 
// 3항 연산자를 이용해서 y가 10보다 작은 경우 작다를
// console.log로 출력해주세요.
// 10보다 크다면 크다를 출력해주세요
let result1 = ( y < 10 ) ? "작다" : "크다";
console.log(result1); // 크다

 

 

6. 타입 연산자(type operators)

// 연산자
// 6. 타입 연산자(type operators)
// 6-1. typeof 연산자
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"

 

 

---

 

함수

//Function Declaration
function add(x, y) {
  return x + y;
}
console.log(add(1, 3)); // 4

//Function Expression
let add1 = function(a, b) {
  return a + b;
}
let result1 = add1(10, 20);
console.log(result1); // 30

 1. 함수 정의하기

// 함수 = function(기능)
// input, output 을 가지고 있는 단위
// 기능의 단위로 묶은 다음 재활용한다.

// 1. 함수 정의하기
// function (input) {} // 기본 함수식은 function, 소괄호, 중괄호, 매개변수(=input=매개체가 되는 변수)로 이루어진다.

// 1-1. 함수 선언문(function declaration)
// 선언문을 통해 함수 정의하기
function add(x, y) { // add 는 함수이름
 // 함수 내부에서 실행할 로직 넣기
 }

// 두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수
function add (x, y) {
  return x + y; // return = 출력에 필요한 키워드
}

// 위 식을 풀어서 보면
function add (x, y) {
    let result;
    return result;  // result 는 선언 먼저 해줘야함
}


// 1-2. 함수 표현식(function expression)
// 변수를 선언하는 것과 비슷함
let add2 = function(x, y) {
  return x + y;
}

 

 

2. 함수 호출하기

// 2. 함수 호출하기
// 호출한다 = 사용한다
// 함수명(input)
// 예시 : add(2, 3)
function add(x, y) {
  return x + y;
}
console.log(add(2, 3));   // 5

// 또 다른 예시
let addResult = add(3, 4);
console.log(add); // 7

// 연습
// add2를 가지고 10과 20을 더한 값을 출력하라
// 1. 함수 정의하기
// 함수선언문 방법으로 정의, console.log에 함수식과 input 모두 넣어 호출
function add2(x, y) { 
  return x + y;
}; 
console.log(add2(10, 20);) // 30

// 함수표현식으로 정의, result 변수 정의 후 호출
let add2 = function(x, y){
  return x + y; // return 문 뒤에 오는 값 : 반환값
}
let result2 = add2(10, 20);
console.log(result2); // 30

 

 

3. 함수 매개변수와 반환값

// 3. 함수 매개변수와 반환값
// 3-1. 함수 매개변수
// add라는 함수가 x와 y라는 두 개의 매개변수를 받아들인다. 함수를 호출할 때는 매개변수에 값을 전달한다
function add(x, y) {
  return x + y;
}
console.log(add(2, 3));   // 5

// 3-2. 함수 반환값
// add라는 함수가 x와 y라는 두 개의 매개변수를 받아들이고, 이를 더한 값을 반환합니다. 함수를 호출한 결과값을 변수에 할당하여 사용할 수 있습니다.
function add(x, y) {
  return x + y;
}
let result = add(2, 3);
console.log(result);   // 5

 

4. 함수 스코프 (Scope)

// 함수 스코프
// 함수 스코프(scope) : 변수의 영향 범위
// 1. 전역 스코프(global scope)
// 전체 영역에서 영향을 끼칠 수 있다.
let x = 10; // 변수 x는 전체 영역에서 선언이 된 상태

function printX() {
  console.log(x); // 함수 내에서도 x 변수값이 적용됨
}
printX();   // 10 // 함수 밖에서도 모두 x 변수값이 적용됨
// 전역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조합니다. 전역 스코프에서 선언된 변수는 어디에서든지 참조할 수 있습니다.


// 2. 지역 스코프(local scope)
// 함수 내에서만 영향을 끼칠 수 있다.
function printX() {
  let x = 10; // 함수 안에서 선언된 x 변수, 함수 밖을 넘어가면 참조할 수 없는 값이 된다
  console.log(x);
}
printX();   //
// 위의 예제에서는 지역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조합니다. 지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조할 수 있습니다.


// 3. 블록 스코프(block scope)
if (true) {
  let x = 10;
  console.log(x);
}
console.log(x);   // ReferenceError: x is not defined
// if문 내에서 변수 x를 선언하고, 이를 출력합니다. if문 내에서 선언된 변수는 해당 블록 내에서만 참조할 수 있습니다.

 

 

5. 화살표 함수

// 화살표 함수
// ES6 부터 등장한 신 문법이다.
// 기존 함수 식
function add(x, y) {
  return x + y;
}

// 1. 기본적인 화살표 함수
let add = (x, y) => {
  return x + y;
}
console.log(add(2, 3));   // 5


// 2. 한 줄로 된 화살표 함수
// 한줄 화살표 함수를 쓸 수 있는 조건은 중괄호 안에 식이 한줄이면 가능하다
let add = (x, y) => x + y;
console.log(add(2, 3));   // 5
// 위의 예제에서는 한 줄로 된 화살표 함수를 사용하여 add라는 함수를 선언하였습니다. 함수 내부에 return문이 한 줄로 작성될 경우, 중괄호와 return 키워드를 생략할 수 있습니다.

// 3. 매개변수가 하나인 화살표 함수
let square = x => x * x;
console.log(square(3));   // 9
// 위의 예제에서는 매개변수가 하나인 화살표 함수를 사용하여 square라는 함수를 선언하였습니다. 매개변수가 하나일 경우에는 괄호를 생략할 수 있습니다.

// 위 식의 history 를 살펴보자면
function square(x) {
  return x;
}
// ->
let square = (x) => x;
// ->
let square = x => x;