[JavaScript] JavaScript 기본 문법

[JavaScript] JavaScript 기본 문법

 

console 창으로만 확인할 수 있는 언어를 학습하고 있었는데, 수업을 따라가다가 JavaScript를 마주하였다.

이전까지는 신기한 생각을 가지고 있었다.

 

'이건 나에게 '필요없는 언어'이다.'

나중에 안하니까?

 

전혀 잘못된 생각을 하고 있었다. 일단 전체가 대강이라도 어떻게 돌아가는지, 내가 구현한 코드가 어디에 써먹히는지,

눈으로는 어떻게 나와서 서비스가 어떻게 나오는지를 알아야 되지 않나.

전문가는 아니더라도 '알고는' 있어야 하는 것인데 외면하고 있지 않았나 하는 반성을 해본다.

(물론 뭐 지금까지 얕은 공부를 했기 때문에 필요가 없다고 느꼈을 수도 있다)

 

아무튼 이번에는 자바스크립트 문법에 대한 기초적인 것을 파악해보겠다.

정말 생기초!

 

 

1. JavaScript 개요

1) 정의

웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립트 언어.
클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다.
애니메이션, 2D, 3D 그래픽을 웹 페이지 상에 구현하는 역할을 담당한다.

 

 

2) 다른 언어와 비교점

브라우저로 코드가 어떻게 구현되는지를 직접 보면서 개발할 수 있다.
사용자가 많아 오픈소스가 방대하다. 그만큼 개발하기 쉬운 언어이다.

 

 

 

3) 사용방법

HTML 문서 </body> 바로 위에 <script> 태그 구역을 달아서 사용한다.
별도의 JS문서를 작성하여 <script src=‘js 문서명’>으로 사용한다.

 

 

 

2. Vanilla Javascript란?

자바스크립트 플러그인이나 라이브러리를 사용하지 않은 순수 자바스크립트.
가볍고 빠르다. 태그로 DOM요소를 검색할 때 jQuery보다 425배 빠르다.

 

 

 

3. 기본 문법

1) 변수

 

선언, 초기화, 사용의 과정을 거친다.

let, const, var 세 가지 변수 타입이 존재한다.

const
: 선언 후 절대 값이 변하지 않는 상수

let
: 선언 후에도 값을 바꿀 수 있는 변수

var
: 초기 JS가 가지고 있던 변수 선언 명령문. 이제는 잘 사용하지 않는다고 함.
: 중복 선언이 가능함. const, let을 쓰는 것이 안정성을 더 높여줄 수 있는 방식이다.

 

 

요약

: const를 최우선적으로 사용하고, let은 변수 값을 재할당할 필요가 있을 때만 사용하고, var는 사용하지 않는다.

 

참고로 구글의 자바스크립트 스타일 가이드에 다음과 같은 문장이 있다.

Use const and let
Declare all local variables with either const or let. 
Use const by default, unless a variable needs to be reassigned. 
The var keyword must not be used.

const와 let을 이용해서 변수를 선언하라. 값을 재할당하는 경우가 아니라면, const를 디폴트로 사용하라.
var는 절대로 사용하지 말라

 

 

2) 데이터 타입

Stirng(문자열) : “ABC”
Boolean(논리형) : true, false
number(정수형) : 1, 2, 3
float(소수형) : 55.12

 

 

3) 배열

 

JS에서 배열은 [](대괄호)를 사용하여 표현한다.

const motorsCompany = [“Benz”, “BMW”, “Audi”, “Bentley”, “Rolls-Royce”, “Ferrari”, “Lamborghini”];

 

JS의 배열은 다양한 데이터 타입을 함께 담을 수 있다.

const mixed = [“Benz”, 1, “Bentley”, true, “Ferrari”, 55.3];

 

4) 객체(Object)

: key와 value를 한 쌍으로 구성하는 데이터
: 배열처럼 작동하지만, key를 사용해서 원하는 데이터를 쉽게 찾아낼 수 있다.
: 파이썬의 딕셔너리와 비슷하다.

var kitty = {
	name: "나비", 
    	family: "코리안 숏 헤어", 
    	age: 1, 
    	weight: 0.1 
};

 

5) 객체와 배열 함께 사용하기

const myInfo = {
 name: "abc",
 location: "Seoul, Korea",
 gender: "Male",
 handsome:"true"
 favFood: [ 
     {name: "Kimchi",healthy: true},
     {name: "Hamburger", healthy: false}
 ]// 배열 내부에 객체가 생성되어 있는 것이다. 
  // favFood[0], favFood[1] 각각 하나의 객체를 가지고 있다.
}

console.log(myInfo.favFood[0].name) // Kimchi가 출력된다.