JavaScript 기본 문법 정리

JavaScript 기본 문법 정리

baealex

소비적인 일보단 생산적인 일을 좋아합니다.

Sign in to view email

이전에 노트에 기록했던 내용을 블로그로 옮겨놓으려고 한다. 매우 기본적인 문법만 들어있다.


1. 변수

자바스크립트에는 변수형(int, double, string)이 존재하지 않는다. var 이라는 가변형 변수만 존재하여 초기화 할때 형태에 따라서 알아서 할당된다.

var i;
var x = 123;
var y = "123";
var z = false;
var w = null;

덧붙히자면 var의 유효 범위는 함수 내부로 조건문이나 반복문 안에서 초기화 된 경우라도 함수 내부 블록이라면 어디서나 호출할 수 있다. 최신 자바스크립트에선 let이라는 블럭 지역 변수를 제공하고 있다.


2. 연산자

+, -, *, /, % 등의 기본 연산은 물론 ++, --와 같은 증감 연산자도 사용할 수 있다.

a = a + 1 (x)
a += 1 (o)

이유는 모르겠지만 자바스크립트에서 위와같은 표현은 쓰지 말라고 돼있다. 무조건 할당 연산자를 사용하라고 한다. 가독성을 위함인가? 또한 자바스크립트는 자바와 마찬가지로 스트링 컨케트네이션이 되므로 문자열을 덧셈기호로 간단히 붙힐 수 있다.

var s = "String1" + "String2";
document.write(s);
String1String2


3. 조건문

a==b
a!=b
a==b && a==c
a==b || a==c
a > b
if(a>b) {
    document.write("a is more than b.")
} else if(a==b) {
    document.write("a is the same as b.")
} else {
    document.write("a is less than b.")
}


4. 함수

선언과 호출은 아래와 같이 작성한다.

function send() {
    alert('send');
}

send();

자바스크립트의 함수는 굉장히 다채롭게 선언할 수 있다. 가령 아래와 같이 함수를 생성할 수도 있다.

send = function() {
    alert('send');
}

send();

최근 자바스크립트 문법에선 화살표 함수라는 개념이 도입되어 아래와 같이 생성할 수도 있다.

send = () => {
    alert('send');
}

send();

위처럼 여러가지 형식을 가지고 있는데 정해진 규칙은 없으므로 자신이 원하는 방식으로 일관성 있게 작성하면 된다. 다만 화살표 함수의 경우엔 구형 브라우저에선 인식되지 않을 수 있다.

값을 반환하는 함수는 아래와 같이 작성

var a=10;
var b=20;
var sum = add(a, b);

function add(value1, value2) {
    return value1 + value2;
}

document.write(sum);
30


5. 배열

변수의 값이 연속적으로 나열된 형식


배열의 선언
var arr = new Array;
var arr = [];


배열에 값 삽입
var job = [];
job[0] = "Warrior";
job[1] = "Archer";
job[2] = "Wizard";

var job = ["Warrior", "Archer", "Wizard"];


배열과 관련된 메소드
var job = ["Warrior", "Archer", "Wizard"];
document.write("Total Jobs : " + job.length);
Total Jobs : 3

length는 메서드라 표현하기 애매하다. 자바스크립트에서 Array는 하나의 객체이며 length는 Array가 가진 멤버 변수로 보여진다. 배열의 길이가 필요할 때마다 길이를 읽어오는 것 보단 O(N) 길이를 가지고 있는게 O(1) 효율적일 테니까


var job = ["Warrior", "Archer", "Wizard"];
document.write("Total Jobs : " + job.join(","));
Total Jobs Name : Warrior,Archer,Wizard


var job = ["Warrior", "Archer", "Wizard"];
document.write("Total Jobs Reverse : " + job.reverse());
Total Jobs Name : Wizard,Archer,Warrior


var job = ["Warrior", "Archer", "Wizard"];
document.write("Total Jobs Sort : " + job.sort());
Total Jobs Sort : Archer,Warrior,Wizard


var job = ["Warrior", "Archer", "Wizard"];
var DLC_job = ["Assassin", "Samurai"]
document.write("Total Jobs : " + job.concat(DLC_job));
Total Jobs : Warrior,Archer,Wizard,Assassin,Samurai


var job = ["Warrior", "Archer", "Wizard"];
document.write("<p>" + "Total Jobs : " + job.push("Devil", "Outlaw" + "</p>"));
document.write("<p>" + "Total Jobs : " + job.pop( + "</p>"));
Total Jobs : 5
Total Jobs : Outlaw

push와 pop은 자료구조 Stack에서 다뤄지며 javascript에도 동일한 기능을 수행한다. push는 맨 뒤에 요소를 삽입 pop은 맨 뒤 요소를 꺼내는 것이다.


var job = ["Warrior", "Archer", "Wizard"];
job.shift();
job.unshift("Knight")
document.write("Total Jobs : " + job);
Total Jobs : Knight,Archer,Wizard

shift, unshift는 맨 앞에 요소를 빼거나 삽입하는 기능을 한다.


6. 오브젝트(Object)

구조체(struct) 처럼 내부에 여러 변수를 가질 수 있고 클래스(class)처럼 내부에 메소드를 포함하고 있는 형식이다. JSON이라고 많이 알려진 형식이다.


오브젝트의 선언
var obj = new Object;
var obj = {};


변수를 가진 오브젝트

hp와 mp를 가진 player를 생성해보자.

var player = {};
player.hp = 100;
player.mp = 300;

var player = {
    hp : 100,
    mp : 300
};


메소드를 가진 오브젝트

플레이어가 후려맞은(?) 기능을 넣어보자

var player = {
    hp : 100,
    mp : 300,
    hit : function() {
        this.hp -= 10;
        document.write("HIT!!");
    }
};
player.hit();
document.write(player.hp);
HIT!!90


오브젝트 할당

위는 플레이어가 선언됨과 동시에 사용되고 있다. 만일 클래스 혹은 구조체처럼 단지 구조만 선언하고 싶은 경우엔 어떻게 표현할 수 있을까? 오브젝트를 함수로 선언하면 된다.

var player = function(name) {
    var name = name;
    var hp = 100;
    var mp = 300;
    return {
        hit: function(damege) {
            hp -= damege;
            document.write("HIT!!");
        },
        die: function() {
            return hp == 0 ? true : false;
        }
    }
}

var medic = new player('medic');
medic.hit(50); // HIT!!
document.write(medic.die()); // false

var fireBet = new player('fireBet');
fireBet.hit(100); // HIT!!
document.write(fireBet.die()); // true

위가 클로져라는 개념을 응용한 방식인데 여하지간 위와같이 선언하여 하나의 구조체를 여러 변수에서 할당받아 사용할 수 있다.


7. 반복문

반복문이 이렇게 아래에 나오는 이유는 위에서 얻은 개념으로 반복문을 더욱 효율적으로 응용할 수 있기 때문이다. 아래는 가장 기본적으로 사용되는 방식의 반복문이다.

for(var i=0; i<5; i++) {
    document.write(i);
}
var i = 0;
while(i<5) {
    document.write(i);
    i++;
}
01234


for (변수 in 객체 또는 배열)
arr = [10, 20, 30, 40, 50];

for(var i in arr) {
    document.write(i);
}
01234

in의 경우에는 배열이나 객체의 갯수의 인덱스가 i에 할당되어 반복이 진행된다.


for (변수 of 객체 또는 배열)
arr = [10, 20, 30, 40, 50];

for(var i of arr) {
    document.write(i);
}
1020304050

of의 경우에는 배열이나 객체의 값이 i에 할당되어 반복이 진행된다. 혹은 forEach나 map을 이용해서 객체의 반복을 실행할 수도 있다.

arr = [10, 20, 30, 40, 50];

arr.forEach((value) => {
    document.write(value);
});

arr.map((value) => {
    document.write(value);
});

둘다 똑같이 아래의 결과를 출력한다.

1020304050

속도는 forEach가 빠르다고 알려져있다. map에선 값과 동시에 인덱스를 출력 할 수도 있다.

arr = [10, 20, 30, 40, 50];

arr.map((value, index) => {
    // value = 10, index = 0
    // value = 20, index = 1
    // value = 30, index = 2
    // value = 40, index = 3
    // value = 50, index = 4
});


8. 문자열

문자열은 가장 기본적인 구조인데 이렇게 뒤에 있는 이유는 알아둬야 할 기능이 생각보다 많아서다. 그 중에도 간단하고 중요한 것만 기록할 예정이다.

var Welcome = "ONDE Planet is the most peaceful space in the universe";

document.write(Welcome.charAt(0));
// charAt(n) : n번째 문자를 출력한다. 결과는 O

document.write(Welcome.charCodeAt(0));
// charCodeAt(n) : n번째 문자의 유니코드를 출력한다. 결과는 79

document.write(Welcome.indexOf("x"));
// indexOf("?") : ?라는 글자가 있다면 글자의 인덱스를, 없다면 false(-1)을 출력한다. 결과는 -1

document.write(Welcome.includes("space"));
// includes("?") : ?라는 글자가 있다면 true(0), 없다면 false(-1)을 출력한다. 결과는 0

document.write(Welcome.replace("peaceful", "nasty"));
// replace("a", "b") : a를 b로 교체한다. 결과는 ONDE Planet is the most nasty space in the universe.

document.write(Welcome.search("universe"));
// search("?") : ?라는 글자를 검색하여 첫 문자의 시작 지점을 알려준다. 결과는 46

document.write(Welcome.slice(0,4));
// slice(n, n') : n~n'-1 까지의 문자를 가져온다. 결과는 ONDE

document.write(Welcome.split(" "));
// split("?") : ?라는 문자를 기준으로 문자열을 분리한다. 결과는 ONDE,Planet,is,the,most,peaceful...

document.write(Welcome.trim());
// trim() : 앞, 뒤의 공백을 제거하는 역할을 한다. 이 값에서는 앞뒤에 공백이 없으므로 결과가 본래의 문자열과 동일하다.

document.write(Welcome.length);
// length : 문자열의 길이를 반환한다. 결과는 55


더 알야할 내용들

relace의 경우에는 처음 발견된 문장만 변경하는데 만일 다수의 문장을 변경하고 싶은 경우엔 어떻게 할 수 있을까? 가령 replaceAll 처럼 말이다. 바로 정규표현식을 사용하면 되는데 여기선 자세한 내용을 다루진 않는다. 대략 아래와 같은 모양이다.

document.write(Welcome.replace(/ /gi, "-"));
// 모든 공백이 -로 바뀐다.

slice에는 음수를 넣을 수 있다. 음수를 선택하면 뒤에부터 가져오므로 상당히 유용한 기능이며 배열에도 사용할 수 있다.

document.write(Welcome.slice(-3));
// 맨 뒤에 3글자만 가져온다.


9. 수학연산

Math라는 기능을 이용하여 사용할 수 있는 연산들이다.

Math.abs(-3);
// Math.abs(n) : n을 절댓값으로 바꾼다.

Math.ceil(3.1);
// Math.ceil(n) : n값을 올림한다.

Math.floor(3.9);
// Math.floor(n) : n값을 내림한다.

Math.round(3.5);
// Math.round(n) : n값을 반올림한다.

var a = Math.random();
// Math.random() : 난수를 생성한다.

var b = Math.random()*10+10;
// Math.random()*x+y : y~x+y 범위에서 난수가 생성된다.

var c = Math.floor(Math.random() * (max - min)) + min;
// min 부터 max - 1 까지 범위의 난수


10. 형변환

// Num -> String
num = 2018;
var str = string(num);
var str = num.toString();

// String -> Num
var str = "2018.08";
var mInt = Number(str); // 2018
var mInt = parseInt(str); // 2018
var mFloat = parseFloat(str); // 2018.08

// JSON -> String
var myInfo = {
    name: '배진오',
    age: 24,
};
console.log(myInfo);
// 위와같이 출력하면 Object로 출력됨
console.log(JSON.stringify(myInfo));
// 위와같이 출력해야 문자열 JSON으로 출력됨

var myInfoStr = JSON.stringify(myInfo);
var transMyInfoToJSON = JSON.parse(myInfoStr);
// JSON 형식의 문자열이라면 parse를 이용해서 JSON으로 변환할 수 있음
ehottl
1개월, 2주전 edited

파이썬을 배울때는 몰랐는데, 자바스크립트를 배우면서 알게되었죠.

```
> "4" - 3
1
> "4" + 3
"43"
```

파이썬이 쉽다는 걸ㅋ

baealex
1개월, 2주전

@ehottl 자유로운 형변환은 좋지만 저런 문법은 가독성이나 일관성을 너무 해쳐서 차라리 파이썬처럼 오류 뱉는게 좋은거 같아요. 모든게 완벽한 파이썬 갓... 👍

로그인된 사용자만 댓글을 작성할 수 있습니다.