반응형
회사 내에서 web tool 개발 필요한 일이 생겨 web tool 개발을 위해 자바스크립트를 공부하게 되었다.
자바스크립트의 기초 문법 정리부터 시작 하겠다.
변수
- 자바스크립트의 변수에 저장할 수 있는 데이터의 종류
- String / Number / Boolean / Null - 자바스크립트는 변수형이 존재하지 않고, var이라는 가변형 변수만 존재함. 초기화 할 때 저장할 데이터 형태에 따라서 알아서 할당 됨.
- example.
var message = "Hello JavaScript!";
var number = 123;
var isTrue = true;
var variable = null;
연산자
- +, -, *, /, % 등 기본 연산 가능하며, 증감연산자(++, --)도 사용 가능하다.
var num = 5;
num += 1;
// num = 6
var sampleStr = "abc" + "Mart";
// sampleStr = "abcMart"
- 하지만, 자바스크립트에서는 아래와 같은 표현은 쓰지 말라고 한다. 할당 연산자를 무조건 사용해야 하는데 그 이유는 잘 모르겠다.
var num = 1;
num = num + 1; // X (do not use like this code)
num += 1; // OK
조건문
- 조건문은 c++와 동일하게 사용 가능하다
함수
- 기본적으로 선언과 호출은 아래와 같이 코드를 작성한다.
function popupMessage() {
alert('warning!');
}
popupMessage();
- 자바스크립트 함수는 다채롭게 선언 할 수 있다. 예를 들면 아래와 같이 함수를 생성할 수도 있다.
- 아래 예제와 같이 여러가지 형식을 가지고 있는데, 정해진 규칙은 없으므로 자신이 원하는 방식으로 일관성 있게 작성하면 될 것 같다.
- 다만 마지막 예제 처럼 화살표를 사용한 함수는 구형 브라우저에는 인식 되지 않을 수 있으므로 주의해야 한다.
popupMessage = function() {
alert('warning!');
}
popupMessage();
popupMessage = () => {
alert('warning!');
}
popupMessage();
배열( Array )
- 배열 선언 & 값 삽입
// ================ variable declaration ================
var arr = new Array;
// or
var arr = [];
// ================ value settings ================
arr[0] = "Starbucks";
arr[1] = "Hollys";
arr[2] = "Compose";
// or
arr = ["Starbucks", "Hollys", "Compose"];
오브젝트( Object )
- 구조체(struct)처럼 내부에 여러 변수를 가질 수 있으며, class처럼 내부에 메소드를 포함하는 형식이다.
- Object의 선언
var sample = new Object;
var sample = {};
- 변수를 가지는 오브젝트
var address = {};
address.name = "Bexco";
address.city = "Busan";
var address = {
name = "Bexco";
city = "Busan";
};
- 메소드를 가지는 오브젝트
var address = {
name = "Bexco";
city = "Busan";
getName: function() {
return this.name;
}
getCity: function() {
return this.city;
}
};
var addressCity = address.getCity();
document.write(addressCity);
// print Busan
반복문
for (var idx = 0; idx < 10; i++) {
document.write(idx);
}
var num = 0;
while (num < 10) {
document.write(num);
num++;
}
// print 0123456789
var list = [1, 2, 3, 4, 5];
for (var idx in list) {
document.write(idx);
}
// print 01234
// for - in 구문에서는 객채의 갯수의 인덱스가 idx에 할당 되어 반복이 진행 된다.
// 따라서, list내 값에 접근하기 위해서는 아래와 같이 작성 되어야 한다.
for (var num of list) {
document.write(num);
}
//아래와 같이 forEach나 map를 사용할 수도 있다.
list.forEach((value) => {
document.write(value);
}
list.map((value) => {
document.write(value);
}
// print 12345