[Web] FE - JavaScript 변수 선언, 자료형

변수

변수란?

변수는 '변할 수 있는 수', '변할 수 있는 정보'라는 뜻이다.

변수는 선언하고, 할당하고, 사용할 수 있으며,

변수는 '변할 수 있는 수'이므로 지정된 값을 계속 바꿀 수 있다.

- let 뒤에 원하는 변수 이름을 적고 = 뒤에 값을 적으면 된다.

// 변수의 왼쪽 x와 오른쪽 3 값은 모두 메모리 상에 올라간다.
let x = 3 // x라는 변수에 3이라는 값을 넣겠다.

- 콘솔창에서 직접 코드를 입력할 때는 변수 이름만 적고 엔터를 쳐도 값을 확인할 수 있다.

num    // 10이 출력됨

 

- 변수를 한 번 선언하고 나서는 그 값을 바꾸어줄 수 있다. 새 값을 넣어줄 때는 앞에 let을 쓰지 않는다.

let num = 20
num		// 20	

num = 2
num		// 2

 

- 변수 선언을 먼저 하고 값을 나중에 넣어줄 수도 있다.

let num
num // 아직 값이 정의되지 않았기 때문에 undefined라고 뜬다.

num = 2
num		// 2

 

- 다른 변수에 들어가 있는 값을 새 변수에 넣어줄 수도 있다.

let num1 = 1
let num2 = num1

console.log(num1, num2) // 1 1 
// console.log()에 여러 값을 한 번에 넣어 출력할 수도 있습니다.

---

변수명을 정할 때

• 변수이름은 $, _ 를 제외한 공백, 특수문자, 구두점(글의 여러 가지 경계를 구분하기 위해 사용되는 반점(,), 온점(.), 물음표(?) 등등…)을 사용할 수 없습니다.
• 첫 글자는 숫자가 될 수 없습니다.
• 대소문자를 구별합니다.
• 예약어가 쓰일 수 없습니다. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#reserved_words)
• 유니코드 문자도 사용할 수 있습니다. (한글 코딩이 가능하다는 것)
• var, let, const의 키워드를 사용할 수 있습니다.

 

// 요새는 ver보다 let을 많이 사용한다.
ver a;
let my_name;

////////////////////////////

// 변수를 할당하는 방법
a = 1;
my_name = "lee";


// 변수에 저장된 값을 프로그램을 통해서 확인할 수 있다.
console.log(a);
console.log(my_name);

---

변수의 자료형

변수도 여러가지 형식을 가지고 있다.

// typeof는 자바스크립트 내부적으로 있는 메서드이다.

typeof 'hello world'   // String
typeof 100             // Number
typeof true            // Boolean
typeof undefined       // undefined
typeof null            // Object
typeof []              // Object
typeof {}              // Object
typeof function () {}  // function

let hello = 'hello'

hello // 'hello'

프로그래밍이 종료될 때 지워지지만, 그 때까지 기다릴 수 없으니

hello 값에 null을 넣으면 지워진다.

=> 자바스크립트에는 가비지컬렉터가 있어서 null을 보면 지워준다~

여담이지만 예외처리를 안해서 잘 못 나타나는거임 ㅋ

const 는 상수여서 변경할 수 없다.

* document는 브라우저에서 지원하는 문법(자바스크립트는 아님)

//ES6 => 자바스크립트 버전 6을 의미하는거임
const 이름 = '다봉';    // const는 상수
const 소속 = 'EARTH'

let 주소 = '서울';        // let은 변수
주소 = '제주';

document.write(이름, '<br>');
document.write(소속, '<br>');
document.write(주소, '<br>');

document.write(소속[2], '<br>');    // R
document.write(소속[3], '<br>');    // T

결과값

문자열 자료형에 대해 좀 더 알아보고 가도록 하겠습니다.

문자열은 작은따옴표('예시')나 큰따옴표("예시")로 둘러싼 것을 말합니다.

문자열은 순서가 있습니다.

순서가 있는 자료형을 시퀀스형 자료형이라고 합니다.

순서는 0부터 시작하며 띄어쓰기도 문자로 취급합니다.

이 순서를 index라고 부르며 위와 같이 index로 호출하는 것을 indexing이라고 합니다.

 

Number

//숫자형 (Number)
let num = 10;

document.write(num, '<br>');  // 10
document.write(num / 3, '<br>');  // 3.3333..

/* 숫자형의 사칙연산 */
document.write("더하기 : ", 2 + 2.5, '<br>');  // 4.5
document.write("빼기 : ", 5 - 7, '<br>');  // -2
document.write("곱하기 : ", 3 * 2, '<br>');  // 6
document.write("나누기 : ", 2 / 2, '<br>'); // 1

document.write( "숫자가 아님" / 2 ); 
// NaN, 문자열을 숫자로 나누면 오류가 발생합니다.

/* 변수에 저장된 값에 연산을 한 후 다시 그 값을 같은 변수에 저장할 수 있다.*/
let a = 5
a = a + 3         // 5에 3을 더한 값을 다시 a에 저장
console.log(a)     // 8

a += 1 // 줄여 쓸 수도 있다. 8에 1을 더해 9를 a에 저장. 사칙연산 다 가능하다.

// 증감연산자
a++ // 1을 더한 값을 다시 a에 저장
a-- // 1을 뺀 값을 다시 a에 저장

// Number 관련 함수
// ''(따옴표)가 아니라 ``이다.

document.write(`Math.PI : ${Math.PI} <br>`);    
document.write(`Math.round(4.7) : ${Math.round(4.7)} <br>`);    // round => 반올림
document.write(`Math.ceil(4.7) : ${Math.ceil(4.7)} <br>`);        // ceil => 올림
document.write(`Math.floor(4.7) : ${Math.floor(4.7)} <br>`);    // floor => 내림
document.write(`Math.pow(2, 8) : ${Math.pow(2, 8)} <br>`);        // pow => 제곱근

document.write(`Math.random() : ${Math.random()} <br>`);        // random => 0 ~ 0.99999999..
// Math.radom()에 숫자를 곱해서 사용하면 된다.
// 예시) Math.radom() * 10 => 0 ~ 9.999999...

document.write(`Math.max(10, 20, 30, 40, 50) : ${Math.max(10, 20, 30, 40, 50)} <br>`);    // 최대
document.write(`Math.min(10, 20, 30, 40, 50) : ${Math.min(10, 20, 30, 40, 50)} <br>`);    // 최소

Number 관련 함수 코드 결과값

* 템플릿 리터럴 [https://eblee-repo.tistory.com/38]

Template literals

 

String

// 문자열 (String)

// 따옴표로 감싸지 않으면 변수명으로 인식한다.
let txt = 'ABCDEFGHIJKLMNABC';

// \' => 문자열 안에 따옴표를 넣고 싶을 때 문자의 일부분으로 사용하게끔 만들어주는 것
let text_two = 'mom said \'hello world\'';
let text_three = "mom said 'hello world'";
let number = '100';


// slice(시작인덱스, 종료인덱스) : 시작인덱스부터 종료인덱스까지 반환합니다.
// substr(시작위치, 길이) : 시작인덱스부터 길이만큼 반환합니다.
document.write(`txt.slice(0, 3) : ${txt.slice(0, 3)}<br>`);
document.write(`txt.substr(0, 3) : ${txt.substr(0, 3)}<br>`);

document.write('abcdef'.replace('cde', 'hojun'));
document.write(`txt.replace('ABC', 'hojun') : ${txt.replace('ABC', 'hojun')} <br>`);


document.write(`<br><hr><br>`);

document.write(`txt.toUpperCase() : ${txt.toUpperCase()} <br>`);
document.write(`txt.toLowerCase() : ${txt.toLowerCase()} <br>`);

// + 연산자로 문자열 두 개를 또는 문자열과 다른 자료형을 연결 할 수 있습니다. “숫자” + 7 
// 각각의 결과를 확인해보세요!
console.log('숫자' + 7);        // 숫자7 => 자동 형변환이 되서 문자열로 바뀐다.

console.log('숫자' + 7 * 3);    // 숫자21

console.log('숫자' + 7 + 3);    // 숫자73


// 문자열을 숫자로 바꿀때는 parseInt(정수 값)또는 parseFloat(소수값) 함수를 사용하거나 단항연산자(+, -)를 사용합니다.

parseInt(“30”) // ==> 30
parseInt(“30”, 16) //--> 16진수 표현을 원할때 두번째 인수에 16을 넣어줍니다.
parseFloat(“30.5”) // ==> 30.5
+“30” // ==> 30

// backtick 문자( ` ) 로 묶으면 템플릿 문자열이 됩니다.

// 모든 알파벳을 대문자로 바꾸기

let myname = "dabom"
myname.toUpperCase() // DABOM


// 특정 문자를 기준으로 문자열을 나누고 싶은 경우
// 1. 이메일 주소에서 도메인만 추출하기

let myemail = 'test@gmail.com'

let result = myemail.split('@')    // ['test','gmail.com'] (뒤에 배울 '리스트'라는 자료형이다)

result[0]    // test (리스트의 첫번째 요소)
result[1]    // gmail.com (리스트의 두 번째 요소)

let result2 = result[1].split('.')

result2[0]    // gmail -> 우리가 알고 싶었던 것
result2[1]    // com


// 한 줄로 쓸 수 있다.
=> myemail.split('@)[1].split('.')[0]

// 2. 특정 문자를 다른 문자로 바꾸기

let txt = '서울시-마포구-망원동'
let names = txt.split('-'); // ['서울시','마포구','망원동']
let result = names.join('>'); // '서울시>마포구>망원동'

parseInt("30");        // 30 (숫자형)    

parseInt("30b");    // 30 

parseInt("b30");    // NaN

parseInt("30.33");    // 30 (숫자형)    

parseFloat("45.4");    // 45.4

parseFloat("30");    // 30

+"10";        // 10

+"10a";        // NaN

+"a10";        // NaN

-"22";        // -22

-"-23";        // 23

 

Boolean

- true 혹은 false 값을 가지는 자료형이다.

- '!'는 '반대'를 뜻한다. true, false에만 사용할 수 있다.

- 숫자 중에서 false로 인정되는 것은 0, NaN. 나머지 숫자는 모두 'true'를 나타낸다.

let value1 = 30;
let value2 = 50;

console.log(value1 > value2);
console.log(value1 >= value2);
console.log(value1 < value2);
console.log(value1 <= value2);
console.log(value1 == value2);
console.log('----------');

value1 = 30;
value2 = '30';
console.log(value1 == value2);        // true (30 == '30' => 묵시적 형변환이 일어난 것)
console.log(value1 === value2);        // false (데이터의 타입까지 비교함)
console.log('----------');

console.log(value1 != value2);        // false 
console.log(value1 !== value2);        // true    (데이터 타입까지 비교함)

console.log('----------');
value1 = true;
value2 = false;
console.log(!value1);
console.log(!!value2);

 

Object

키(key)와 값(value)으로 이루어진 데이터(프로퍼티)의 집합

// 객체 자료형은 여러가지 데이터를 가질 수 있다.

let person = {
    name: '이호준',
    age: 10,
    height : 30,
    weight : 40,
    이력 : {'첫번째직장' : '하나', '두번째직장' : '둘'} // 객체 자료형 안에 또 객체 자료형 넣은 것
}

person.소속 = '바울랩';    // 접근하고 값을 추가하는!

document.write(`제 이름은 ${person.name} 입니다.<br>`);

document.write(`제 나이는 ${person.age} 입니다.<br>`);
document.write(`제 키는 ${person.height} 입니다.<br>`);

 

Array

- 데이터의 집합. 여러 개의 값을 하나의 이름으로 묶어 사용할 수 있게 도와준다.

- 배열의 각 값은 원소(element)라고 부른다.

- 배열의 크기는 length 프로퍼티를 통해 알 수 있다.

* 프로퍼티(property): 일부 객체 지향 프로그래밍 언어에서 필드(데이터 멤버)와 메소드 간 기능의 중간의 클래스 멤버의 특수한 유형이다.

- 배열의 생성자에 숫자를 한 개만 넣으면 인스턴스의 길이를, 여러 숫자를 넣으면 배열의 원소를 뜻한다.

//배열 (array)

// 배열을 선언하는 다양한 방법
// let 과일 = ['사과', '수박', '복숭아', '딸기', '바나나'];
// let 과일 = new Array(5);
let 과일 = new Array('사과', '수박', '복숭아', '딸기', '바나나');

document.write(`${과일} <br>`);
document.write(`${과일[0]} <br>`);
document.write(`${과일[2]} <br>`);

//배열 내장함수

let 과일 = ['사과', '수박', '복숭아', '딸기', '바나나'];
let 과일선물 = ['체리', '멜론'];

document.write(`과일 : ${과일} <br>`);    // 과일 : 사과,수박,복숭아,딸기,바나나

let 꺼낸과일 = 과일.pop()

document.write(`과일.pop() : ${꺼낸과일} <br>`);    // 과일.pop() : 바나나
document.write(`과일 : ${과일} <br>`);    // 과일 : 사과,수박,복숭아,딸기

과일.push(꺼낸과일)

document.write(`과일 : ${과일} <br>`);    // 과일 : 사과,수박,복숭아,딸기,바나나
document.write(`------------------ <br>`);

// splice
document.write(`과일.splice(1, 0, '한라봉') : ${과일.splice(1, 0, '한라봉')} <br>`);
document.write(`과일 : ${과일} <br>`);

// slice
document.write(`과일.slice(1, 3) : ${과일.slice(1, 3)} <br>`);
document.write(`과일 : ${과일} <br>`);

// concat
document.write(`과일.concat(과일선물) : ${과일.concat(과일선물)} <br>`);
// 과일.concat(과일선물) : 사과,한라봉,수박,복숭아,딸기,바나나,체리,멜론

document.write(`과일 : ${과일} <br>`);
// 과일 : 사과,한라봉,수박,복숭아,딸기,바나나

 

null & undefined

- null

: 아무것도 없이 비어있는 값을 나타낸다.

- undefined

: 변수를 선언하고 아무런 값을 할당하지 않았을 때의 기본 값이다.

예약어가 아니라서 다른 어떤 값을 할당해도 문법에러가 발생하지 않는다.