let,const,var / data types / array / object / function / backtick

1. Vanila JS ?

자바스크립트의 한 종류로 라이브러리 등을 통해 변조되어 만들어진 것이 아닌 날 것의 자바스크립트

따로 설치할 건 없고 모든 웹 브라우저에 기본 내장되어 있다

 

 

2. let, const, var

셋 다 변수 타입들인데 let 은 변경이 가능하고, const 는 상수라 어떠한 이유에도 변경이 불가능

var은 let 과 같이 변경이 가능한데 3년 전에나 var만 쓸 수 있을 시절에 썼었음 (const나 let이 없었다)

그러니 let, const 를 쓰자 

 

 

3. Data Types

const what = "Nico"; // string
const what = true; // boolean
const what = 666; // number
const what = 55.1 // float

float, double, string, bool 등 처럼 타입을 명시해주지 않아도 된다.

 

 

4. Array

const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
console.log(daysOfWeek); // [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
console.log(daysOfWeek[2]); // Wed 0,1,2 (3)
console.log(daysOfWeek[432]); // undefined

변수명 작명은 camelCase 방식으로 

 

 

5. Object

const nicoInfo = ["Nicolas", "55", true];

여기서 나이를 찾으려면 nicoInfo[1] 으로 접근해야 하는데 매우 불편하다

Array 를 생성하려면 [] 이고, Object 를 생성하려면 {}

const nicoInfo = {
 name : "Nico",
 age : 55,
 isHandsome : true
}

접근하려면 nicoInfo.name 이렇게.

Object 안에 Array를 넣을 수 도 있다.

const nicoInfo = {
 name : "Nico",
 age : 55,
 isHandsome : true,
 favMovies : ["Along the gods", "LOTR", "Oldboy"],
 favFood : [
  {
   name:"Kimchi", 
   fatty:false
  }, 
  {
   name:"Cheese", 
   fatty:true
  }
 ]
}

 

 

6. console.log()

console.log vs nicoInfo.name 차이점이 뭘까?

const nicoInfo = {
 name : "Nico",
 age : 55,
 isHandsome : true
}

같은 점은 console 과 nicoInfo 는 Object 라는 것이다

다른 점은 console Object 안에 있는 log 라는 것은 Function (함수) 이고

nicoInfo 에 있는 name 은 변수이다

 

 

7. function (함수)

함수란? 어떤 역할을 할 수 있게끔 하는 기능이다

console.log('Hello A');
console.log('Hello B');
console.log('Hello C');
console.log('Hello D');

이렇게 A,B,C,D 에게 인사를 했다. 소스도 지저분하고 별로다..

간단하게 이거를 어떤 역할을 하는 함수로 만들어보면

function sayHello(arg){
  console.log('Hello!', arg);
 }
 
 sayHello("A");

이렇게 만들 수 있다.

또한 반환 (return) 을 사용할 수 도 있다.

const calculator = {
  plus: function(a, b){
  return a + b; },
  minus: function(a, b){
  return a - b; }
}

const plus = calculator.plus(5, 5)
console.log(plus)

calculator 는 Object 이고 plus 는 Function 이다. 

(진짜 아무거나 다 담을수있네 const 하나에 별걸 다넣어..)

 

 

8. 백틱 ( ` )

문장을 깔끔하게 만든다. 이게 무슨말이냐면

function sayHello(name, age){
  console.log("Hello" + name + ' you are ' + age + "years old");
}

sayHello("Nico", 15);

이렇게 이름과 나이를 출력하는 함수를 만들었다. 뭐.. 문제는 없다. 하지만 더 깔끔하게 만들 수 있다

(아참 위의 console.log 보면 Hello 보면 ( " ) 로 시작했으면 ( " ) 로 닫고

you are 쪽 보면 ( ' )로 시작했으면 ( ' )로 닫자. "Hello' 이런거 ㄴㄴ )

 

 

function sayHello(name, age){
  console.log(`Hello ${name} you are ${age} years old`);
}

sayHello("Nico", 15);

보면 백틱 ( 숫자 1 왼쪽에 있는 ` ) 을 사용하여 스트링을 그대로 쓰면서 안에 변수를 

${~~~~} 으로 사용하는 것을 볼 수 있다.