JavaScript 기본 - JS(Vanilla)

참고 문서:

02. 변수

02. 변수 · GitBook

콘솔 대체 사용 사이트

https://codesandbox.io/

CodeSandbox: Online Code Editor and IDE for Rapid Web Development

 

Vanilla JavaScript

바닐라는 라이브러리를 사용하지 않고 자바스크립트만 사용한다는 의미이다.

 

변수 선언

let value = 1;
let text = "hello js"
let t = true
let f = false
const a = null;

• 자바스크립트에서 변수 선언은 let이라는 키워드를 사용하여 선언한다.
• 단, 기존 다른 프로그래밍 언어와 비슷하게 같은 변수명은 사용할 수 없다.(다른 블록에서는 같은 변수명을 사용할 수 있음.)

//ex
let value = 1;
let value = 2; // 코드 오류 발생

 

상수

const a = 1;
const b = 2;

 

• 한번 선언하고 값이 변하지 않는 값. 고정적인 값
• const 키워드를 사용한다.
• 마찬가지로 같은 변수명을 사용할 수 없으며 const는 값을 한번 선언하면 변경할 수 없다.

 

var

• 변수 선언 키워드이나 사용하지 않음
• let과는 다르게 같은 이름으로 여러번 선언할 수 있고 사용할 수 있는 범위가 다르다.
• 구형 브라우저(IE)에서는 let, const를 사용할 수 없는 경우가 있는데, 그럴 경우 var 을 사용할 수 있다.

 

연산자

• 기존 java에서 사용하는 연산자와 비슷하다.

===: 값이 일치하는지 확인

!==: 값이 불일치하는지 확인

 

함수

const a = 1;
const b = 2;
const sum_1 = a+b; 

//함수로 선언하면 아래와 같다 
function add(a,b){
	return a + b;
} 
const sum = add(1,2) 
console.log(sum)

• 함수를 사용할때에는 function 키워드를 사용한다.
• 함수를 이용하여 아래와 같이 사용도 가능하다.

function hello(name){ 
	console.log('hello, ' + name + '!'); 
} 
hello('kante'); 

//아래 결과값 -
> hello, kante!

 

템플릿 리터럴

• + 연산자를 제외하고 ES6 의 템플릿 리터럴 (Template Literal)이라는 문법을 사용할 수 있다.
• 주의사항은 ' '(Single quote)가 아닌 ` `(Grave Accent)를 사용해야 한다.

 

ES 6 템플릿 리터럴

ES6 는 ECMAScript6 를 의미하며, 자바스크립트의 버전을 가르킵니다.

ES6는 2015년에 도입이 되었습니다. ES6 는 ES2015 라고 불리기도 합니다. 그리고 2015년 이후에 계속해서 새로운 자바스크립트 버전이 나오고 있습니다. ES7(ES2016) ES8(ES2017) ES9(ES2018) ES10(ES2019)..
새로운 자바스크립트 버전이 나올때마다 새로운 문법이 소개됩니다.

브라우저 버전에 따라 지원되는 자바스크립트 버전이 다릅니다. 하지만, 보통 웹 개발을 할 때에는 Babel 이라는 도구를 사용하여 최신 버전의 자바스크립트가 구버전의 브라우저에서도 실행되도록 할 수 있습니다.
(정확히는, 최신버전 자바스크립트를 구버전 형태로 변환하는 작업을 거칩니다.)

function hello(name){ 
	console.log(`hello, ${name}!`)
} 
hello('kante') 

//아래 출력 결과 
-> hello, kante!

 

화살표 함수

// => 키워드를 사용한다. 
const add = (a,b) => a + b; 
console.log(add(1,2)); 

//or 
const add =(a,b) =>{ 
	return a + b;
} 
console.log(add(1,2));

• function 키워드 대신에 ⇒ 키워드를 사용할 수 있다.