[Nomad coder/Momentom 클론코딩 1일차] Vanilla JS 와 JS 기본 Concept (#1.0~#1.10)

클론 코딩 1일차 (#1.0~1.10#)

사용 가능한 JavaScript는 배워본 적이 없는 것 같다.

학교에서 배웠던 것은 Js를 통해 CSS를 변경하는 내용이나, alert 명령어를 사용해서 수학적인 계산을 해보는... 그런 것들을 배웠고 금방 끝났었다.

그 당시 JS에 대한 큰 매력을 느끼지 못하였는데 현재로써는 Web 뿐만 아니라 많은 분야로 펼쳐져 있다고 생각한다.

이런 무궁무진한 발전 가능성과 수많은 분야에서 사용 가능하기 때문에 나의 첫 programing language를 JaveScript로 선택을 하게 되었다. 배웠던 Java, Python 모두 재미있었고, 그 덕에 Javascript를 배우는데 처음 배우는 분들보다는 약간에 이점이 있다고 생각을 하며 시작하게 되었다.

---

Vanilla JS

Library(라이브러리)나 Framework(프레임워크)를 전혀 사용하지 않고 날것으로 사용된 JavaScript를 이르는 별명이다.

→ 순수 자바스크립트

 

- 압도적으로 빠르다.

- 용량이 0Byte이다.

- 꾸준히 업데이트되어 왔다.

- 압축을 하면 오히려 용량이 더 나간다.

- 숙련된 사람일수록 여러 기능을 구현할 수 있다.

- 웹에서 기초가 되는 언어이다.

- 모든 웹 브라우저에 JavaScript가 설치되어 있다.

---

ECMAScrpit

Ecma 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어이다.
JavaScript는 Language이고 ECMAScript는 Specification이다.

- ES5 = ECMAScript5 = Specification의 5 버전

- ES6 = ECMAScript6 = Specification의 6 버전

- ECMAScript : 어떻게 스크립트 언어를 만들었는지...

---

3. Concept

- Data type

- Array

- Object

- Function

---

3.1 Data type

# let, const, var

const something = "hi" // String
const something = 24 // Int
const something = true // Boolean
const something = 55.1 // Float

 

---

3.2 Array

const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
console.log(daysOfWeek); // [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
console.log(daysOfWeek[5]);  // Sat
console.log(daysOfWeek[100]); // undefined

 

---

3.3 Object

const myInfo = {
	name: "가나다",
	age: 80,
    gender: "male",
    favFoods: [
      {
    	name: "chicken",
        liquid: false
      },
      {
      	name: "Kimchi stew"
        liquid: true
      }
   ]  
}

console.log(myInfo); // {name: "가나다", age: 80, gender: "male", favFoods: Array(2)....}
console.log(myInfo.age); // 80
console.log(myInfo.favFoods); // 0: {name: "chicken", liquid: false} 1: {name: "Kimchi stew", liquid: true}..
console.log(myInfo.favFoods[1].name); // true

 

---

3.4 Function

calculator는 Object이고, plus, minus, muliplication, division은 Function이다.

const calculator = {
  plus: function(a, b){ return a+b; },
  minus: function(a, b){ return a-b; },
  multiplication: function(a, b){ return a*b; },
  division: function(a, b){ return a*b; }
}
const plus = calculator.plus(2, 3)
console.log(plus); // 5

---

4. 느낀 점

1일차 강의에서는 Vanilla JS가 무엇인지, JavaScript의 기본 Concept들을 알려주신다.

다행스럽게도 Java, Python을 배웠던 것이 이해하는데 큰 도움이 된 것 같다.

JavaScript를 통해 앱, 웹, 게임, 3D 라이브러리, 데스크톱 앱 등등 여러 가지를 만들 수 있다는 사실을 알게 되었고, 알면 알 수록 범용성이 뛰어난 언어인 것 같다. Python과 마찬가지로 JavaScript 또한 매력적인 언어인 것 같다