바닐라 자바스크립트 시작

출처 및 참고 :  

 - https://eunyoe.tistory.com/46

 - https://nomadcoders.co/c/vanillajs-challenge/lobby

 

 

바닐라 자바스크립트란?

- 자바 스크립트에서 플러그인이나, 라이브러리를 사용하지 않은 순수 자바스크립트라고 한다. 
- 바닐라 = 일반을 의미한다고 한다. ( vanilla-js.com/ )
- 바닐라는 아무것도 다운받지 않아도 되는 장점이 있다. 

* 브라우저안에 있는 자바스크립트를 활용한다

* socket.io로 채팅, 실시간 기능들을 가능하게 하기도 함

콘솔 창

 

- 이렇듯 자바스크립트는 브라우저의 console을 이용한다 (자바스크립트는 브라우저에 이미 설치되어 있음)

 

외관상 자바스크립트 흐름 

 

- 브라우저는 HTML을 열고, HTML은 CSS와 자바스크립트를 가져오는 것이다.

- HTML은 자바스크립트 엔진과 CSS 엔진을 사용하고 있다.

 

* 자바스크립트는 tpye을 알아서 이해한다. (const, let, var)

* 자바처럼 String, int 등등의 자료형을 선언하지 않아도 된다.

 

 

const a = 10;
let b = 2;
let myName = "nico";
let veryLongVariableName = 0; // snakecase 형식의 변수명

console.log("test1");
console.log('test2');

console.log(a + b);
console.log(a * b);
console.log(a / b);
console.log("hello "+myName);

myName ="hihi";

console.log("yorur namis"+myName);

console 창

 

- variable 값을 저장하거나 유지하는 역할을 한다.
- constant(const) 상수 값이 바뀔 수 없다.
- let 주기적으로 업데이트가 들어간 값을 사용할 때 var 규칙이 없는 변수 원한다면 어디서든 업데이트가 가능하다. (변경을 허용하지 않은 값을 실수로 바꾸게 되면 오류를 찾을 수 없다는 단점이 있다. )
- 만약 모두 var를 쓰게 된다면 우리는 코드가 밑에서 무얼 하는지 알 수 없다 .
* 기본적으로 const를 쓰고 변하는 변수는 let let something; 처럼 선언만해준 경우 컴퓨터 메모리 안에는 존재한다. 공간은 있지만 값이 들어가지 않음.

 

 

자바스크립트에서 데이터 정리하기

 

데이터 정리하기 
 - 컴퓨터 과학에서 중요한 데이터 구조
 - 우리가 데이터를 어떻게 하면 가능한 최선의 방법으로 정리할 수 있을까에 관한 것
 - 사람들은 자료의 검색이나 삽입을 빠르게 할 수 있는 데이터의 저장 방법에 대해 생각하는데 시간을 쏟고 우리는 데이터 구조라든지 데이터를 어떻게 정할지에 대해 고민을 한다. 
 - 가장 기본적인 데이터 구조는 array(배열)

 

Object 만들기
- const 변수명 = { property 특성 }
- object 안에서의 규칙은 object 밖이랑은 다르다.
- 기본적으로 ' = '은 사용하지 않고 ' : '를 쓴다. 
- 한 개의 property를 작성하고 난 뒤엔 콤마(,)를 사용한다 왜냐하면 다른 하나의 property가 올 수 있기 떄문

 

 

Javascript
function은 계속 반복해서 사용할 수 있는 코드 조각이라고 생각하자
- 어떤 코드를 캡슐화해서, 실행을 여러 번 할 수 있게 해준다.

Java
public 자료형 함수명([인자]){ ... }

 

function 을 제대로 사용하려면 argument(인수)라는 것을 알아야 한다.

예를들어 

10명의 친구에게 반갑다는 메시지를 보내고 싶고 각각의 친구 이름을 넣어야 하는 경우가 있다. 하지만 
console.log("hi aaa");
console.log("hi bbb");
....
이런식으로 console을 10번 쓰게 된다면 매우 비효율적이고 귀찮을 것.

그래서 function을 사용하는데

function sayHello(인수){
 console.log("Hello my best friend ", 인수);
}

sayHello(넣을 인수); ex) sayHello("aaa");
하게된다면 조금 더 편하게 쓸 수 있다. 
* argument는 function을 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법이다.

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function sayHello(name, age){
    console.log("My name is'",name,"' and Age :'", age,"'");
}
sayHello("p", 10); // argument type (String, int)
sayHello("e", 23);
sayHello("j", 24);
sayHello("z", 100);

 

콘솔(1~4라인만 보면 됩니다.)

 

---

// 실습 Object와 function을 이용한 계산기
const calcurator = {
    add:function(a, b){
        return (a+b);
    },
    sub:function(a, b){
        return (a-b);
    },
    div:function(a, b){
        return (a/b);
    },
    squ:function(a, b){
        return (a**b);
    },
    mul:function(a,b){
        return a*b;
    },
};

a = calcurator;
const result = a.add(2,3);
console.log(result);