ITWILL : JS를 문서에 나타내는 3가지방법, undefined VS null, 백의자리 Math.floor(), 복합대입연산자로table생성, A++과 ++A차이점, ==과===차이점, 논리표

ITWILL학원 : 3강 JS기초 BY 정규태강사

1. 문서에 js를 나타내는 3가지 방법

1. document.write();

2. console.log();

3. alert();

let a = 100;

// 1번 방법
document.write(a);

// 2번 방법
console.log(a);

// 3번 방법
alert(a)

// 출력값은
셋 다 동일하게 100이 출력된다.
표시되는 곳이 다를 뿐.

2. undefined VS null

• undefined : 변수에 아무런 값도 등록되어 있지 않은 경우
  • var value;
• null : 아무것도 없음을 표현하는 값 따라서 주로 변수를 초기화할때 사용함.
  • var value = null;
  • 객체를 생성하고 사용할 수 있게 하기 위해 null로 초기화한다

3. 변수명 작성

1. 변수명은 영문자로 작성 (첫번째 글자에 $, _ 사용가능)
2. 예약어는 변수명으로 사용할 수없다 ex) False, typeof
3. 변수명은 가능하면 의미를 가지고 생성
4. 대소문자 구분 필수

4. 산술 연산자

예제문제를 푸는데 나는 두가지 방법이 떠올라서 두가지방법으로 풀어보았다

예제문제
Math.floor를 사용하여 세자리 숫자를 연산하면 100의 단위로만 나타내세요
input 456
output 400

let num3 = 778;

	console.log('첫번째방법은 ' + (num3 - num3%100));
	console.log('두번째방법은 ' + (Math.floor(num3*0.01))*100);

5. 대입 연산자

변수에 데이터(값)을 저장하는 연산자
ex) A = B ; 연산의 방향이 오른쪽에서 왼쪽이다

복합대입연산자는 산술연산자에 복합연산자를 함께 사용하는 것으로 그 예에는 +=, -=, *=, /=, %=가 있다
ex) A += B; <=> A = A + B;
ex) A -= B; <=> A = A - B;
ex) A *= B; <=> A = A * B;

복합대입연산자를 활용해 테이플을 편하게 만들 수 있다

let name = "곽두팔";
let age = 77;
let addr = '제주';
	
let tableTag;
tableTag = '<table border="1">';
tableTag += '<tr>';
tableTag += '<td>'+name+'</td>';
tableTag += '<td>'+age+'</td>';
tableTag += '<td>'+addr+'</td>';
tableTag += '</tr>';
tableTag += '</table>';
	
document.write(tableTag)

물론 HTML로 만드는 것이 훨씬 편하지만…ㅋㅋㅋ

6. 증감 연산자(단항연산자)

변수의 앞, 뒤에서 사용하며 값을 1증가 또는 1감소

1. ++A 또는 –A (전위연산) : 변수의 값을 사용할때 1증가 또는 1감소 실행
2. A++ 또는 A– (후위연산) : 변수의 값을 먼저 사용하고 나서 1증가 또는 1감소 실행

let A = 100;
 
//1차 비교
++A;
console.log(A); // 101
A++;
console.log(A); // 102


//2차 비교
console.log('++A : ' + (++A) + ' ' + A); // 101
console.log(A); //101
console.log('A++ : ' + (A++) + ' ' + A); // 101
console.log(A); //102

//3차 비교
let temp = ++A;
console.log(temp) // 103
console.log(A) //103
temp = A++
console.log(temp) // 103
console.log(A) // 104

세미콜론의 위치때문에 1번과 2번의 값이 차이가 생겼다
++A는 A의 값을 변화시키지 않고 콘솔을 찍었고
A++은 A의 값을 1씩 더한 뒤(세미콜론찍고) 콘솔을 찍었다.
즉 변수의 값을 변하시키는 건 A++후위연산이다.

7. 비교연산자

데이터를 비교하는 연산자.
연산의 결과는 boolean 으로 나온다.
<, >, <=, >=, ==, !=, ===, !==

num1 = 10;
num2 = '10';

console.log(num1 === num2) // false
console.log(num1 == num2) // true

console.log(num1 !== num2) // true
console.log(num1 != num2) // false

왜 서로 값이 다르게 나올까?

• == : 데이터의 값만 서용해서 비교
• === : 데이터의 값 + 데이터의 타입을 모두 비교 (높은 정확도)

참고로 위의 개념은 js에만 해당됨

8. 논리연산자

총 3가지의 연산자가 있다

• && AND 두개 넣어서 AND연산자
• || 버티컬바 두개 넣어서 OR연산
• ! 느낌표 넣어서 NOT연산

논리연산자진리표를 꼭 기억해야한다.