JS 변수, 자료형

0. 변수에 앞서, alert()와 console.log 창을 이용해 입력된 코드의 결과를 확인할 수 있다.

 

 0-1) alert()를 이용한 결과 확인(접속된 페이지의 메세지)

 0-2) console.log()를 이용한 결과 확인

0. 한 문장이 끝나고 난 뒤 세미콜론(;)이 없어도 정상동작 하지만,

가독성이나 오작동을 예방할 수 있도록 세미콜론을 붙여 주는 좋은 습관이 필요하다.

반응형

 

이제 진짜 JavaScript 시작

 

1. 변수

 : 프로그래밍에서 연산을 위해 자료 값을 저장하는 것

 

 

예시)

name = "Mike"; // 문자열을 입력
age = 30; // 숫자를 입력

유의 사항으로

1. 변수명 = 변수값 ; 형태로 구성한다.

2. 세미콜론(;) 으로 마지막을 알려준다. 생략해도 되지만 오류나 얘기치 못한 에러 방지를 위해 사용해주는 편이 좋다.

3. 문자열을 표시할 경우, 쌍따옴표("), 홑따옴표('), `(/키보드 1 좌측 버튼)없으면 에러가 발생할 수 있으며, 예약어(Reserved Words)는 사용 할 수 없다.

4. 중복 방지를 위해 const 또는 let 을 상황에 맞게 사용한다.

let '변수명' 으로 사용 시, 현재 사용 중인 변수인지 확인 할 수 있고,

실제 해당 값을 변경하려면 변경 또한 가능하다.

const는 상수를 입력할 때 사용하며, 수정할 수 없다.

PI나 대문자로 표시

 

모든 변수를 const 선언, 수정이 발생할 것으로 예상되거나 상황이 오면 let으로 변경

 

1) 변수는 문자와 숫자, $와 _만 사용 가능

2) 첫글자는 숫자가 될 수 없다.

3) 예약어는 사용할 수 없다.

4) 상수는 대문자 사용을 권장

5) 변수명은 읽기 쉽고 이해할 수 있게 선언

  => 커멜 표기법

 

 

02. 자료형

1) 문자형 - 쌍따옴표, 홑따옴표, 백틱..

(사실 백틱을 맨날 1번 옆에 있는거라고만 부르다 이번에 용어를 처음 알았다....)

const name = "Mike"; // 문자형 String
const age = 30; // 숫자형

//string 입력 방법
const name1 = "Mike"; // 쌍따옴표 이용
const name2 = 'Mike'; // 홑따옴표 이용
const name3 = `Mike`; // 백틱 이용

// 홑따옴표(')를 입력하고 싶을 경우,
const message = "I'm a boy."; // 결과 값 : I'm a boy.
const message2 = 'I\'m a boy.'; // 결과 값 : I'm a boy.

const message3 = `My name is ${name}`; // 백틱 사용 시, 변수 값 표현 방법
console.log(message3)  // 결과 값 : My name is Mike

const message4 = `나는 ${30+1}살 입니다.`; // 백틱 사용 시, 기본 연산도 가능
console.log(message4)  // 결과 값 : 나는 31살 입니다.

쌍따옴표와 홑따옴표의 기능 차이는 없으나,

일상 생활에서 쌍따옴표와 홑따옴표는 사용 용도가 정해져 있다.

예를 들어

"나도 코딩 잘하고 싶다." 라고 적힌 텍스트를 보면 해당 텍스트를 입을 통해 말한 표현으로 사용하고,

'나도 코딩 잘할수 있는데....' 라고 적힌 텍스트는 속으로 말한것 같은 표현이 된다.

이런 상황에 대한 표기가 아니더라도 영어 에서는 약어로 표기하기 위해 홑따옴표를 사용하게 되는데,

 

그럴 경우 3가지 방법으로 적용가능하다.

 

1. 쌍따옴표와 홑따옴표를 서로 믹스 매치

  : 시작과 끝을 쌍따옴표 또는 홑따옴표를 입력하여 문자열을 표시하여 주고 원하는 문자를 입력

console.log('"나도 코딩 잘하고 싶다."') //쌍따옴표 표기하고 싶을 때
console.log("'나도 코딩 잘할수 있는데...'") //홑따옴표 표기하고 싶을 때

 

 2. 역슬러쉬(\)를 이용하는 방법

console.log('천천히... \'Step By Step\'')  //천천히 'Step by Step'

 

 3. 백틱을 이용하는 방법

  :  키보드의 'Esc' 버튼 아래에 있는 홑따옴표와 방향이 반대인 특수 기호

백틱을 이용할 경우, 정상적으로 홑따옴표가 표기되는 것을 볼 수 있고,

console.log(`처음 들어보는 '백틱'`) // 처음 들어보는 '백틱'

백틱을 사용하면 변수를 포함한 출력도 좀 더 간결하고 깔끔하게 표현할 수 있다.

name을 선언하고, ${변수명}으로 출력할 수 있다.

let name ='To올라운더'

console.log(`이 글은 ${name}에 의해 작성되었습니다.`)
// 백틱 + 변수 출력
// 출력 결과 : 이 글은 To올라운더에 의해 작성되었습니다.

console.log("이 글은 ${name}에 의해 작성되었습니다.")
// 쌍따옴표 + 백틱과 같이 입력할 경우, 변수를 문자로 인식
// 출력 결과 : 이 글은 ${name}에 의해 작성되었습니다.

console.log("이 글은 " +name+ "에 의해 작성되었습니다.")
// 쌍따옴표 + 문자열의 연산자와 함께 표기해야 원하는 결과를 출력
// 출력 결과 : 이 글은 To올라운더에 의해 작성되었습니다.

 

* 백틱은 문자 연산 뿐 아니라, 산술 연산 등도 가능하다.

const message4 = `나는 ${30+1}살 입니다.`
console.log(message4)

 

2) 숫자형

  : 문자열(string)의 경우, 쌍따옴표, 홑따옴표, 백틱으로 감싸는 형태인것 과 달리,

    숫자형(Number)은 숫자만 입력한다. (소수점 표기를 위해 '.' 은 입력 가능)

const age = 30; //숫자형 Number
const PI = 3.14;

console.log(1 + 2); // 더하기
console.log(10 - 3); // 빼기
console.log(3 * 2); // 곱하기
console.log(6 / 3); // 나누기
console.log(6 % 4); // 나머지

 

 2-1) 0 나누기 -> Infinity

   : 특정 언어의 경우, Error를 발생하는데 반해, JS는 Infinity로 출력된다. 

   :  조금 특이한 건, 해당 결과가 문자열처럼 보이지만, 실제 자료형은 'number' 로 나타난다.

const x = 5;
console.log(x/0); // Infinity
console.log(typeof(x/0)); // Number

 

2-2) 문자를 숫자로 나누기

   : Not a Number의 약자로, 숫자가 아님을 표기. 숫자 작업을 할 때 항상 염두에 두고 작업 진행 필요.

const name ='To올라운더';
const test = name / 2;
console.log(test) // 결과 값 NaN

 

 

3. Boolean

  : 참(true), 거짓(false) 를 나타냄 / 논리 연산시 사용

const a = true;
const b = false;

const name = 'To올라운더';
const age = 20;

console.log(name == 'To올라운더');
console.log(age < 18);

이후 배우게 될 조건문의 결과에 따라 name 이라는 변수가 'To올라운더' 가 맞는지 확인 후, 참(true)

age 가 18보다 작은지 확인 후, 거짓(false) 출력

 

 

4. null, undefined

 1) null : 존재 하지 않는 값

     : 실제 null은 객체가 아니지만 하위 버전과의 일관성을 유지하기 위해 object로 표기

let user = null;
console.log(user); // 결과 값 : null
console.log(typeof(user)); // 결과 값 : object

 

 2) undefined : 값이 할당 되지 않음.

let heghit; // 일반적으로 let heghit = 180; 처럼 선언 및 값을 할당

 

이 외에도 객체형, 심불형이 있음.

 

5. typeof 연산자

1) type 확인

   : 위의 예시에서도 일부 확인했듯이 typeof 연산자를 통해 해당 자료형을 확인할 수 있다.

   : 2인 이상 개발 작업을 진행하거나, 다른 사람이 개발해 놓은 API 등과 연동하기 위해서는 

     해당 변수의 type을 알아야 정확한 작업을 진행할 수 있다.

const name = "To올라운더";


console.log(typeof 3);  // 결과 값 : number
console.log(typeof name);  // 결과 값 : string
console.log(typeof true);  // 결과 값 : boolean
console.log(typeof "xxx");  // 결과 값 : string
console.log(typeof null);  // 결과 값 : object
console.log(typeof undefined);  // 결과 값 : undefined

 

2) type이 다를 경우, type을 일관되게 변경하여 출력

2-1) 문자열(string) 끼리의 출력은 '+'로 연결 가능.

const name = "To올라운더";

const a = "나는 ";
const b = " 입니다.";

console.log(a + name + b);
//결과 값 나는 To올라운더 입니다.

 

2-2) number 등 type이 상이할 경우, string으로 변경 후 출력

const age = 30;

const a = "나는 ";
const b = " 입니다.";

console.log(a + age + "살" + b);
//string + numver + string + string 이지만 출력이 가능함.
// 나는 30살 입니다.

 type이 상이할 경우, 출력은 가능함. 하지만 아래와 같이 string과 number의 연산시 결과 값이 달라질 수 있으므로,

type을 변경하는 것을 권장.

console.log("20"+"20") // string+string => 2020
console.log(typeof("20"+"20")) // string+string => string
console.log("20"+20) // string+number => 2020
console.log(typeof("20"+20)) // string+number => string
console.log(20+20) // number+number => 40
console.log(typeof(20+20)) // number+number => number