[JavaScript] JavaScript 기초

 

 

 

🔹변수 선언

var type 을 통해 자동으로 변수에 알맞는 값을 할당.
var 가 확장이 되어 let으로 변하고 있음.
const(상수) : 초기화를 제외하고 값을 변경시킬 수 없는 값.

var a = 10; 
console.log(a);

let b = 20;
console.log(b);

const c = 30;
console.log(c);

10
20
30

 

 

🔹typeof

typeof() : 변수의 타입을 확인하는 함수.

let a = 10;
let b = 'Tiger';
let c = true;
let d = 3.14;
let e = []; // object type
let f = {}; // object type
let g = function(){} // function
let h = undefined; // 정의되지 않은 타입

// number, string, boolean, object, function
console.log('a : ' + typeof(a));
console.log('b : ' + typeof(b));
console.log('c : ' + typeof(c));
console.log('d : ' + typeof(d));
console.log('e : ' + typeof(e));
console.log('f : ' + typeof(f));
console.log('g : ' + typeof(g));
console.log('h : ' + typeof(h));

a : number
b : string
c : boolean
d : number
e : object
f : object
g : function
h : undefined

 

 

🔹{ } - Key : Value

JSON - 이종 간의 데이터 교환을 위한 데이터 포맷 형식

JSON을 통해 데이터를 보내는 것을 직렬화(Serializable) 한다고 표현.

 

• JSON은 텍스트로 이루어져 있으므로, 사람과 기계 모두 읽고 쓰기 쉽다.
• 프로그래밍 언어와 플랫폼에 독립적이므로, 서로 다른 시스템 간에 객체를 교환하기에 좋다.

 

https://ko.wikipedia.org/wiki/JSON

JSON - 위키백과, 우리 모두의 백과사전

 

 

1️⃣ java 직렬화

1. Serializable 인터페이스 내부는 비어있지만 JVM이 알아서 무언가를 한다.
JSON으로 대충 만들고(직렬화) 대충 가져온다(역직렬화)

2. FileOutputStream(byte저장) >> FileWriter(문자 저장)

3. java 직렬화(java끼리만), JSON 직렬화(언어상관 X)
FileOutputStream은 Serializable을 상속하지 않으면 Exception 발생

// java 직렬화
class Tiger implements Serializable{
	String name = "호랑이";
	int age = 1000;
}

public class Hello {

	public static void main(String[] args) {
		Tiger tiger = new Tiger();
		
		try {
			// save
			FileOutputStream fos = new FileOutputStream("sample.txt");
			ObjectOutputStream oos = new ObjectOutputStream(fos);
			oos.writeObject(tiger);
			fos.close();
			oos.close();
			
			// load
			FileInputStream fis = new FileInputStream("sample.txt");
			ObjectInputStream ois = new ObjectInputStream(fis);
			Tiger t2 = (Tiger)ois.readObject();
			System.out.println(t2.name + " " + t2.age);
			fis.close();
			ois.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

호랑이 1000

 

2️⃣ JSON 직렬화

// key : value -> JSON(이종간의 데이터 교환을 위한 데이터 포맷 형식)
let obj = {
    a:10,
    b:'tiger',
    c:true,
    d:[],
    e:{},
    f:function(){},
    g:undefined
}

console.log(typeof(obj));
console.log(typeof(obj.a));
console.log(typeof(obj.b));
console.log(typeof(obj.c));
console.log(typeof(obj.d));
console.log(typeof(obj.e));
console.log(typeof(obj.f));
console.log(typeof(obj.g));

object
number
string
boolean
2 object
function
undefined

 

JSON 간단 예제

let obj = {
    a:{
        b:{
            c:{
                d:10
            }
        }
    },
}

let obj2 = {
    a:1000,
    b:'tiger', // 보통 (,) 로 끝내는 것이 여러모로 편하다.
}

console.log(typeof(obj.a.b.c.d));
console.log(obj.a.b.c.d);

number
10

 

🔹동적 타입 변경

😵 but, 비용 발생

let apple = 10;
console.log(apple, typeof(apple));

/// 내부 작업
// 메모리 생성
// apple = new number();
// 사용할 수 있다.
// 메모리 해제
// delete(apple);

// apple = 'tiger'; 로 인해
// number type의 메모리가 삭제되고 
// string type의 메모리가 생성된다.
apple = 'tiger';
console.log(apple, typeof(apple));

10 number
tiger string

 

 

🔹var  vs  let

var : 지역성을 유지하지 않는다.

// var : 지역성을 유지하지 않음.
{
    var a = 10;
}
console.log(a);

10

 

let : 지역성을 유지한다.

// let : 지역성을 유지함.
{
    let b = 20;
    // console.log(b); 가능
}
console.log(b);

에러발생

 

 

🔹const

상수

// const
const a = 10;
console.log(a);
a = 20;
console.log(a);

10
에러발생

 

 

🔹undefined, null

undefined : 타입이 정의 되지 않음. (return에 그나마 자주 쓰임)

null : 타입은 정해졌지만(Object), 참조하는 값이 없다.

// undefined, null

// 타입이 정의 되지 않았다.
// a의 타입은 undefined
let a = undefined;

// 타입은 정해졌다.(Object)
// 참조하는 값이 없다.
let b = null;

console.log(typeof(a));
console.log(typeof(b));

undefined
object

 

 

🔹문자열 연결

문자열 연결

let str = 'Hello';
str += ' world';
console.log(str);

let s = '100';
let n = 100;
console.log(s + n); // 문자열 연결
console.log(typeof(s + n));

console.log(Number(s) + n); 
console.log(typeof(Number(s) + n));

console.log(String(n) + 200);
console.log(typeof(String(n) + 200));

Hello world
100100
string
200
number
100200
string

 

문자열을 숫자로 변환

1. Number()

2. parseInt()

// 문자열을 숫자로 변환
// 1. Number();
// 2. parseInt();
let s1 = '100';
let s2 = '200';
console.log(Number(s1) + 1);
console.log(parseInt(s2) + 1);

let s3 = '100원';
let s4 = '200원';
console.log(Number(s3) + 1);
console.log(parseInt(s4) + 1);

101
201
NaN
201

 

슈가 코드

문자열 앞에 (+)

let s5 = '10';
let s6 = +'10';
let s7 = +s5;
let s8 = 999 + +s5;

console.log(typeof(s5));
console.log(typeof(s6));
console.log(typeof(s7));
console.log(s7);
console.log(typeof(s8));
console.log(s8);

string
2 number
10
number
1009

 

 

🔹연산자

🙊 모두 자바와 문법이 동일 하다

(산술, 관계, 논리 연산 
증가, 감소 연산자 
+=, 복합 대입 연산자 
true, false 
4대 제어문 
삼항연산)

 

🙉 다른 부분

console.log(Math.pow(2, 3));
console.log(2 ** 3);
console.log(2 ** 3 ** 2);
console.log((2 ** 3) ** 2);

2 8
512
64

 

 

🔹진수, 진법

let a = 10;
let b = 0x10; // 16진수 표기
let c = 0o777; // 8진수 표기
let d = 0b1111011; // 2진수 표기

console.log(a);
console.log(b);
console.log(c);
console.log(d);

10
16
511
123

 

 

🔹==, ===

== : 값이 같은가?

=== : 값과 타입 모두 같은가?

// 값이 같은가?
console.log(10 == 10);

// 값이 같고 타입도 같은가?
console.log(10 === '10');
console.log(10 == '10');

true
false
true

 

 

🔹/ ,  %

console.log(7 / 4); // 정확한 결과값이 나온다.
console.log(7 % 4);

1.75
3

 

 

🔹' ', " ", ` `

 ' ' : 문자열

" " : 내부에 ' ' 표현 가능

` ` : 내부에 값을 가져올 수 있다.

console.log('한글');
console.log("한글'과'컴퓨터");

let first = 'tiger';
let last = 'lion';
console.log(`My name is ${first} or ${last}`);

let a = 3;
let b = 4;
console.log(`${a + b}`);
console.log(`${a} + ${b} = ${a + b}`);

한글
한글'과'컴퓨터
My name is tiger or lion
7
3 + 4 = 7

 

 

 

🔹Symbol

주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용.

심벌 값은 다른 값과 중복 되지 않는 유일무이한 값이다.

// SYMBOL type

// 1)
let obj = {
    a : 10,
};

// 실행시간에 필요에 따라서 키값을 추가할 수 있다.
obj.b = 20;
console.log(obj.a);
console.log(obj.b);
console.log('----------');


// 2)
let obj2 = {
    a : 10,
};

// 실행시간에 필요에 따라서 키값을 추가할 수 있다.
obj2['b'] = 20;
console.log(obj2['a']);
console.log(obj2['b']);
console.log('----------');



// 3) obj3 가 라이브러리로 제공 된 객체 일 때.
// obj3['b'] = 30; 가 새로 만들기 위한 것인지
// 기존에 있던 것을 업데이트 하기 위한 것인지 알 수가 없다.
let obj3 = {
    a : 10,
    b : 20,
};

obj3['b'] = 30;
console.log(obj3['a']);
console.log(obj3['b']);
console.log('----------');


// 4)
let obj4 = {
    a : 10,
    b : 20,
    myfunc:function(){
        return this.a + this.b;
    },
};

// 함수를 사용한 본인은 키를 새로 만들었다고 생각하고 코딩을 하였다.
// 하지만 b값이 중첩된 것인지 아닌지 알 수 없다.
// 굉장히 애매모호한 상황(obj4는 개발자에게 노출되어 있지 않다고 가정.)
obj4['b'] = 30;
console.log(obj4.myfunc(), obj4['b']);
console.log('----------');


// 5)
let obj5 = {
    a : 10,
    b : 20,
    myfunc:function(){
        return this.a + this.b;
    },
};

let b = Symbol('b');
obj5[b] = 999;
// 함수는 본인이 값을 바꾸든 안바꾸든 유일하게 실행된다.
console.log(obj5.myfunc(), obj5[b]);

10
20
----------
10
20
----------
10
30
----------
40 30
----------
30 999