LIGHTIXXX

자바스크립트의 연산자는 할당, 비교, 산술, 비트, 논리, 문자열, 조건, 쉼표, 단항, 관계 등 다양한 연산자가 있다.

이항 연산자

하나는 좌변(피연산자1)에 다른 하나(피연산자2)는 우변에 두개의 피연산자가 필요하다.

피연산자1  연산자  피연산자2
   1      +       2

단항 연산자

연산자 뒤나 앞에 하나의 피연산자가 필요하다.

피연산자  연산자
  x      ++

할당 연산자

오른쪽 피연산자의 값을 왼쪽 피연산자에 할당한다.

기본적인 할당연산자는 오른쪽의 피연산자 값을 왼쪽 피연산자 값에 할당하는 등호(=)이다.

즉 x = y 는 y값을 x에 할당한다.

복합 할당 연산자

비교 연산자

피연산자들을 비교하고, 비교에 따라 논리 값을 반환한다. 피연산자들은 숫자, 문자열, 논리형, 객체를 사용한다.

문자열은 유니코드 값을 사용하여 표준 사전순서를 기반으로 비교한다. 만약 두 피연산자가 다른 형태일 경우, JavaScript는 대부분 비교를 위해 피연산자를 적절한 타입으로 변환한다. 이런 행동은 보통 숫자로 피연산자를 숫자로 비교하는 형태로 나타난다. 형태를 바꾸기의 유일한 예외는 엄격한 비교를 수행하는 === 과 !== 연산이 관련되는 경우다. 이런 연산자는 비교를 위해 피연산자의 형태를 적절히 바꾸려고 시도하지 않는다.

const a = 3,
      b = 4;

산술 연산자

숫자값(리터럴 또는 변수)을 피연산자로 갖고, 하나의 숫자 값을 반환한다.

기본적인 산술연산자는 덧셈( + ), 뺄셈( - ), 곱셈( * ), 나눗셈( / )이다. 이 연산자들은 대부분의 다른 프로그래밍 언어들이 부동소수점 값을 연산하는 것처럼 동작한다.

논리 연산자

논리 연산자는 보통 불리언 값과 사용된다.

불리언 값들과 사용될 때, 연산자는 불리언 값을 반환한다. 그러나, && 과 || 연산자는 실제로 명시된 피연산자들 중 하나를 반환한다. 따라서 만약 이 연산자들이 불리언 값이 아닌 값들과 함께 쓰였을 때, 그들은 불리언 값이 아닌 값을 반환할지도 모른다.

false로 변환될 수 있는 표현 예제들은 null, 0, NaN, 빈 문자열 ( " " ), 또는 정의되지 않음으로 평가될 수 있다.

const a1 = true && true; // true
const a2 = true && false; // false
const a3 = false && ture; // false
const a4 = false && (3 == 4 ); // false
const a5 = "dog" && "cat"; // "cat"
const a6 = false && "cat"; // false
const a7 = "cat" && false; // false

const a1 = true || true; // true
const a2 = false || true; // true
const a3 = true || false; // true
const a4 = false || (3 == 5); // false
const a5 = "dog" || "cat"; // "dog"
const a6 = false || "dog"; // "dog"
const a7 = "dog" || false; // "dog"

const a1 = !true; // false
const a2 = !false; // true
const a3 = !"dog"; // false

단락평가

논리 연산자가 왼쪽에서 오른쪽으로 평가될 때, 논리연산자는 다음의 규칙을 따라서 "단축 계산"으로 검사된다.

- false && anything 은 false로 단축 계산된다.

- true || anything 은 true로 단축 계산된다.

이 논리 규칙들은 늘 정확하다. 위에서 anything 부분은 평가되지 않고, 어떤 부작용도 아무런 효과를 미치지 못한다.

문자열 연산자

문자열 값으로 사용될 수 있는 비교 연산자에 덧붙여서, 연결 연산자 ( + ) 는 두 문자열 값을 연결하고, 두 문자열이 합쳐진 새로운 문자열을 반환한다.

console.log("Hello" + " world!"); //"Hello world!"

복합 할당 연산자인 += 도 문자열을 연결하는데 사용할 수 있다.

let myName = "lig";
myName += "htix";

console.log(myName); //"lightix"

조건(삼항) 연산자

조건 연산자는 JavaScirpt에서 3개의 항을 사용하는 유일한 연산자다. 조건 연산자는 조건에 따라 2개의 값 중 하나를 가질 수 있다.

조건 ? 값1 : 값2

만약 조건이 참이면, 조건 연산자는 값1을 값으로 갖는다. 그렇지 않은 경우 값2를 값으로 갖는다.

const age = 3;
const status = (age >= 18) ? "adult" : "minor";

console.log(status); //minor

age 변수가 18보다 같거나 클 때 "adult" 값을 status 변수에 할당한다. 그렇지 않은 경우 "minor"값을 status변수에 할당한다.

쉼표 연산자

쉼표 연산자 ( , )는 두 피연산자를 평가하고, 마지막 피연산자의 값을 반환한다. 이 연산자는 주로 for 반복문 안에서 각각의 시간에 복수의 변수들을 갱신하기 위해 사용한다.

예를 들어, a는 각 변에 10개의 원소가 있는 2차원 배열일 때, 다음의 코드는 두 변수를 한번에 증가시키기 위해 쉼표 연산자를 사용했다. 이 코드는 배열의 대각선에 위치한 원소를 출력한다.

const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const a = [x, x, x, x, x];

for (let i = 0, j = 9; i <= j; i++, j--) {
  console.log(`a[${i}][${j}] = ${a[i][j]}`);
}

단항 연산자

단항 연산자는 오직 하나의 피연산자를 갖고 연산을 한다.

- delete 연산자 : delete 연산자는 객체, 객체의 속성 또는 배열의 특정한 위치에 있는 객체를 삭제한다. 

delete objectName;
delete objectName.property;
delete objectName[index];
delete property;

네번째 형태의 경우, 객체의 속성을 삭제하기 위하여 with 구문이 있어야만 동작을 한다.

또한 const 구문을 사용하지 않고 묵시적으로 만들어진 변수를 삭제할 때 사용할 수 있다. 만약 delete 연산자의 동작이 성공했다면, delete 연산자는 속성이나 원소를 undefined로 설정한다. delete 연산자는 연산이 수행 가능할 때 true값을 반환한다. 수행이 불가능할 경우 false 값을 반환한다.

x = 20;
const y = 30;
object = new Number();
object.h = 5;     // h 속성을 만듦
delete.x;         // true (암묵적으로 선언된 경우 제거할 수 있음)
delete.y;         // false (const로 선언된 경우 제거할 수 없음)
delete Math.pi;   // false (미리 정의된 속성의 경우 제거할 수 없음)
delete object.h;  // ture  (사용자가 정의한 속성의 경우 제거할 수 있음)
delete object;    // true  (암묵적으로 선언된 경우 제거할 수 있음)

delete 연산자로 배열의 원소 삭제

배열의 원소를 삭제할 때, 배열의 길이에는 영향을 주지 못한다. 예를 들어, a[3], a[4]를 삭제했다면, a[3], a[4]는 undefined(정의되지 않음) 상태가 된다. delete 연산자가 배열의 한 원소를 삭제하였을 때, 그 원소는 배열에 존재하지 않는다. 다음의 예제에서, cafe[3]은 delete 연산자에 의해 제거됐지만, cafe[3]은 아직 다룰 수 있고 undefined를 리턴한다.

const cafe = ["starbucks", "ediya", "coffeebean", "twosomeplace", "hollys"];
delete cafe[3];
console.log(cafe[3]); //undefined

만약 배열의 원소가 존재하지만 undefined(정의되지 않음)값을 갖고 싶으면, delete 연산자 대신 undefined 키워드를 사용하자.

const cafe = ["starbucks", "ediya", "coffeebean", "twosomeplace", "hollys"];
cafe[3] = undefined;
console.log(cafe[3]); //undefined

- typeof 연산자 : 피연산자의 타입을 나타내는 문자열을 반환한다. 피연산자는 어떤 타입인지 반환 될 문자열, 변수, 키워드, 객체이다.

typeof 피연산자;
typeof (피연산자);

const myFun = new Function("5 + 2");
const shape = "round";
const size = 1;
const foo = ['Apple', 'Mango', 'Orange'];
const today = new Date();

typeof myFun;     // "function"
typeof shape;     // "string"
typeof size;      // "number"
typeof foo;       // "object"
typeof today;     // "object"
typeof dontExist; // "undefined"

typeof true;      // "boolean"
typeof null;      // "object"
typeof 20;        // "number"
typeof 'Hello';   // "string"

typeof 연산자는 객체의 속성이 갖고있는 타입의 값을 반환한다.

typeof document.lastModified; // returns "string"
typeof window.length;         // returns "number"
typeof Math.LN2;              // returns "number"

typeof 연산자는 메소드와 함수를 함수로 반환한다.

typeof blur;        // returns "function"
typeof eval;        // returns "function"
typeof parseInt;    // returns "function"
typeof shape.split; // returns "function"

typeof 연산자는 미리 정의된 객체에 대해 다음과 같은 결과를 반환한다.

typeof Date;     // returns "function"
typeof Function; // returns "function"
typeof Math;     // returns "object"
typeof Option;   // returns "function"
typeof String;   // returns "function"

관계 연산자

관계 연산자들을 비교하고, 비교의 참 여부에 기반하여 불리언 값을 반환한다.

- in 연산자 : 객체의 특정한 속성이 있는 경우 true를 반환한다.

propNameOrNumber in objectName

propNameOrNumber 는 속성의 이름을 나타내는 문자열 또는 배열의 인덱스를 나타내는 숫자이고, objectName은 객체의 이름이다.

const cafe = ["starbucks", "ediya", "coffeebean", "twosomeplace", "hollys"];
0 in cafe;         // true
3 in cafe;         // true
10 in cafe;        // false
"ediya" in cafe;   // false (인덱스 번호를 지정해야한다)
"length" in cafe;  // true (배열의 기본속성)

// 내장객체
"PI" in Math;      // true

// 생성된 객체
const lightix = { name: "lightix", sex: "Male", birth: "1993"};
"name" in lightix; // true
"sex" in lightix;  // true

- instanceof 연산자 : 명시된 객체가 명시된 객체형이 맞는 경우 true를 반환한다.

objectName instanceof objectType

objectName은 objectType과 비교할 객체의 이름이고, objectType은 Date 또는 Array와 같은 객체형이다.

instanceof 연산자를 동작시간에 객체의 형태를 확인할 필요가 있을때 사용하라. 예를 들어, 예외가 발생했을 때, 던져진 예외의 형태에 따라 예외를 처리하는 코드로 나뉘게 할 수 있다.

다음의 코드는 instanceof 연산자를 theDay 객체가 Date 형의 객체인지 알아내는 코드이다.

const theDay = new Date(1993, 12, 24);
console.log(theDay instanceof Date);   // true

연산자 우선순위

구문을 수행할 때 수행될 순서를 결정한다. 괄호를 통해 우선순위를 재정의할 수 있다.

다음 표는 우선순위가 높은 순서부터 낮은 순서까지 설명하고 있다.

변수 : 프로그램 실행 중에 상황에 따라 다른 데이터를 표현하는 값을 의미

상수 : 프로그램 실행 중 항상 같은 데이터를 표현하는 값을 의미

소스코드의 고정된 값을 대표하는 용어 (출처 : 위키백과)

https://ko.wikipedia.org/wiki/%EB%A6%AC%ED%84%B0%EB%9F%B4

Javascript에서 값을 나타내기 위해 리터럴을 사용합니다. 이는 말 그대로 스크립트에 부여한 고정값으로, 변수가 아닙니다. (출처 : MDN)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#%EB%A6%AC%ED%84%B0%EB%9F%B4

리터럴은 어떤 값을 가르키는 것이 아니라 변수 및 상수에 저장되는 '고정 형태의 값 자체'를 지칭한다.

const a = 1;

a는 변수명, 1은 리터럴을 의미한다.

const obj = {
  "name" : "lightix",
  "age" : "10"
};

obj는 변수명(객체), "name", "lightix", "age", "10"은 리터럴이다.

라고 이해하는 게 맞는지 모르겠다.

<table> - 테이블을 만들기 시작할 때 사용

<tr> - 하나의 행(가로줄)을 만들 때 사용 (table row)

<th> - 하나의 열(칸)을 대표하는 셀 만들 때 사용 (table header)

<td> - 하나의 열(칸)의 데이터를 만들 때 사용 (table data)

테이블의 레이아웃에 영향을 주지 않고 묶을 때 사용하는 태그

<thead> - 표의 머리글

<tbody> - 표의 본문

<tfoot> - 표의 바닥글 (총합, 요약 등에 사용)

<table>
  <thead>
    <tr>
      <th> ID </th>
      <th> 이름 </th>
      <th> 취미 </th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td> lightixxx </td>
      <td> 라이틱스 </td>
      <td> 사진촬영 </td>
    </tr>
    <tr>
      <td> lalala </td>
      <td> 라라라 </td>
      <td></td> <!-- 빈칸이더라도 th의 개수와 맞춰준다 -->
    </tr>
  </tbody>
  
  <tfoot>
  </tfoot>
</table>

🚨 Syntax alert 🚨 

<th>와 <td>의 개수를 맞춰야 한다

단, rowspan이나 colspan으로 확장이 된 경우는 생략한다

추가 attribute

rowspan=" " : 숫자만큼 행 병합

colspan=" " : 숫자만큼 열 병합

scope=" " : 누구의 머리글 칸인지 명시 (col, colgroup, row, rowgroup)