아 사진 화질 깨지는 거 불편하다,,,,
수강 계기
지금까지 웹 어플리케이션을 두어개 만들어봤지만 백엔드 단만 신경을 썼었고 프론트는 제대로 공부하지 않았다. 확실히 혼자 개발할 때는 프론트 단의 한계를 많이 느껴서 기초 공부를 시작하기로 마음먹었다. html과 css는 얼추 공부했지만 javascript는 정말 문법도 제대로 공부해본 적이 없었다. 필요할 때만 구글로 쫌쫌따리 알아봤다.
인프런의 웹 게임을 만들며 배우는 자바스크립트는 기초 수업을 찾던 중 발견한 강의다. 직접 게임을 만들어보면서 배우면 지루하지 않고 재미있을 것 같아서 수강해봤다.
기억해두면 좋을만한 내용 정리
JS 문법
문법 파트는 들어봤더니 정말 처음 프로그래밍에 입문하는 사람들 입장에서 쉽게 설명해주셨다.
하지만 나는 다른 언어들의 문법 공부를 해봤기 때문에 js만의 특성을 더 알고 싶었다. 그래서 문법 파트는 다른 공부 사이트를 참고했다. 아래 내용은 공부한 내용 중 나중에 다시 되새기면 좋을 것 같은 것들을 정리했다.
개요
Javascript는 웹페이지를 동적으로 만들어주는 언어로, 객체 기반의 스크립트 프로그래밍 언어다. 단순히 규격만들 나타내는 HTML, CSS와는 달리 변수와 함수 등이 존재하는 프로그래밍 언어다.
- 스크립트 언어
JS는 스크립트 언어이자 인터프리터 방식이 사용되어 컴파일 과정이 필요 없다. 브라우저에서 즉시 한 줄 한 줄 해석되어 실행된다. 물론 브라우저마다 엔진이 다르기 때문에 조금씩은 다르게 작동한다. - 동적타입 언어
동적타입 언어는 실행 시에 변수의 자료형을 결정하는 언어다. python도 이에 해당한다.
var a = 10;
var b = 'K';
function main() {
return 2;
}위처럼 작성하면 인터브리터가 알아서 a, b 변수의 자료형을 파악하고 메모리에 저장한다. 개발 효율성이 정말 많이 올라가지만 실행 도중 변수에 예상치 못한 타입이 들어와 TypeError를 반환하는 경우도 있기 때문에 더 조심해야한다.
자료형
- Primitive(원시) 타입
| 자료형 | 설명 | 예 |
|---|---|---|
| Boolean | 논리적인 요소 | true, false |
| null | 빈 값의 리터럴한 표현 | |
| undefined | 값을 할당하지 않은 변수가 가지는 값 | var a |
| Number | 숫자형 | 정수, 부동소수점 등 |
| String | 문자열 | "test" |
- `NaN`은 숫자가 아님을 의미한다. ex) `parseInt('bla')` , `Math.sqrt(-1)` 등의 반환값
- `Infinity`는 무한대를 의미한다. ex) `42/0`의 반환값
- 자바스크립트에서는 C와 달리 문자열(String)을 지원하고 `char`형이 존재하지 않는다.-
Object(객체) 타입
위 타입 이외의 모든 변수는 객체 타입이다. 객체 타입은 Reference 타입이라고도 불린다. Primitive는 다른 변수에 값을 할당하거나 함수 인자로 넘길 때 값을 복사하여 전달하지만 객체는 메모리 주소를 복사시키며 값 자체는 복사되지 않아서 같은 객체를 참조하게 된다.
배열, 객체(Dictionary)가 이에 해당한다.
비교연산자
비교 연산자는 ===를 쓰는 게 좋다.
- javascript
> 5 === "5"
false
> 5 == "5"
true- python
>>> 5 == "5"
False다른 언어들과 달리 javascript에서 == 비교연산자는 비교 전에 두 피연산자를 동일한 자료형으로 변환하여 비교한다. 같은 자료형인지도 확인하려면 ===를 써야한다.
조건문
JS에서 비교연산의 결과나 논리 연산은 0과 1이 아닌 boolean 타입으로 이루어진다. 아래는 조건문 상에서 자동으로 false로 형변환되는 자료형들이다.
- 0
- ""
- undefined(빈 배열, 객체는 undefined다.)
- null
- NaN
이 자료형을 조건문에 넣으면 자동으로false로 형변환되어 처리되기 때문에 정상적으로 동작한다.
반복문
- while 문
조건문은{}로 감쌀 필요가 없지만 while 문은 필요하다. - for in 문
var colors = ['red', 'blue', 'green'];
var me = {
'name': 'young',
'birth': 1996,
'sex': 'm'
}
for (var i in me)
document.write(i + ':' + me[i] + '<br>');