Development./JavaScript.

[JavaScript] 기초 문법 정리

Chuuu_DevCamp:) 2020. 8. 17. 19:42
반응형

회사 내에서 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