1. ECMA 스크립트
ECMA SCRIPT는 줄여서 ES라고 부르는데 표준화된 자바스크립트를 ECMA SCRIPT라 한다.
ES6 ES2015 등의 용어를 볼 수 있는데 이는 버전이다.
npm run dev 를 통해서 내부에 로컬 서버를 별도로 오픈해서 작업하는 방식을 사용하자.
2. 데이터 타입 확인
console.log(typeof "Hello world")
console.log(typeof 123)
console.log(typeof true)
console.log(typeof undefined)
console.log(typeof null)
console.log(typeof {})
console.log(typeof [])
function getType(data) {
return Object.prototype.toString.call(data).slice(8, -1)
}
console.log(getType(123))
console.log(getType(false))
console.log(getType(false))
console.log(getType(null))
console.log(getType({}))
console.log(getType([]))결과
새로운 js 파일에서는 다른 파일에서 작성한 함수를 그냥은 사용할 수 없다.
이를 개선하는 방법은 다음과 같다.
export default function getType(data) {
return Object.prototype.toString.call(data).slice(8, -1)
}변수나 함수, 클래스를 선언할 때 맨앞에 export를 붙이면 내보내기가 가능해진다.
선언부와 export가 떨어져도 내보내기가 가능해진다.
ex.
function sayHi(user) {
alert(`Hello, ${user}!`);
}
function sayBye(user) {
alert(`Bye, ${user}!`);
}
export {sayHi, sayBye}; // 두 함수를 내보냄export default 라는 특별한 문법도 있다. 이를 이용하면 해당 모듈에는 (내보낼) 개체 하나만 있다는 사실을 명확히 나타낼 수 있다.
그리고 위와 같이 getType 함수를 선언하면 아래와 같이 사용할 수 있다.
import getType from './getType'
console.log(typeof "Hello world")
console.log(typeof 123)
console.log(typeof true)
console.log(typeof undefined)
console.log(typeof null)
console.log(typeof {})
console.log(typeof [])
console.log(getType(123))
console.log(getType(false))
console.log(getType(false))
console.log(getType(null))
console.log(getType({}))
console.log(getType([]))파일의 이름 역시 getType.js라고 선언했고 뒤의 .js는 생략이 가능하다.
3. 연산자
- 자바스크립트의 나누기 연산은 실수의 나누기 연산을 한 값이 나온다.
- 몫연산을 하는 연산자는 따로 없다.
- a += 1 등의 연산자는 자바스크립트에서도 사용가능하다.
4. 비교, 논리 연산자
- 자바스크립트에서 일치 연산자는 '===' 이다.
- 불일치 연산자는 '!==' 이다.
- and연산자는 '&&'이다.
- not연산자는 '!'이다.
5. 삼항연산자
a? b : c
a가 참이면 b, 거짓이면 c를 리턴한다.
6. 조건문
Tip. Math.random() 함수는 0이상 1 미만의 실수를 랜덤으로 리턴
즉, 10을 곱하면 0이상 10미만의 실수를 랜덤으로 리턴
이 때 Math.floor() 즉, 내림함수를 실행하면 0 이상 10미만의 정수를 랜덤으로 리턴, 즉, 0 ~ 9의 정수를 랜덤으로 리턴한다.
이를
export default function random() {
return Math.floor(Math.random() * 10)
// 0 ~ 9 사이의 정수를 랜덤으로 리턴
// floor는 내림함수!
// Math.random 은 0이상 1미만의 실수를 랜덤으로 리턴
}getRandom.js 파일에 이 코드를 저장하여
import random from './getRandom'
console.log(random())이런 식으로 활용할 수 있다.
if, else, else if 는 C언어와 같다.
switch 문은 다음과 같이 활용할 수 있다.
import random from './getRandom'
const a = random()
console.log(a)
switch(a)
{
case 0:
console.log('a is 0')
break
case 2:
console.log('a is 2')
break
default:
console.log('a is not 0 and not 2')
}a를 출력하고
a가 2 또는 0이면 'a is 0' 또는 'a is 2'를 둘다 아니면 'a is not 0 and not 2'라는 문구를 출력하는 코드이다.
7. for 문
다음과 같이 사용한다.
for (let i = 0; i < 3; i++)
{
}C언어와 같다.
C언어처럼 자바스크립트에서도 단항 연산자를 사용할 수 있다!
ex.
import random from './getRandom'
for (let i = 0; i < 10; i++)
{
const a = random()
console.log(a)
switch(a)
{
case 0:
console.log('a is 0')
break
case 2:
console.log('a is 2')
break
default:
console.log('a is not 0 and not 2')
}
}for문을 활용해서 HTML제어하기
const ulEl = document.querySelector('ul')
console.log(ulEl)
for (let i = 0; i < 3; i++)
{
const li = document.createElement('li')
li.textContent = `list-${i + 1}`
ulEl.appendChild(li)
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="./main.js"></script>
</head>
<body>
<h1>Hello World</h1>
<ul></ul>
</body>
</html>뷰포트 (브라우저 초기화는 하지 않은 상태)
예제2
const ulEl = document.querySelector('ul')
console.log(ulEl)
for (let i = 0; i < 3; i++)
{
const li = document.createElement('li')
li.textContent = `list-${i + 1}`
li.addEventListener('click', function () {
console.log(li.textContent)
})
ulEl.appendChild(li)
}이렇게 해서 반복문을 통해 eventListener역시 li요소들을 만들면서 함께 달아주었다.
8. 변수 유효범위
let, const으로 선언한 변수의 범위는 블록 레벨 내이다.
var로 선언한 변수는 함수 범위 내이다.
그러다보니까 의도하지 않은 범위 내에서 사용이 될 수 있고 그래서 메모리 누수로 이어질 수 있어서 var로 선언한 변수는 잘 사용하지 않는다.
9. 형변환
자바스크립트에서 equal 연산자는 C언어, 파이썬, 자바 등과 다르게
'=' 기호 세개임을 보았다.
왜 세개일까?
이는 '==' 연산자가 동등연산자라는 개념으로 따로 쓰이기 때문이다.
다음의 예를 보자.
const a = 1
const b = '1'
console.log(a == b)이 코드는 콘솔에 true가 출력된다.
동등연산자를 사용하면 자동으로 형변환이 일어나기 때문이다.
(그래서 사실 사용을 잘 하지 않기를 권장한다.)
true로 취급하는 값 ->
true, {}, [], 1, 2, 'false'(문자열), -12, '3.14'
const arr = []
if (arr)
{
console.log("true")
}이도 true가 출력된다.
즉, 빈 배열 역시 true로 인식된다.
(파이썬과 아주 큰 차이점)
false로 취급하는 값 ->
false, ''(빈 문자열), null, undefined, 0, -0, NaN(Not a Number)
이들도 자동으로 boolean으로 '형변환'되는 것이다.
Nan 예시:
기본적으로 덧셈 같은 것은 숫자에서 이루어지는 과정인데 더해진 값이 숫자로 판단할 수 없는 값이므로 이런 때는 NaN이라는 특정 값이 리턴된다.
(에러가 일어나지 않고 특정 값이 리턴된다는 것이 자바스크립트의 매우 큰 특징이라 할 수 있겠다.)
