비트 컴퓨터 [JavaScript] - ①

1. JavaScript

• 자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다.

• 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.

• Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다.

• 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었다.

  • 자바스크립트가 썬 마이크로시스템즈의 자바와 구문이 유사한 점도 있지만, 이는 사실 두 언어 모두 C 언어의 기본 구문에 바탕을 뒀기 때문이고, 자바와 자바스크립트는 직접적인 연관성은 약하다.

    • 이름과 구문 외에는 자바보다 셀프나 스킴과 유사성이 많다.

• 자바스크립트는 ECMA스크립트(ECMAScript)의 표준 사양을 가장 잘 구현한 언어로 인정받고 있으며 ECMAScript 5(ES5)까지는 대부분의 브라우저에서 기본적으로 지원되었으나 ECMAScript 6 이후부터는 브라우저 호환성을 위해 트랜스파일러로 컴파일된다.

2. 환경 설정

Node.js 설치

• 설치 유무 확인
  

• 다운로드

  

• 설치 확인

  

VSCode 설치

• 다운로드

  

  

  

3. 라이브러리 설치

Spring의 Dependency에 더 가깝다

ESLint

Relative Path

Guides

React code snippets

Beautify

4. 사용해보기

프로젝트 만들기

Hello World!

console.log("Hello World!");

단축키

[실행 단축키]
ctrl + f5

• 여기서는 Node.js 선택해서 실행

[주석 단축키]
ctrl + /

[이름 변경 단축키]
f2

5. 코드 스니펫 만들기

javascript.json

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
}

사용하기

• JavaScript에서는 '', "" 둘 다 문자열이다.

6. JavaScript 기초

launch.json

[launch.json이 없는 경우]

{
    // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
    // 기존 특성에 대한 설명을 보려면 가리킵니다.
    // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\sample02.js"
        }
    ]
}

ex1) var VS let VS const

참고

• var

  • 변수 재선언 가능

    • 이름의 변수명을 남용하는 문제를 야기할 가능성이 높아지기에 단점이 더 크다

• let

  • 변수 재선언 불가능, 변수 재할당 가능

• const

  • 변수 재선언 불가능, 변수 재할당 불가능

// ex4)
var a = 10;
console.log(a); // var >> let

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

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

ex2) 다양한 타입

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

// ex5)
let x = 10;
console.log(a);
let y = 'tiger';
let z = true;
let d = 3.14;
let e = [];
let f = {};
let g = function(){};
let h = undefined;
console.log(typeof(y)); // string
console.log(typeof(z)); // boolean
console.log(typeof(d)); // number
console.log(typeof(e)); // object
console.log(typeof(f)); // object
console.log(typeof(g)); // function
console.log(typeof(h)); // undefined

ex3) JSON 직렬화

// ex6)
// key: value >> JSON
let obj = {
    a:10,
    b:'tiger',
    c:true,
    d:[],
    e:{},
    f:function(){},
    g:undefined
}

console.log(typeof(obj)); // object
console.log(typeof(obj.a)); // string
console.log(typeof(obj.b)); // boolean
console.log(typeof(obj.c)); // number
console.log(typeof(obj.d)); // object
console.log(typeof(obj.e)); // object
console.log(typeof(obj.f)); // function
console.log(typeof(obj.g)); // undefined

ex4) Key : Value

// ex7)
let test = {
    a:{
        b:{
            c:{
                d:10
            },
        },
    },
}
let test2 = {
    a:1000, 
    b:'tiger',
    c:3,
}
console.log(typeof(test.a.b.c.d));
console.log(test.a.b.c.d);

ex5) 동적 타입 변경

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));


// 동적 타입 변경
let b = 10;
b = 'lion';
b = function(){}; // b는 function타입 됨
b = {}; // b는 객체 타입 됨

ex6) var VS let

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

• let : 지역성을 유지한다.

// ex 9) var, let차이 - 지역성의 유지 여부
// var(지역성을 유지 하지 못함)
// let()
{   
    // 지역성을 유지 하지 못하고 a 사용 가능
    var a = 10;
    let b = 10;
}
console.log(a); // 10
console.log(b); // exception 발생

ex7) undefined, null

• undefined : 타입이 정의 되지 않음.

  • 개발자가 사용하기 보다는 JavaScript에 변수에 Garbage 값이 아닌 값으로 초기화시키기 위해서 사용되는 것

  • return에 그나마 자주 쓰임

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

// ex 11) undefined, null
// 타입이 정의되지 않았다.

// a의 타입은 undefined
let a = undefined;

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

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

ex8) 문자열과 숫자

• 문자열 연결

//ex 12) 문자열 연결
let str = '호랑이';
str += '코끼리';
console.log(str);

let s = '100';
let n = 100;

console.log(s+n); //문자열 연결
console.log(Number(s)+n); //숫자 + 문자열
console.log(String(n)+ 200); //문자열 + 문자열

• 문자열을 숫자로 변환

  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 = '10';
let s4 = +'10';
let s5 = +s3;
let s6 = 999+s3; //문자열이 이긴다

console.log(typeof(s3));
console.log(typeof(s4));
console.log(typeof(s5));
console.log(typeof(s6));

ex9) 제곱

//ex 13) 산술, 관계, 논리 연산
// 증가, 감소 연산자 java와 동일
// +=, 복합대입연산자 
// true, false 
// 4대 제어문 동일
// 삼항연산 동일

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

ex10) 진수 표현

//ex14)
let a = 10; //10진수
let b = 0x10; //16진수
let c = 0o77; //8진수
let d = 0b1111011 //2진수

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

//이거 Java에서는 에러 발생
//맨 앞이 0이면 Java에서는 8진수로 취급한다
int a = 0386;
//이거 Java에서 에러 발생 X
int b = 0077;

ex11) 함수

• 반환 타입을 적어주지 않아도 된다.

• return키워드가 있으면 리턴이 있는 것이고, 없으면 없는 것이다.

//ex15)
function apple(){
    
    return 100;

}

ex12) for 문

//ex16)
for (let index = 0; index < 3; index++) {
    console.log(index);
}

[무한루프]

• while문 쓰리말라는 신호로도 사용
  for(;;){}

ex13) ===

참고

• ==는 양 옆의 값을 비교하기 전에 강제 형 변환(Type Coercion)를 수행합니다. 강제 형변환 과정을 통해 피 연산자들을 공통 타입으로 만들고 그 안에 있는 값만을 비교하는, '느슨한 비교'를 합니다.

• === 의 경우, 강제 형변환 과정을 수행하지 않는 '엄격한 비교'이기 때문에 false 가 뜨는 것입니다. 엄격한 비교이기에 이름도 'strict equality'입니다

//ex17)
console.log(10 == 10);
console.log(10 === 10);

ex14) 문자열 표기법

• 주로 벡쿼터는 외부 변수를 문자열 안에서 연결 시키기 위해서 사용한다.

//ex18)
//문자열
console.log('한글');
console.log("한글");
console.log(`한글`);

let t = 999;
console.log(`한${t}글`);

ex15) 백틱의 사용

//ex19)
//문자열 안에 태그를 표현할 수 있다.
let str = `<h3>호랑이</h3>`; //'\n', '\t'

let first = 'tiger';
let last = 'lion';

console.log(`My name is ${first} and ${last}`);

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

ex16) Symbol

• 변경 불가능한 원시 타입의 값

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

실행시간에 할당이 가능하다.

//ex20)
//Symbol

//점으로 키 접근
let obj1 = {
    a: 10,
};

obj1.b = 20; //없으면 할당

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


console.log('--------------------------');


//배열로 키 접근
let obj2 = {
    a: 10,
};

//위와 동일
obj2['b'] = 20; 

console.log(obj2['a']);
console.log(obj2['b']);


console.log('--------------------------');


//라이브러리로 제공된 객체일 때
let obj3 = {
    a: 10,
    b: 20,
};

//b를 쓰고 있는지 아닌지 알 수 없다.
//새로 만들려고 한 건지 덮어쓰려고 하는지 의도불명
obj3['b'] = 30; 
console.log(obj3['b']);

console.log('--------------------------');

let obj4 = {
    a: 10,
    b: 20,
    //객체 안의 함수 정의
    myfunc: function(){
        return this.a + this.b;
    }
};

//객체 선언 안되어도
//함수 호출 전에 생성 완료
obj4['b'] = 30; 

// 기대값이 다른것이라면 함수 결과가 달라진다.
console.log(obj4.myfunc(), obj4['b']);


console.log('--------------------------');


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

//symbol type
//중복 키 불가능
let b = Symbol('b');
//변수명으로 접근
obj5[b] = 999;

//원래 원하던 함수 결과를 반환한다.
console.log(obj5.myfunc());
//둘은 다른 것
console.log(obj5['b']);
console.log(obj5[b]);



console.log('--------------------------');


//함수를 사용하게 되었을 때
//실행 시간으로 변경되는 결과에 대해서 어떻게 예측?
let obj6 = {
    a: 20,
    b: 30,
};

obj6['b'] = 10;

ex17) length

//ex21)
let str = 'apple';
console.log(str.length);