[바닐라 JS 기초] JS와 바닐라JS, 출력, 변수, 데이터타입

320x100

JS와 바닐라 JS

Javascript versions

ECMAScript는 Specification(설명서)의 명칭 같은 것이다. ECMAScript의 예로 ES5, ES6 등이 있다.

ES5 = ECMAScript5, ES6 = ECMAScript6

위와 같이 계속 Specifiacation을 업데이트 한다.

Specification

Specification은 일종의 매뉴얼로 어떤 것을 적었을 때 브라우저에서 출력되는방식이나 어떤 경우에 에러가 뜨는지 등등에 대해 알려주는 안내책자 같은 것이다. Javascript에서는 ECMAScript(이그마스크립트)가 Specification이다.

Javascript는 중앙집중화 되어 있어서 누군가 업데이트를 했을 때 모든 브라우저에서 작동하게 된다. 브라우저는 이러한 Specification을 받아 각자의 방식으로 실행시키게 된다.

바닐라 JS

Javascript의 한 종류로 Library가 없는 것을 말한다. raw한 Javascript 이다.

시작 세팅

JS 파일은 항상 Body 아래에 있어야 한다.

외부 스크립트 가져오기

<!DOCTYPE html>
<html>
  <head>
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet"/>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

인라인 스크립트 작성

<script>
  console.log("Hello World!");
</script>

위와 같이 <script> 태그 사이에 js 코드를 작성함으로써 인라인으로 스크립트를 작성할 수 있다.

경고창 띄우기 및 출력하기( js 버전의 hello world)

alert("hello world");

경고메세지를 위의 코드로 간단히 띄울 수 있다. alert 를 통해 경고 메세지를 띄우면 이 창을 제외하고 나머지 부분은 전부 Block 상태가 된다. console.log 를 통해서는 아래와 같이 출력을 할 수 있다.

console.log("hello world");

코드를 작성할 때

모든 instructions은 각기 다른 라인에 있다. 즉, 라인들은 expresions이다. 모든 expression은 한줄에 있어야 한다. expression 끝에는 ;를 붙여야 한다.

Variable (변수)

변수는 가변적이기 때문에 변할 수 있다. 또한 js에서는 두가지 종류의 변수가 있다. 변수를 만들고 싶을 때에는 기본적으로,

1. 변수를 생성하고, (Creat)
2. 초기화 하고, (Initialize)
3. 사용한다. (Use)

위와 같은 과정을 거친다.

변수의 종류에는 기본적으로 let, const가 있고 let은 변경 가능하며 const는 상수로 한번 선언되면 변경이 불가능하다.

let

let은 나중에 값을 수정할 수 있는 변수를 만들고 싶을 때 사용한다. 또한 변수를 만들 때의 1,2 단계에서는 let을 사용해야 하지만 사용할 때는 let을 사용하지 않아도 된다.

let a = 221;
let b = a-5;
a = 4;
console.log(b, a);

위의 코드에서는 a=221이었다가 a가 4로 바뀐다. 따라서 b의 값은 221-5 = 216이 되지만 그다음 a=4로 바뀌므로 출력을 했을 때는 216 4로 출력된다.

const

값을 나중에 변경하지 못하게 변수를 선언하고 싶다면 const를 사용하자. const는 상수를 의미하고 만약 상수를 바꾸려고 하면 아래와 같은 에러가 뜬다.

TypeError : Assignment to constant variable → 상수 변수에 대입

변수를 선언할 때는 기본적으로 const를 사용하는 것이 좋다. 코드가 길어지면 처음에 어떤 변수 값을 바꿨다가 나중에 에러가 났는데 중간에 한번 바꿨다는 사실을 잊어버려 이를 파악할 수 없게 되면 곤란해지기 때문이다.

const name = "grit"

// const name = grit;

주석 처리된 코드를 실행시킨다면 name과 grit을 일종의 같은 변수명으로 파악하여 에러가 뜬다.

ReferenceError : girt is not defined. ← 에러코드

따라서 ""를 이용하여 string 으로 받아 내용을 텍스트로 받아들일 수 있게 해야 한다.

Var

let과 큰 차이는 없다.

let : 재선언 금지, 재할당 가능
const : constant(상수), 재선언 금지, 재할당 가능
var : variable(변수), 재선언 가능, 재할당 가능

+) Data types

Boolean

boolean 의 경우는 true 나 false 값을 말하는 것으로 JS에서는 아래와 같이 사용해야 한다.

const first = true;
const second = false;

위와 같이 true 와 false 를 소문자로 작성해야하고 ""없이 쓴다. 여기서 true 와 false 는 텍스트가 아니기 때문이다.

Float

소숫점이 붙은 숫자를 표기할 때 사용한다.

const wat = 55.1;

String

"" 나 ''을 이용하여 string 으로 받을 수 있으며 이 방법을 사용하여 숫자, 이모지, 글자 등을 모두 텍스트 형식으로 받을 수 있다. JS에서는 "" (double 더블)나 '' (single 싱글) 이 같은 기능을 한다.

Comment (주석)

JS의 주석처리

// 한 줄 주석처리

/*
여러줄
주석
처리
*/

JS naming 규칙

const daysOfWeek="";
funtion printHello(){
  console.log("Hello");
}

Camel case라는 법칙에 따른다. 즉, 변수명 혹은 함수명의 첫글자는 항상 소문자로 시작해서 만약 변수명 혹은 함수명 중간 중간에 스페이스가 필요하다면 스페이스 대신에 대문자를 써주고 그 다음 다른 단어를 이어써나가는 방식으로 이름을 지어 사용한다.

Organizing Data

JS에는 데이터를 정리하는 방법이 두 가지가 있다.

Array
Object

Array

리스트로 만들고 싶을 때 주로 사용

const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

console.log(daysOfWeek);
console.log(daysOfWeek[2]);
console.log(daysOfWeek[100]);

배열 안에는 텍스트, true / false, numbers, floats, 선언된 변수를 쓸 수 있다. 선언된 변수를 사용한다는 것은 아래와 같이 사용될 수 있음을 말하는 것이다.

const something = "something";
const array = [something, "hello", 2];

console.log(array);

또한 인덱스를 통해 해당 부분만 출력도 할 수 있고 배열 이름을 출력하면 배열 안의 요소들을 모두 출력할 수 있다. 더불어, 만약 없는 인덱스의 데이터를 출력하려고 하면 undefined 가 출력된다.

Object

array와의 차이점은 object의 경우 각 value에 이름을 줄 수 있다는 것이다. object는 값에 그 값이 어떤 걸 의미하는지 이름을 부여해줄 수 있게 된다. 즉, 프로그래머가 저장하고 싶은 data에 label을 줄 수 있는 것이다.

아래는 위를 지키지 않았을 때의 에러이다.

const gritinfo = {
  name: "grit",
  age : 21,
  gender: "female",
  isStudent : true
}

console.log(gritinfo);
console.log(gritinfo.gender);

object는 각 value 값에 label(이름)을 붙일 수 있고 객체를 통해 데이터를 접근하고자 할 때 해당 데이터에 붙인 label(이름)을 사용한다. 또한 데이터를 수정할 때도 같은 접근법으로 수정할 수 있다.

const gritinfo = {
  name: "grit",
  age : 21,
  gender: "female",
  isStudent : true
}

console.log(gritinfo);
console.log(gritinfo.gender);

gritinfo.age = 22;
console.log(gritinfo.age);

const gritinfo = {
  name: "grit",
  age : 21,
  gender: "female",
  isStudent : true
}

gritinfo.isStudent = false;
console.log(gritinfo.isStudent); //가능

gritinfo = true;
console.log(gritinfo); //불가능

위와 같이 gritinfo를 아예 다른 값으로 바꾸는 것은 불가능하지만, gritinfo 안의 데이터값을 바꾸는 것은 가능하다.

Array & Object 정리

+) object 와 array 는 서로를 포함시킬 수 있다.

const gritinfo = {
  favMovies: ["Along the gods", "LOTR", "Oldboy"],
  favFood : [
    {
      name:"Kimchi",
      fatty: false
    },
    {
      name: "cheese burger",
      fatty: true
    }
  ]
}

console.log(gritinfo);
console.log(gritinfo.favFood[0].name);

object 안의 값으로 array를 포함시킬 수 있고, array 안에 object 를 넣을 수 있다.

자바스크립트 기본 문법 중 주의사항

위 포스팅은 노마드 코더 "바닐라 JS로 크롬 앱 만들기" 강의를 토대로 만들어진,

[바닐라 JS 기초 개념 요약 정리] 입니다.

직접 강의를 보고 싶거나 자세한 사항을 알고 싶다면 아래 링크를 참고해주세요 😊

nomadcoders.co/javascript-for-beginners

Watch Now - 노마드 코더 Nomad Coders

nomadcoders.co

320x100

'프로그래밍 > JS' 카테고리의 다른 글

[바닐라 JS 기초] 크롬앱 클론코딩 ( 시계 구현, Local Storage, Math 모듈로 난수생성, API로 유저 위치와 날씨 받아오기 ) (18)	2021.03.30
[바닐라 JS 기초] 조건문 ( + ClassList, Toggle ) (0)	2021.03.30
[바닐라 JS 기초] DOM, Event (0)	2021.03.30
[바닐라 JS 기초] 함수 (0)	2021.03.30

JS와 바닐라 JS

Javascript versions

Specification

바닐라 JS

시작 세팅

외부 스크립트 가져오기

인라인 스크립트 작성

경고창 띄우기 및 출력하기( js 버전의 hello world)

코드를 작성할 때

Variable (변수)

let

const

Var

+) Data types

Boolean

Float

String

Comment (주석)

JS naming 규칙

Organizing Data

Array

Object

Array & Object 정리

자바스크립트 기본 문법 중 주의사항

'프로그래밍 > JS' 카테고리의 다른 글

티스토리툴바