자바스크립트 - 기초 정리 (1) #변수 #자료형 #대화상자 #형변환 #기본연산자 #비교연산자 #조건문 #논리연산자

 

 

공부했던 C와 python과는 사뭇 다른 JS의 문법.

기초 강좌를 보고 정리해보자.

 

참고 강좌 영상 : https://youtu.be/P0FY8k916e0

위 영상 #1 ~ #7 까지의 내용을 참고하였다.

 

 

 

변수

// let은 중복 선언 불가, 재정의 가능
let num = 1;

console.log(num) // 1
let num = 2; // error

num = 2;
console.log(num) // 2

// console.log는 print 역할

let은 중복 선언 불가, 재정의 가능

 

// const는 중복 선언 불가, 재정의 불가
const NUM = 1;

console.log(NUM) // 1
const NUM = 2; // error

const = 2;
console.log(NUM) // error

Tip!

- 변수 선언은 웬만하면 const로 하고, 변경 필요한 변수를 let으로 바꾼다.

- const로 선언한 변수명은 대문자로 한다.

 

 

 

 

자료형

// 숫자형
const age = 30;

// 문자형
const name1 = "Mike";
const name2 = 'Mike';
const name3 = `Mike`;

message = `My name is ${name1}`;

console.log(message) // "My name is Mike";

// 논리형
const a = 1;
console.log(a == 1) // true

// null 과 undefined
let a;
let b = null;

typeof a // undefined
typeof b // object --> null인데 오류임

참조가 필요한 경우 백틱을 사용한.

Windows는 '~'를 shift 없이 누르면 나오는 문자를 사용한다.

MacOS도 마찬가지인데, ₩가 백틱으로 변환되어 나온다.

typeof 는 자료형의 타입을 알 수 있는 연산자이다.

 

 

 

 

대화상자

기본 대화상자에 대해 알아보자.

alert("message") // message를 포함하는 단순 alert 모달 발생.
prompt("message") // message를 포함하여 사용자의 입력을 받는 모달 발생.
confirm("message") // message를 포함하여 사용자가 확인/취소를 누를 때 true/false 입력을 받는 모달 발생.

prompt("message", "default") // default가 사용자 입력 디폴트 값으로 뜬다.

 

 

 

 

형변환

String() : 문자형으로 변환

Number() : 숫자형으로 변환

Boolean() : 불린형으로 변환

 

* prompt로 입력 받은 숫자는 '문자형'으로 저장된다.

  이때, 문자형으로 저장된 '숫자'에 사칙연산을 실행하면 숫자가 된다.

const a = prompt("input1") // 1
const b = prompt("input2") // 2

console.log(a + b) // 12
console.log((a+b)/2) // 6

 

평균을 구하고 싶다면 각 input에 Number() 연산자를 사용하면 된다.

const a = Number(prompt("input1")) // 1
const b = Number(prompt("input2")) // 2

console.log(a + b) // 3
console.log((a+b)/2) // 1.5

 

불린형으로 변환에서

0, '', null, undefined, NaN --> false

나머지 --> true

 

여기서 ''는 false이지만, ' '는 공백이 포함된 문자열로 true가 됨에 유의하자.

 

 

 

 

기본 연산자

+ : 덧셈

- : 뺄셈

* : 곱셈

/ : 나눗셈

 

% : 나머지 연산

// : 몫 연산

** 제곱

 

수학 연산 순서와 같이 제곱, 곱셈/나눗셈, 덧셈,뺄셈 순서로 연산이 실행된다.

따라서 적절한 괄호의 사용이 필요하다.

 

 

 

 

비교 연산자

비교 연산자의 결과는 불린형으로 반환된다.

const a = 1;
const b = 2;

a == b // 동등 연산자, false
a > b // false
a < b // true
a >= b // false
a <= b // true
a != b // true

const c = String(a);
a == c // true
a === c // 일치 연산자로 타입까지 비교함, false

 

 

 

 

조건문

if, else, else if 의 사용을 알아보자.

const age = 30;

// if만
if(age > 19){
	console.log('환영합니다.');
}

// if, else if, else
if(age > 19) {
	console.log('환영합니다.');
} else if(age === 19) {
	console.log('수능 잘 보세요!');
} else {
	console.log('안녕히 가세요.');
}

 

 

 

 

논리 연산자

AND : &&

OR : ||

NOT : !

 

const a = 1;
const b = 2;

a === 1 && b === 2 // true
a === 1 || b === 3 // true

console.log(!a) // false (1은 boolean에서 true로 변환됨)

 

AND와 OR의 중첩에서 'AND 연산이 우선'됨에 유의하자.

 

const a = 1;
const b = 1;
const c = 1;

console.log(a == 1 || b == 0 && c == 0) // true

연산이 순서대로 진행된다면 true || false 에서 true가 되고 다시 true && false 에서 false가 되어야 한다.

하지만 && 가 먼저 계산되므로 false && false에서 false, 다시 true || false에서 true가 된다.

 

Tip

AND(&&)는 false가 나오면 연산을 종료한다.

OR(||)은 true가 나오면 연산을 종료한다.

 

AND를 사용할 때,

'운전면허가 있는 여군' 보다는

'여군이면서 운전면허소지' 가 연산 최적화에 알맞다.

'여군' 이라는 조건에서 더 많은 case는 false를 반환하고 연산을 종료할 것이기 때문.

 

조건문을 사용할 땐 연산 최적화를 고려하자.

 

 

 

 

 

1편 끝 ~