기초¶

변수와 상수¶

변수¶

변수(variable)란 값을 대입할 수 있는 이름(식별자)입니다. 변수의 값은 언제든 바뀔 수 있습니다. 변수를 선언할 때 let 키워드를 사용합니다. 자바스크립트 이전 버전에서는 var을 사용하던지 키워드를 사용하지 않아도 됐었습니다. 하지만 스코프에 대한 혼동으로 let이란 블록 영역 변수 선언으로 ES6부터 도입하게 되었습니다.

let 온도 = 28;

여기서 온도가 변수가 되며 let을 이용해 선언하면서 초기값을 할당하고 있습니다. 선언만 하고 나중에 값을 할당할 수도 있습니다. 만일 값을 할당하지 않고 선언만하면 기본적으로 undefined라는 값이 할당이 됩니다.

또한 언제든 변수에 다른 타입을 할당할 수도 있습니다.

온도 = "오늘은 너무 덥네요!";

위와 같이 온도 변수에 문자열 타입을 할당해도 됩니다. 즉, 변수는 어떤 타입의 값도 할당할 수 있습니다.

let 문 하나로 여러 개의 변수들을 선언할 수도 있습니다.

let 온도 = 28, 방1 = "세미나", 방2;

여기서 변수 온도, 방1, 방2가 선언되었고 방2에는 값이 할당되지 않았으므로 undefined가 할당이 됩니다.

상수(const)¶

상수 const는 ES6에서 도입된 키워드로 한번 할당되면 값을 변경할 수 없습니다.

const ROOM_TEMP = 26, MAX_TEMP = 30;

상수 이름은 일반적으로 대문자와 밑줄로만 사용합니다. 될 수 있으면 변수보다 상수를 사용해야 합니다.

식별자(identifier)¶

변수와 상수, 함수 이름들을 식별자라고 합니다. 식별자는 다음과 같은 규칙이 있습니다.

식별자는 반드시 글자나 달러 기호($), 밑줄(_)로 시작해야 합니다.
식별자는 글자, 숫자, 달러 기호, 밑줄만 사용할 수 있습니다.
한글을 포함 유니코드를 사용할 수 있습니다.
예약어는 식별자로 사용할 수 없습니다.

식별자를 사용할 때 일반적으로 다음과 규칙을 따릅니다.

클래스를 정의할 때 사용하는 식별자를 제외하고는 첫글자로 대문자를 쓰지 않습니다.(camelCase 또는 CamelCase)
밑줄 한 개 또는 두 개로 시작하는 식별자는 특별한 상황, 자신 만이 내부에서 사용할 목적이외로는 사용하지 않습니다.
jQuery를 사용할 때는 달러 기호로 시작하는 식별자는 jQuery 객체 이름으로 사용됩니다.

리터럴(literal)¶

리터럴이란 문자 그대로(보이는 그대로) 정해진 객체가 되는 것을 말합니다. 즉, 숫자 10은 숫자형으로 인식을 하고 따옴표로 묶은 것은 문자열로 객체로 인식됩니다.

let num = 20; // 숫자 리터럴
let room = "세미나실"; // 따옴표로 둘러싼 것은 문자열 리터럴

연산자¶

자바스크립트에서는 다음과 같은 연산자들이 있습니다.

대입 연산자
비교 연산자
산술 연산자
비트 연산자
논리 연산자

대입 연산자¶

확산 또는 전개(spread) 연산자¶

확산 또는 전개 연산자라고도 불립니다. 2개 이상의 인수나 2개 이상의 요소 또는 2개 이상의 변수가 예상되는 곳에서 확장되는데 사용됩니다.

함수의 인수에 사용¶

> function myFun(x, y, z) {console.log(x, y, z)}
> let args = [1, 2, 3]
> myFun(...args)
1 2 3

배열에서 사용¶

> parts = ['shoulders', 'knees']
> lyrics = ['head', ...parts, 'and', 'toes']
[ 'head', 'shoulders', 'knees', 'and', 'toes' ]

자료형¶

자바스크립트에는 6가지 기본형(primitive type)과 객체(object)가 있습니다.

숫자(Number)
문자열(String)
불리언(Booolean)
Null
Undefined
심볼(Symbol)
BigInt(stage 3)

기본형은 불변(immutable)이라 한 번 만들어지면 바꿀 수 없습니다. 기본형들도 래퍼(wrapper) 객체가 존재하여 여러 가지 메소드들을 사용할 수 있습니다.

기본형과 달리 변할 수 있는(mutable) 객체형이 있습니다. 내장 객체형으로 다음과 같은 것들이 있습니다.

Array
Date
RegExp
Map과 WeakMap
Set과 WeakSet

숫자¶

자바스크립트는 숫자형이 배정밀도(64bit) 부동소숫점 형식 IEEE-754 하나밖에 없습니다. 즉 정수형 타입이 존재하지 않습니다. 하지만 10진수, 2진수, 8진수, 16진수 리터럴을 인식할 수 있습니다. 또한 과학용 지수 표현과 무한대, 음의 무한대, NaN 값 등이 있습니다.

10;
0x0000ff; // 16진수
0o0022; // 8진수
21.5;
3.1e-10;
-1.3E20;
Infinity;
-Infinity;
Nan;

자세한 것은 이곳을 참조바랍니다.

문자열¶

자바스크립트 문자열은 유니코드 텍스트입니다. 문자열 리터를에는 작은 따옴표 ', 큰따옴표 ", 백틱(backtick) `을 사용합니다. 백틱은 템플릿 문자열에서 사용합니다.

탈출문자¶

문자열 리터럴 안에 같은 따옴표를 반복할 필요가 있을 때나 특수한 문자를 입력하기 위해서 탈출문자 역슬래시 \를 사용합니다.

"Sam said "don't do that!" to Mike"; // 에러 발생

큰따옴표 안에 큰따옴표가 중복되어 에러가 발생합니다. 이러한 것을 피하기 위해 탈출문자를 사용합니다.

"Sam said \"don't do that!\" to Mike";

특수문자¶

코드	줄바꿈	예제
`\n`	줄바꿈	`"` 첫줄 `\n` 둘째줄 `"`
`\r`	캐리지리턴	`"` 윈도즈첫줄 `\r\n` 윈도즈 둘째줄 `"`
`\'`	작은따옴표	`"` Don `\'`t `"`
`\"`	큰따옴표	`"` `\"`안녕하세요 `\"`라고 말했다 `"`
\`	백틱	` ES6 도입: \` 문자열 `
`\$`	달러 기호	` ES6: ${변수명} `
`\\`	역슬래시	`"` 역슬래시 `\\` 은 `\\\\` 사용 `"`

템플릿 문자열¶

문자열 템플릿을 이용해서 문자열 안에 변수나 상수를 사용할 수 있습니다. 템플릿 문자열은 백틱을 이용해서 만들고 달러 기호와 중괄호 안에 변수를 사용합니다.

let 온도 = 28;

const msg = `현재 온도는 ${온도}도 입니다.`;

여러 줄 문자열¶

문자열을 여러 줄에 걸쳐서 사용하고 싶으면 따옴표 문자열 줄 끝에 \n\을 삽입합니다.

const multiline = "line1\n\
line2";

다음과 같이 백틱을 사용하면 탈출문자 없이도 사용할 수 있습니다.

const mutliline = `line1
line2`

하지만 다음과 같이 다음줄 앞에 빈 공백이 있으면 그대로 출력됩니다.

let multiline = `line1
  line2
  line3`;

이것을 피하기 위해서는 문자열 병합을 이용합니다.

let multiline = "line1\n" +
  "line2\n" +
  "line3";

숫자와 문자열¶

숫자를 따옴표 안에 넣으면 그것은 문자열 객체입니다. 그리고 숫자 리터럴과 문자열과 더하면 문자열 리터럴로 변경됩니다. 결과 문자열은 두 문자열을 합친 것이 됩니다.

1 + '2'; // 결과는 문자열이고 '12'

더하기 연산은 왼쪽 우선이기때문에 다음과 같은 경우는 숫자의 덧셈을 하고 다음에 문자열 합치기를 합니다.

2 + 3 + 'a' // 결과는 '5a'

하지만 더하기를 제외한 문자열 숫자와 리터럴 숫자의 연산은 문자열이 숫자로 바뀌어 계산됩니다.

5 * '10'; // 결과는 숫자 50
'10' / 5; // 결과는 숫자 2
5 - '10'; // 결과는 숫자 -5

불리언(boolean)¶

불리언은 true 또는 false 두 가지 값을 갖는 데이터 타입입니다. 불리언 사용시 따옴표 안에 넣으면 문자열로 인식하므로 주의하여야 합니다.

심볼(Symbol)¶

심볼은 ES6에서 도입된 것으로 유일한 토큰을 나타낸다. 심볼은 다음과 같이 Symbol() 생성자를 이용하여 만든다.

const RED = Symbol("red");
const red = Symbol("red");
RED === red; // false

`null` 과 `undefined`¶

null과 undefined는 둘 다 값이 존재하지 않는 것을 의미합니다. 사용자들은 null을 이용하는 것으로 충분하다. 변수를 선언하고 값을 할당하지 않으면 암시적으로 undefined가 설정됩니다.

객체(object)¶

Object는 리터럴하게 사용하여 중괄호를 이용하여 만들 수 있습니다. Object는 프로퍼티와 메소드로 구성됩니다. 프로퍼티는 Object가 갖는 값을 나타내며 메소드는 Object와 관련된 함수를 나타낸다. Object의 내용은 동적으로 언제든 바꿀 수 있습니다. 다음과 같이 빈 Object로 시작하자.

const obj = {};

다음과 같이 프로퍼티 color를 추가할 수 있습니다.

obj.color = "Red";

생성된 프로퍼티는 접근 연산자 . 또는 대괄호와 따옴표를 이용하여 사용할 수 있습니다.

console.log(obj.color);
console.log(obj['color']);

심볼을 프로퍼티로 사용할 수 있고 접근할 때는 대괄호를 사용합니다.

const SIZE = Symbol();
obj[SIZE] = 10;
console.log(obj[SIZE]);

프로퍼티 식별자로 공백을 사용할 수도 있습니다. 그 때는 따옴표로 식별자 이름을 묶어주어야 합니다. 그리고 접근할 때는 반드시 대괄호와 따옴표를 사용합니다.

obj["Not a Number"] = NaN;
console.log(obj["Not a Number"]);

Object를 만들면서 프로퍼티를 동시에 만들 수 있습니다.

const kim1 = {
  name: "Kim",
  age: 6,
};

const kim2 = {
  name: "Kim",
  age: 10,
};

const kim3 = {
  name: 'Kim',
  classification: {
    kingdom: 'Anamalia',
    class: 'Mamalia',
    family: 'Felidae',
  };
}

kim3에서 보는 바와 같이 Object도 프로퍼티의 값이 될 수 있습니다. classification의 family 프로퍼티에 접근하는 방법은 다음과 같이 여러 가지 방법이 있습니다.

kim3.classification.family;
kim3['classification'].family;
kim3.classification['family'];
kim3['classification']['family'];

Object의 메소드를 넣는 방법도 비슷하다.

kim3.speak = function() {return "Meow!";};

Object의 프로퍼티와 메소드는 delete 연산자를 사용합니다.

delete kim3.classification;
delete kim3.speak;

배열¶

생성
읽기
변경
삭제
복사
deep copy

배열의 요소는 어떤 객체도 될 수 있고 배열의 크기는 고정되지 않습니다. 배열의 인덱스는 0부터 시작합니다. 배열을 만들 때는 대괄호를 이용하고 쉼표로 요소를 구분합니다.

const a1 = [1, 2, 3, 4];
const a2 = [1, 'two', 3, null];
const a3 = ['안녕', '만나서', '반가워!'];
const a4 = [
  {name: "Diamond", hardenss: 10},
  {name: "Ruby", hardenss: 9},
  {name: "Topaz", hardenss: 8},
];
const a5 = [
  [1, 2, 3],
  [4, 5, 6],
]

배열은 length 프로퍼티가 있어서 배열의 요소의 갯수를 반환합니다.

const arr = ['a', 'b', 'c'];
arr.length; // 3

배열 요소 접근은 인덱스를 이용합니다.

const arr = ['a', 'b', 'c'];
arr[0]; // 'a'

배열 요소의 값을 덮어 쓸 때는 값을 할당하면 됩니다.

arr[0] = 10; // [10, 'b', 'c']

메소드들¶

concat¶

Array.prototype.concat() 배열과, 인자로 주어진 배열/값을 결합해 새로운 배열을 만들고, 이 새 배열을 반환합니다.

reduce¶

Array.prototype.reduce() reduce()메서드는 누산기(accumulator)와 배열의 각 요소(왼쪽에서 오른쪽으로)에 대해 하나의 단일 값(single value)으로 줄이는 함수를 적용합니다.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

날짜¶

자바스크립트 날짜는 내장된 Date 객체에 담당합니다. 날짜 객체는 new Date()를 사용합니다.

const now = new Date();
now; // 2018-07-02T07:39:37.773Z UTC 표현식입니다.

특정 날자와 시간에 해당하는 객체는 다음과 같이 쓴다.

const christmas = new Date(2018, 12, 25);

각부분 값을 가져오기 위해서는 메소드를 사용합니다.

christmas.getFullYear();
christmas.getMonth(); // 11; 1월은 0부터 시작합니다.
christmas.getDate(); // 25
christmas.getDay(); // 2(화요일. 0은 일요일)

정규 표현식¶

정규 표현식은 슬래시 / 사이에 넣는 리터럴 문법을 사용할 수 있습니다.

const email = /\b[a-z0-9._-]+@[a-z_-]+(?:\.[a-z]+)+\b/;

맵(Map)과 셋(Set)¶

ES6에서 도입된 것으로 맵은 객체와 마찬가지로 키와 값을 연결하지만 특정한 부분에서 객체와 다른 성질을 갖는다. Set은 중복을 허락하지 않습니다. WeakMap과 WeakSet은 Map과 Set과 비슷하지만 일부 기능을 제거해 성능을 향상시킨 버전입니다.

데이터 타입 변환¶

숫자로 변환¶

문자열을 숫자로 변환하려면 Number 객체를 이용합니다.

const num = '22.12';
Number(num);

숫자로 변환할 수 없으면 NaN이 반환됩니다.

또 다른 방법으로는 parseInt나 parseFloat 함수를 이용할 수 있습니다.

parseInt("223 393 mail", 10); // 223; 앞에서부터 공백을 제외한 숫자인 부분까지만 변환합니다.
parseFloat("123.45kg"); // 123.45;

문자열로 변환¶

자바스크립트의 모든 객체는 문자열로 변환할 수 있는 toString() 메소드를 가지고 있습니다. 숫자를 문자열로 변환하기 위해서 toString() 메소드를 사용합니다.

num = 123.34;
num.toString(); // 문자열 '123.34'

불리언으로 변환¶

자바스크립트는 true, false 외에 ‘참값은 값’과 ‘거짓 같은 값’이 존재합니다. 부정연산자를 사용하면 모든 값을 불리언으로 변경할 수 있습니다.

n = 0;
!!n; // false
Boolean(n); // false

MDN 자바스크립트 튜토리얼: https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript

기초¶

변수와 상수¶

변수¶

상수(const)¶

식별자(identifier)¶

리터럴(literal)¶

연산자¶

대입 연산자¶

확산 또는 전개(spread) 연산자¶

함수의 인수에 사용¶

배열에서 사용¶

자료형¶

숫자¶

문자열¶

탈출문자¶

특수문자¶

템플릿 문자열¶

여러 줄 문자열¶

숫자와 문자열¶

불리언(boolean)¶

심볼(Symbol)¶

`null` 과 `undefined`¶

객체(object)¶

배열¶

메소드들¶

concat¶

reduce¶

날짜¶

정규 표현식¶

맵(Map)과 셋(Set)¶

데이터 타입 변환¶

숫자로 변환¶

문자열로 변환¶

불리언으로 변환¶

자바스크립트(Javascript)

Navigation

Related Topics

기초¶

변수와 상수¶

변수¶

상수(const)¶

식별자(identifier)¶

리터럴(literal)¶

연산자¶

대입 연산자¶

확산 또는 전개(spread) 연산자¶

함수의 인수에 사용¶

배열에서 사용¶

자료형¶

숫자¶

문자열¶

탈출문자¶

특수문자¶

템플릿 문자열¶

여러 줄 문자열¶

숫자와 문자열¶

불리언(boolean)¶

심볼(Symbol)¶

null 과 undefined¶

객체(object)¶

배열¶

메소드들¶

concat¶

reduce¶

날짜¶

정규 표현식¶

맵(Map)과 셋(Set)¶

데이터 타입 변환¶

숫자로 변환¶

문자열로 변환¶

불리언으로 변환¶

`null` 과 `undefined`¶