[비트캠프] 22일차(5주차2일) - Javascript(연산자, 조건문)

 

변수 사용 우선순위

 

obj는 값을 담는게 아니라 table의 주소를 담는다. 처음 주소 200을 넣은 후 400을 넣을 수 없다.

상수는 한번 값을 저장하면 바꿀 수 없다.

그러나 상수가 가리키는 객체에 값을 추가하거나 변경, 삭제하는 것은 상관없다. 왜? obj라는 상수에 저장된 값(주소)이 바뀌는 것은 아니기 때문이다.

 

 

 

문법

 

 

Literal : 값을 표현하는 문법. 예) "aaa", 'aaa', 10, 3.14, true/false ...

variables : 값을 저장하는 메모리를 준비하는 문법. 예) var/let/const/[ ]

operators : 산술연산자(+,-,*,/,%), 비교연산자(>, >=, <, <=, ==, !=)

제어문 : 명령문의 실행 흐름을 제어

   if ~ else, switch (분기문)

   while, for (반복문)

function : 명령을 재사용할 수 있도록(관리하기 쉽도록) 기능 단위로 묶는 문법

object : 데이터를 다루기 쉽도록 그룹으로 묶는 문법

             함수들을 관리하기 쉽도록 역할 단위로 그룹화하는 문법

module : 객체와 함수들을 재사용하기 쉽도록 그룹으로 묶는 문법 

 

 

 

소수점 자리 변경

Math.ceil(숫자) : 소수 자리 올림해 정수로 만듦

Math.floor(숫자) : 소수 자리 내림해 정수로 만듦

Math.round(숫자) : 반올림 해 정수로 만듦

숫자.toFixed(2) : 소수점 2자리까지 반올림

(숫자).toFixed(2) : 괄호 사용시 문자열 반환

 

 

전위연산자와 후위연산자

console.log(x++);
// console.log(x);
// x = x + 1;

console.log(++y);
// y = y + 1;
// console.log(y);

a = 100;
x = a++ + a++ + a++;
// x = 100 + 101 + 102;
console.log(a, x);  // 103 303

 

다음 코드 실행 순서는

① 100을 현재 자리에 둔다.

② y의 값을 1 증가시킨다.

y = 100;
y = y++;
console.log(y);  // 100
// temp = y
// y = y + 1
// y = temp

 

 

++, -- 연산자는 *, /, % 보다 우선한다.

a = 3;
x = a++ + a++ * a++;
// x = 3 + 4 * 5;
// x = 3 + 20;
// x = 23;
console.log(x)  // 23

 

 

비교연산자

==는 단순 비교, ===는 데이터 타입까지 비교한다.

console.log("100" == 100);  // true: == 연산 전에 숫자 100을 문자열 "100"으로 바꾼 후에 비교한다.
console.log("100" === 100);  // false: === 두 피연산자가 같은 타입이고 값이 같을 때 true 이다. 즉 엄격하게 비교한다.
console.log("100" != 100);  // false: 두 피연산자를 비교하기 전에 100을 "100"으로 형변환한 후에 비교한다.
console.log("100" !== 100);  // true: 일단 두 피연산자의 데이터 타입이 다르기 때문에 값을 비교할 필요가 없이 두 값은 다르다!

문자열을 비교할 때 문자 코드 값(유니코드)을 비교한다.

console.log("AB" > "AC");  // false
console.log("a" > "A");  // true
console.log("똘" < "똠");  // true

 

== 상세 설명

• 숫자와 문자열 비교시 문자열을 숫자로 변환해서 비교한다.
• 하나의 피연산자가 boolean이면 true는 1, false는 +0으로 변환해서 비교한다.
• 하나의 피연산자가 객체이고 다른 하나가 숫자나 문자열이면, 객체를 valueOf()나 toString를 사용해 기본 데이터 타입으로 변환해서 비교한다.

 

 

연산자 - 비트연산자

AND(&), OR(|), XOR(^), NOT(~), >>, <<, >>>

 

이미지와 바이트 수

 

① 흑백 사진은 각 비트를 0, 1로 저장해 픽셀당 1bit이다.

② 칼라 사진은 픽셀당 3byte이다.

③ HD 급 크기 사진은 1920 x 1080 x 3 으로 1장당 용량은 5.93MB 정도다.

천만화소급 사진은 1장에 28MB 정도다. 이를 관리하기 쉽게 압축(encoding)하는데 손실압축(jpeg)와 비손실압축(gif)로 나뉜다. 이를 압축해제(decoding)해서 비트맵으로 변환해서 출력 가능하다.

 

 

 

프로그래밍 트렌드

 

객체 지향 프로그래밍은 덩치 큰 코드의 유지보수를 쉽게 하도록 나왔다.

 

① 절차적 프로그래밍

    초창기 프로그래밍은 작업 중 가고 싶은 곳을 goto로 갔다. 예) basic, cobol

② function

    코드가 길어지니 명령어를 기능 단위로 묶는다. 예) C, cobol, fortran

    → 관리 용이, 재사용성 높음, 가독성 높음.

③ class

    컴퓨터 빨라지니 기능이 많아지고 그러니 함수가 많아진다. 함수를 역할 단위로 묶는다. 예) C++, Java

    → 관리 용이, 재사용성 높음, 가독성 높음

④ package

    기능이 많아지니 클래스 개수가 많아졌다. 그러니 클래스를 그룹으로 묶는다.

⑤ module

    패키지를 묶는다.

 

 

조건 연산자

조건 ? 표현식1 : 표현식2
조건이 참이면, 표현식1을 실행하고 그 결과를 리턴한다.
조건이 거짓이면, 표현식2를 실행하고 그 결과를 리턴한다.

let message = age < 20 ? "미성년입니다" : "성년입니다";

 

 

delete 연산자

객체에 추가한 프로퍼티를 제거한다.

delete obj.name;

delete obj["age"];

 

 

void 연산자

표현식의 결과를 리턴하지 않는다.

console.log(void (x + y));  // undefined

문장 중에 실행 결과를 리턴하는 문장(statement)을 표현식(expression)이라 한다.

 

 

in 연산자

객체에 해당 이름을 가진 프로퍼티가 있는지 검사한다.

const obj2 = {
  name: "홍길동",
  age: 20,
  working: true,
  print() {
    console.log(this.name + '(' + this.age + ',' + this.working + ')');
  }
}

console.log(obj2);
obj2.print();

console.log('name' in obj2);  // true
console.log('age' in obj2);  // true
console.log('working' in obj2);  // true
console.log('print' in obj2);  // true
console.log('tel' in obj2);  // false

 

 

instanceof 연산자

객체를 만들 때 초기화시킨 생성자가 맞는지 검사한다.

자바의 상속과 다른 개념으로 객체 생성시 다른 객체를 호출한다.

const obj3 = new Object();
const obj4 = {};
const obj5 = new Date();

console.log(obj3 instanceof Object);
console.log(obj4 instanceof Object);
console.log(obj5 instanceof Object);
console.log("-------------------------")

const obj6 = document.getElementById('btn1');
console.log(obj6);
console.log(obj6.constructor);
console.log(obj6 instanceof HTMLButtonElement);
console.log(obj6 instanceof HTMLElement);
console.log(obj6 instanceof Element);
console.log(obj6 instanceof Node);
console.log(obj6 instanceof EventTarget);
console.log(obj6 instanceof Object);
console.log(obj6 instanceof Date);

 

 

 

Date() 생성자

 

-new Date() 를 입력하면

new 로 ① 빈 객체 생성한다.

Date() 로 Object() ② 초기화 시킨다. 이때 toString, valueOf 등이 들어간다.

                   Date()가 날짜 관련 프로퍼티(변수, 함수) 추가한다.

 

-new HTMLButtonElement() 를 입력하면

① new 로 빈 객체 생성한다.

② Object 로 객체 관련 프로퍼티를 추가한다.

③ EventTarget 관련 프로퍼티를 추가한다.

④ Node() 관련 프로퍼티를 추가한다.

⑤ Element() 관련 프로퍼티를 추가한다.

⑥ HTMLElement() 관련 프로퍼티를 추가한다.

⑦ HTMLButtonElement 의 프로퍼티를 추가하여 초기화한다.

 

 

조건문 if

if else 문법은 원래 존재하지 않는다.

 

 

조건문 switch

break를 만날때까지 실행한다.

 

 

 

---

 

조언

 

*원하는 회사 자격 조건을 수시로 찾아보라.

*SI 5년 이내일때 큰 기업으로 이직하는게 유리하다.

*초보때 속도 신경쓰지 말고 기능 만들어 놓고 가독성, 유지보수 좋게 하는데 집중하라.

*CS50 강좌 들어라. (edwith)

 

 

---

 

과제

 

/