Post

자바스크립트 공부 - 기초

Posted
By hleecaster
9 min read

자바스크립트를 본격적으로 익히기에 앞서, 기초 수준의 것들만 예시 중심으로만 최대한 쉽고 가볍게 훑어본다.

콘솔창 출력

콘솔은 오류와 같은 중요한 메시지를 표시할 수 있는 곳이기 때문에 매우 중요하다. 컴퓨터가 하는 작업을 볼 수 없기 때문에 콘솔에 직접 인쇄하거나 로그로 남겨서 확인해야 한다.

자바스크립트에서는 언어에 기본적으로 내장된 키워드 console을 사용해서 할 수 있다. console.log()를 사용하면 괄호 안에 넣은 내용이 콘솔에 인쇄되거나 기록된다.

숫자 10과 문자열 ‘HELLO WORLD’를 각각 출력하려면 이렇게 하면 되겠다.

1
2

console.log(10);
console.log('HELLO WORLD');

문장 끝에 세미콜론은 습관적으로 붙여주자.

주석 쓰기

크게 두 가지 방법이 있다.

일단 한 줄 주석을 달 때는 //를 사용한다.

1
2
3
4

// 이렇게 써도 되고
console.log(10);

console.log(10);  // 이렇게 써도 된다

여러 줄 주석을 달고 싶으면 해당 내용을 /* 와 */로 감싸면 된다.

1
2
3
4
5

/*
여기에는 무슨 내용을 쓰든 주석 처리 된다.
console.log(10);
이렇게 쓰더라도 어차피 해당 코드는 실행이 안 된다.
*/

/* 와 */는 코드 사이에 쓸 수도 있다. 이 부분은 무시해버리고 실행을 안 한다.

1

console.log(/*이 부분이 주석*/ 10);

자료형 (Data Types)

자바스크립트에서 다루는 기본적인 자료형은 이런 것들이 있다.

  • Number: 숫자. 소숫점 포함 가능.
  • String: 문자열. 작은 따옴표 '…'또는 큰 따옴표 "…"로 묶어서 표현하는데, 보통은 작은 따옴표를 선호한다.
  • Boolean: true 아니면 false
  • Null_: 값이 아예 없을 때는 null이라 표현한다.
  • Undefined: 자료형이 정의되지 않았을 때는 undefined라 표현한다. (null과 다른 개념.)
  • Symbol: 기호는 고유한 식별자라서 더 복잡한 코딩을 할 때 유용한데, 일단 걱정하지 말고 넘어가자.
  • Object: 관련 있는 데이터들의 모음을 의미한다.

마지막 Object(객체)는 좀 복잡한 개념이니 일단 처음에는 “숫자”와 “문자열”부터 다뤄보고, 이후 차차 익혀가는 것으로.

산술 연산자 (Operator)

자바스크립트에는 산줄 연산자가 내장되어 있어 수학적 계산을 수행할 수 있다.

  • 더하기: +
  • 빼기: -
  • 곱하기: *
  • 나누기: /
  • 나머지: %
1
2
3
4
5

console.log(1 + 3); // 4가 출력된다.
console.log(4 - 1); // 3이 출력된다.
console.log(3 * 2); // 6이 출력된다.
console.log(8 / 2); // 4가 출력된다.
console.log(13 % 3); // 1이 출력된다.

연산자가 꼭 이것만 있는 건 아니지만, 그것들은 이후에 차차 익히는 것으로.

문자열 합치기 (이어 붙이기)

+는 문자열을 합쳐서 출력할 때, 즉 이어 붙일 때도 사용된다.

1
2

console.log('Hello' + ' ' + 'World');
// 'Hello World'가 출력된다.

속성 (Property)

자바스크립트에서 자료형을 사용하면 브라우저가 이것을 인스턴스(임시 객체)로 저장하게 된다. 그리고 이 인스턴스 뒤에 마침표(.)를 찍고 이후 속성을 적어주면 해당 속성을 사용할 수가 있다.

예를 들어 문자열 인스턴스에 대해서는 그 문자열의 문자 수(길이)를 저장하는 .length라는 속성이 있다. 아래와 같이 쓸 수 있다.

1
2

console.log('Hello World'.length);
// 11이 출력된다. 공백도 글자 수에 포함된다.

속성에 꼭 length만 있는 건 아니고 각 자료형마다 사용할 수 있는 속성들이 각각 있다. 더 자세한 건 추후에.

일단 이런 식으로 속성에 접근한다는 것만 알고 넘어가자.

메서드 (Method)

방금 살펴본 속성(Property)이 인스턴스의 무언가를 불러오는 방법이라면, 메서드(Method)는 해당 인스턴스를 가지고 특정 작업을 수행하는 거다.

사용법은 속성과 유사하지만 인스턴스 뒤에 마침표를 찍고 괄호로 묶어준다. 예를 들면 위에서 그동안 계속 사용했던 콘솔 출력도 console.log()라고 써줬는데, console 객체에 log() 메서드를 사용한 거다.

몇 개 더 예시를 살펴보면

1
2
3
4
5
6

console.log('hello'.toUpperCase());
// 문자열이 대문자로 변환하는 메서드. 'HELLO'가 출력된다.
console.log('hello'.startsWith('h'));
// 문자열이 특정 문자로 시작하는지 확인하는 메서드. true가 출력된다.
console.log('  Hello World  '.trim());
// 문자열 시작과 끝에 공백문자를 삭제하는 메서드. 'Hello World'가 출력된다.

자바스크립트 문자열을 다루는 메서드들을 더 자세히 알고 싶다면 이 문서를 살펴보자.

객체 (Object)

자바스크립트는 애초에 객제(Obejct) 기반의 언어라, 대부분 객체라 보면 된다. 이를 테면 위에서 콘솔 출력을 위해 사용했던 console.log() 구문에서도 console이 객체이고, 그 객체를 통해 log라는 메서드를 사용해서 작업을 수행하도록 한 것이다. (모든 객체에는 메서드가 있다고 생각하면 된다.)

이번에는 math 객체를 가져와 다양한 메서드를 사용해보며 개념을 익혀보자.

1
2
3
4
5
6
7
8

console.log(Math.random());
// random 메서드를 통해 0과 1 사이의 난수를 출력한다.
console.log(Math.random() * 50);
// 0에서 50 사이의 난수를 출력하고 싶다면 이렇게 연산을 하는 것도 가능하다.
console.log(Math.floor(4.666));
// 소숫점을 내림하려면 floor 메서드를 사용하면 된다. 가장 가까운 정수 4로 내림한다.
console.log(Math.ceil(4.666));
// 소숫점을 내림하려면 floor 메서드를 사용하면 된다. 가장 가까운 정수 5로 올림한다.

Number라는 객체도 있다.

1
2

console.log(Number.isInteger(4.666));
// isInteger 메서드를 통해 정수인지 아닌지 확인한다. false가 출력된다.

자바스크립트에 내장된 빌트인 객체에 대해서 더 자세히 알고 싶다면 이 문서를 참고하자.

WORK, HTML & JavaScript
JavaScript
This post is licensed under CC BY 4.0 by the author.