개발자입니다
[비트캠프] 22일차(5주차2일) - Javascript(연산자, 조건문) 본문
[비트캠프] 22일차(5주차2일) - Javascript(연산자, 조건문)
끈기JK 2022. 12. 6. 11:34
변수 사용 우선순위
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)
과제
/
'네이버클라우드 AIaaS 개발자 양성과정 1기 > Javascript' 카테고리의 다른 글
[비트캠프] 24일차(5주차4일) - Javascript(함수: 정의, closure, arrow function) (0) | 2022.12.08 |
---|---|
[비트캠프] 23일차(5주차3일) - Javascript(배열, 반복문, destructuring) (0) | 2022.12.07 |
[비트캠프] 21일차(5주차1일) - Javascript(변수, 배열) (0) | 2022.12.05 |
[비트캠프] 20일차(4주차5일) - Javascript(개요) (0) | 2022.12.02 |
[비트캠프] 19일차(4주차4일) - 프로그래밍 언어론 (0) | 2022.12.01 |