위챗 미니프로그램 가이드 : 구문 syntax 1/2

[컴쌤]

유튜브강의 : https://youtu.be/-bBsnpC3Gtk

유튜브강의 : https://youtu.be/25qz2g_O85k

- 주석처리

주석 2가지 방식

한줄씩 처리 => // 사용

문단 처리 => /* ...문단내용 ... */

단축키 Alt + c

//한줄 주석처리

/* 
여기서부터 문단 주석이 시작됩니다.
가자 
어디로 
들로 
산으로 
여기가 문단 주석의 끝입니다. 
*/

- 콘솔명령

console.log("콘솔에 log를 출력합니다.");
console.info('콘솔에 info를 출력합니다.');
console.warn("콘솔에 warnning을 출력합니다.");
console.error("콘솔에 error를 출력합니다.");

- 변수(variable)

변수 선언 규칙

숫자로 시작할수 없습니다.

특수문자를 사용할수 없습니다.(단, $,_는 가능)

대소문자 구분합니다. (A 와 a 는 다른 변수)

자바스크립트 명령어/키워드는 사용할수 없습니다.

선언은 var, let, const (let, const는 es2015추가)

var money = 100;
let name = 'kim';
const PI = 3.14;

블럭 { } 안에서 선언 // 블럭 { } 밖에서 선언

//블럭안에서 선언 및 사용
    {
      var a = 100;
      let b = 200;
      const c = 300;

      console.log('var a = ', a);
      console.log('let b = ', b);
      console.log('const c = ', c);
    }

//블럭안에서 선언 => 블럭밖에서 사용 : let,const 불가능
    {
      var aa = 100;
      let bb = 200;  //블럭안에서만 유효
      const cc = 300;//블럭안에서만 유효
    }

    console.log('var aa = ', aa);
    console.log('let bb = ', bb);   //bb is not defined
    console.log('const cc = ', cc); //cc is not defined

재선언, 재할당

var aaa = 100;
let bbb = 200;
const ccc = 300;

재할당 : const 불가능

aaa = 10000;
bbb = 20000;
ccc = 30000; //"ccc" is read-only

재선언 : let, const 불가능

var aaa = 1000;
let bbb = 2000;   //Duplicate declaration "bbb"
const ccc = 3000; //Duplicate declaration "ccc"

- 데이타 종류

Number, String, Boolean, null, undefined, Array, Symbol, Object, Set, Map

Number (숫자) 

프로그래밍 언어에서의 숫자는 우리가 일반적으로 알고 있는 숫자와 그 성격이 사실상 동일하다.

우리는 숫자를 이용하여 덧셈(+) / 뺄셈(-) / 곱셈(*) / 나눗셈(/)등의 연산을 할 수 있다.

숫자를 변수에 담기

var num = 1;

위 코드는 num이라는 변수를 생성하고, 1이라는 값을 할당하는 코드이다.

num이라는 변수를 생성하기 전까지는 자바스크립트에서 num이라는 단어는 인식되지 않는 명령어지만 우리가 num이라는 변수를 생성함으로 해서 인식 가능한 단어로 바뀌었고 해당 단어가 의미하는 값은 1이 되었다.

숫자 연산하기

모든 숫자는 +, -, /, *, %를 할 수 있다.

var num2 = num * 2;
console.log(num2);  // num과 2를 곱한 값, 2

var remainder1 = 30 % 4;
console.log(remainder1); // 30을 4로 나눈 나머지, 2

var remainder2 = 100 % 5;
console.log(remainder2); // 100을 5로 나눈 나머지, 0

위 코드에서 사용한 % 는 Modulo Operator, 나머지 값을 구할 수 있는 연산 기호(연산자)이다.

연산 우선 순위

수학에서 배운 것과 동일한 방식으로 곱하기와 나누기가 더하기와 빼기보다 더 우선시 된다.

var result = 3 + 7 * 2;
console.log(result); // 17

비교

부등호를 이용하여 숫자의 크고 작음을 비교할 수 있다.

var result = 3 > 7;
console.log(result); // false

var result2 = 3 >= 1;
console.log(result2); // true

같은 수 판별

일치연산자(===)를 이용하여 같은 수인지에 대한 정보를 확인할 수 있다.

var one = 5;
var two = 5;

console.log(one === two); // true

동등연산자(==)나 != 대신 항상 일치연산자(===)나 !== 를 사용하는 습관을 갖는 것이 좋다.

증가시키기

var a = 1;
a = a + 1;

첫번째 줄: a라는 변수를 만들고 1이라는 값을 대입해주고 있다.

두번째 줄: 등호를 기준으로 오른쪽의 값을 왼쪽의 변수에 대입하고 있다.

(오른쪽의 값을 먼저 연산하게 되는데 오른쪽의 값은 1 + 1로 결국 2라는 결과가 도출된다.그 뒤, 오른쪽의 변수 a에 2라는 값을 대입한다.)

a += 1; // a = a + 1
a += 2; // a = a + 2
a -= 1; // a = a - 1
a *= 3; // a = a * 3
a /= 2; /* a = a / 2 */

a++; // a = a + 1
a--; // a = a - 1

a라는 변수의 값을 1만큼 증가시키고 싶을 때는 위와 같이 더욱 짧게 표현할 수 있다.

유효하지 않은 숫자 연산

NaN: Not A Number라는 의미를 가진 특수한 값이다.유효하지 않은 숫자 연산을 실행했을때 생성되곤 한다.

var a = 0;
var b = 0;
var c = a / b;

console.log(c); // NaN

만약 어떤 값이 NaN인지 판별하고 싶다면 아래와 같이 isNaN이라는 함수를 사용하여 아래와 같이 판별할 수 있다.

var a = isNaN(3);
console.log(a); // false

var b = 10;
var c = isNaN(b);
console.log(c); // false

var d = NaN;
var e = isNaN(d);
console.log(e); // true

무한대 표현하기

var pInf = 10 / 0;     // 양의 무한대
console.log(pInf);     // Infinity

var nInf = 10 / -0;   // 음의 무한대
console.log(nInf);    // -Infinity

Infinity : 양의 무한대

- Infinity : 음의 무한대

숫자 판별하기

JavaScript에서 제공하는 기능들 중 typeOf라는 연산자가 있다.이 연산자는 어떤 종류의 값인지를 판단할 때 사용될 수 있다.

console.log(typeof 42);                 // expected output: "number"
console.log(typeof 'blubber');          // expected output: "string"
console.log(typeof true);               // expected output: "boolean"
console.log(typeof undeclaredVariable); // expected output: "undefined";

String (문자)

String 타입은 텍스트 데이터를 나타내는데 사용한다.

var a = typeof 3;
console.log(a); // "number"

따옴표로 감싸져 있는 number는 텍스트이다.이러한 텍스트들을 문자열 혹은 String이라 부른다.

문자열 붙이기

숫자들을 더할 때와 마찬가지로 + 기호를 사용하여 아래와 같이 문자열을 붙일 수 있다.

var s1 = "something";
var s2 = "else";
var result = s1 + s2;

console.log(result); // "somethingelse"

문자열 비교

문자열은 아래와 같이 같고 다름을 비교할 수 있다.

var s1 = "abc";
var s2 = "abc";
var result1 = s1 === s2; // s1과 s2가 같은지 확인하고 그 결과를 result1 변수에 담습니다.

console.log(result1); // true

var s3 = "abc "; // 유의: 문자열 끝자리에 공백이 붙어있습니다.
var s4 = "abc";
var result2 = s3 !== s4; // s3과 s4가 다른지 확인하고 그 결과를 result2 변수에 담습니다.

console.log(result2); // true

문자열 길이

.length를 이용하여 모든 문자열은 그 길이에 대한 정보를 알 수 있다.

var str1 = "abc"; // 3개의 텍스트를 포함하고 있는 문자열
console.log(str1.length); // 3

var str2 = "   "; // 공백 3개
console.log(str2.length); // 3

console.log("graph-ql".length); // 8

문자열 인덱스(index)

문자열 종류의 값들은 인덱스 정보를 이용할 수 있다.인덱스라는 정보는 위치 / 순서를 의미하는 것과 비슷하다고 생각하면 된다.

"abcdef"라는 문자열을 예로 들 경우, "abcdef"라는 문자열은 a - b - c - d - e - f의 순서로 만들어져 있으며 이런 정보를 담고 있는 것이 인덱스이다. 인덱스는 항상 0부터 시작하게 된다.

var str = "abcdef";
console.log(str[0]); // "a"

console.log("cde"[2]); // "e"

코드 상으로는 위와 같이 인덱스를 이용할 수 있다.

문자열 메서드

문자열에는 아래와 같이 다양한 기능(메서드)가 있다.

console.log('6'.repeat(3)); //반복
console.log('hi surim'.includes(' surim')); //포함여부
console.log('what are you doing?'.startsWith('what ')); //시작여부
console.log('I am doing FiNe'.endsWith('iNe')); //끝여부
console.log('Are you sure?'.indexOf(' yo'));//몇번째위치(0부터)
console.log('Yeah I am sure'.slice(2, 5)); //2와5사이 문자
console.log('I?doubt?that'.split('?'));//'?'기준 문자열 잘라 array화
console.log('Why would you doubt my word?'.split(''));//''기준은 하나씩 잘라 array화
console.log('You hAve BeEn DiSHonest'.toLowerCase());//소문자화
console.log('No wAy!'.toUpperCase());//대문자화

Boolean (논리)

Boolean타입의 값은 논리적 참, 거짓을 나타내는 true 와 false 뿐이다.

var t = true;
var f = false;

주로 조건문에 자주 사용하며 0, -0, null, false, NaN, undefined, 빈 문자열("")은 false로 간주된다.

문자열 "false"를 포함한 그 외 모든 다른 값은 초기값을 true로 설정한다.

    var test = 0;
    if (test)
      console.log(test + " is true");
    else
      console.log(test + " is false");

    test = 123
    if (test)
      console.log(test + " is true");
    else
      console.log(test + " is false");

    test = ""
    if (test)
      console.log(test + " is true");
    else
      console.log(test + " is false");

    test = "hi~"
    if (test)
      console.log(test + " is true");
    else
      console.log(test + " is false");
      
    test = "false"
    if (test)
      console.log(test + " is true");
    else
      console.log(test + " is false");

null (널)

null은 의도적으로 변수에 값이 없다는 것을 명시할 때 사용한다.

JavaScript는 대소문자를 구별하므로 null은 Null, NULL 등과 다르다.

var foo = null;

null 사용 시, 주의할 점

타입을 나타내는 문자열을 반환하는 typeOf연산자로 null 값을 연산해보면 null이 아닌 object가 나온다.

이는 자바스크립트 설계상의 오류이다.

console.log(typeof foo); // object

따라서 null타입을 확인할 때는 typeOf 연산자 대신 일치 연산자(===)를 사용하여야 한다.

console.log(typeof foo === null); // false
console.log(foo === null);        // true

undefined (언디파인)

변수(variable) 선언 이후 값을 할당하지 않은 변수는 undefined 값을 가진다.

어떤 변수를 만들고 그 값을 정의해주지 않았을때나 존재하지 않는 객체 프로퍼티에 접근할 경우 undefined가 반환된다.

var k;
console.log(k); // undefined

null이라는 값은 undefined와 다르게 아래의 예처럼 의도적으로 값이 없음을 표현하고 싶을 때 대입해주곤 한다.

var name = null;
console.log(name); // null

null 또는 undefined를 검사할 때, 주의할 점

동등 연산자(==)와 일치 연산자(===)의 차이를 주의해야한다.

일치 연산자(===)를 사용해야 정확한 타입을 확인할수 있다.

동등 연산자는 자료형 변환을 수행한다.

console.log(k === undefined)   	// true
console.log(k === null)		// false
console.log(name === undefined) // false
console.log(name === null)   	// true

Array (배열)

JavaScript 배열에는 모든 데이터 유형이 포함될 수 있습니다. 예를 들면 다음과 같습니다.

var array1 = [1, 3.14, 'Hello', null, true];
console.log(array1[0]); // 1
console.log(array1[4]); // true

위 배열에는 5 개의 요소가 있습니다.배열은[]로 표시되고 요소는로 구분됩니다.

배열을 만드는 또 다른 방법은 Array() 함수를 사용하는 것입니다.

var array2 = new Array(1, 3.14, 'Hello', null, true);
console.log(array2[0]); // 1
console.log(array2[4]); // true

배열의 길이를 얻으려면 length

console.log(array1.length); //5

length에 값을 직접 할당하면 배열의 크기가 변경

array1.length = 7;
console.log(array1);//(7) [1, 3.14, "Hello", null, true, undefined × 2]
array1.length = 3;
console.log(array1);//(3) [1, 3.14, "Hello"]

인덱스를 통해 해당 Array를 직접 수정

array1[0] = 100;
console.log(array1);//(3) [100, 3.14, "Hello"]

인덱스 할당이 범위를 초과하면 배열의 크기도 변경

array1[5] = 200;
console.log(array1);//(6) [100, 3.14, "Hello", undefined × 2, 200]

indexOf()를 사용하여 지정된 인덱스 값을 검색

console.log(array1.indexOf(100));//0 몇번째위치(0부터)
console.log(array1.indexOf("Hello"));//2 몇번째위치(0부터)
console.log(array1.indexOf(123));//-1 없음

slice()를 사용하여 일부요소를 새 배열로 반환.

var arr1 = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];

var arr2 = arr1.slice(1, 3)//인덱스1에서 부터 인텍스3-1까지
console.log(arr2);//(2) ["B", "C"]

arr2 = arr1.slice(2)//인덱스2부터 끝까지
console.log(arr2);//(5) ["C", "D", "E", "F", "G"]

arr2 = arr1.slice()//전체
console.log(arr2);//(7) ["A", "B", "C", "D", "E", "F", "G"]

push() : 배열 끝에 추가

pop() : 배열의 마지막 삭제

var arr = [0];

arr.push(1);
console.log(arr);//(2) [0, 1]

arr.push(2, 3);
console.log(arr);//(4) [0, 1, 2, 3]

arr.push(4, 5, 6, 7);
console.log(arr);//(8) [0, 1, 2, 3, 4, 5, 6, 7]

arr.pop();
console.log(arr);//(7) [0, 1, 2, 3, 4, 5, 6]

arr.pop(); arr.pop(); arr.pop();
console.log(arr);//(4) [0, 1, 2, 3]

unshift() : 배열 처음에 추가

shift() : 배열의 처음 삭제

var arr = [7];

arr.unshift(6);
console.log(arr);//(2) [6, 7]

arr.unshift(3, 4, 5);
console.log(arr);//(5) [3, 4, 5, 6, 7]

arr.shift();
console.log(arr);//(4) [4, 5, 6, 7]

arr.shift(); arr.shift();
console.log(arr);//(2) [6, 7]

sort() : 오름차순 정렬

reverse() : 역순으로 정렬

var arr1 = [1, 4, 5, 3, 6, 2];
var arr2 = [1, 4, 5, 3, 6, 2];
console.log(arr1.sort());//(6) [1, 2, 3, 4, 5, 6]
console.log(arr2.reverse());//(6)[2, 6, 3, 5, 4, 1]

splice(): 지정된 인덱스에서 시작하여 요소를 삭제 한 다음 해당 위치에서 요소를 추가

첫 번째 매개 변수는 인덱스가 시작되는 위치를 나타내고

두 번째 매개 변수는 삭제할 요소 수를 나타내며

나중에 인덱스 된 요소는 삭제 된 위치에 추가 된 요소를 나타냅니다.

var arr1 = [10, 20, 30, 40, 50, 60, 70, 80];

console.log(arr1.splice(1, 3));			//(3) [20, 30, 40]
console.log(arr1);				//(5) [10, 50, 60, 70, 80]

console.log(arr1.splice(1, 2, 100, 200, 300));	//(2) [50, 60]
console.log(arr1);				//(6) [10, 100, 200, 300, 70, 80]

concat(): ()안의 배열과 합쳐서 새 배열을 반환

var arr1 = ['A', 'B', 'C'];

var arr2 = arr1.concat([1, 2, 3]);
console.log(arr1);//(3) ["A", "B", "C"]
console.log(arr2);//(6) ["A", "B", "C", 1, 2, 3]

var arr3 = arr1.concat(1, 2, [3, 4]);
console.log(arr1);//(3) ["A", "B", "C"]
console.log(arr3);//(7) ["A", "B", "C", 1, 2, 3, 4]

join(): Array의 각 요소를 지정된 문자열과 연결 한 다음 연결된 문자열을 반환.

var arr = ['A', 'B', 'C', 1, 2, 3];

console.log(arr.join('-'));//A-B-C-1-2-3
console.log(arr.join('+'));//A+B+C+1+2+3

map(): 배열의 각 요소에 대해 정의 된 콜백 함수를 호출하고 결과가 포함 된 배열을 반환

var arr1 = [1, 2, 3, 4, 5];

var arr2 = arr1.map(function (array) {
  return array + 1;
});

console.log(arr2);//(5) [2, 3, 4, 5, 6]

다차원 배열

var arr = [[1, 2, 3], [400, 500, 600], ['A', 'B']];

console.log(arr[1][0]);//400
console.log(arr[2][1]);//B
console.log(arr[3][1]);//error undefined

Symbol (심볼)

객체 속성을 만드는 데이터 타입입니다.(ES6에 추가) 

var symbolProperty = Symbol('key');   // Symbol(key)
var test = {};

test[symbolProperty] = 'value';
console.log(test);   // {Symbol(key): "value"}

Object (오브젝트)

자바스크립트에서 객체를 생성하는 방법에는 여러가지가 있지만 Object() 함수를 통해서 생성이 가능하며,

클래스 개념이 명확한 Java 등과는 다르게, 런타임(실행중)에 필드 할당이 가능합니다.

사용1

var myObj = new Object();
myObj.age = 20;
myObj.name = 'kim';

console.log(myObj); // {age: 13, name: "kim"}
console.log(typeof myObj); // object

사용2

var myObj = {
  age: 20,
  name: 'kim'
}

console.log(myObj.name);//kim
console.log(myObj["name"]);//kim

Set (셋)

Set은 중복을 허용하지 않는 값을 모아놓은 컬렉션이며 Set은 키가 없는 값이 저장됩니다.

var set1 = new Set([2, 3, 3, '3']);

중복되는 3은 자동으로 필터링됩니다.

3과 '3'은 다릅니다.

console.log(set1);//Set(3) {2, 3, "3"}

add : 추가

set1.add(20);
set1.add('kim');

console.log(set1);//{2, 3, "3", 20, "kim"}

delete : 삭제 , 성공하면 true, 아니면 false

console.log(set1.delete(2));//true
console.log(set1);//Set(4) {3, "3", 20, "kim"}

has : 값이 존재하면 true, 아니면 false를 반환

console.log(set1.has('lee'));//false

size : Set의 갯수

console.log(set1.size);//4

clear : Set을 비우기

set1.clear();
console.log(set1)//Set(0) {}

Map (맵)

Map은 key와 value가 [key, value] 형식으로 이루어진 리스트입니다

new Map()으로 생성

var m1 = new Map([['a', 1], ['b', 2]]);  // map 생성

console.log(m1);  // Map(2) {"a" => 1, "b" => 2}

set으로 요소를 추가할 수 있습니다.

var m2 = new Map();  // 빈 맵 추가

m2.set('a', 1);  // a가 key, 1이 value로 요소 추가
m2.set('b', 2);  // a가 key, 1이 value로 요소 추가

console.log(m2);  // Map(2) {"a" => 1, "b" => 2}

키를 원시 타입으로 사용할 수도 있고, 심지어는 함수나 객체도 키로 사용할 수 있습니다.

var m = new Map();

m.set(a => a, 1);  // 키로 함수 사용
m.set({}, 2);  // 키로 빈 객체 사용
m.set(false, true);  // 키로 불린 사용

console.log(m);  // Map(3) {ƒ => 1, {…} => 2, false => true}

요소삭제 : 해당 키의 요소가 있으면 삭제하고 true를, 없으면 false를 반환

var keyObj = {};
var keyFunc = a => a;

var m2 = new Map([['a', 1], ['b', 2], [keyObj, 3], [keyFunc, 4]]);

console.log(m2.delete('c'));  // c라는 키가 없으므로 false
console.log(m2.delete('a'));  // a라는 키의 요소를 삭제하고 true
console.log(m2);  // Map(3) {"b" => 2, {…} => 3, ƒ => 4}

주의할 점은 함수나 객체를 키로 사용할 경우 참조 관계 때문에 예상대로 동작하지 않을 수 있습니다.

console.log(m2.delete({}));  // false. 객체는 참조 타입
console.log(m2.delete(a => a));  // false. 함수도 객체이므로 참조 타입

따라서 직접 참조하는 값을 전달인자로 사용해야 합니다.

console.log(m2.delete(keyObj));  // true. 키가 객체인 요소 삭제
console.log(m2.delete(keyFunc));  // true. 키가 함수인 요소 삭제

console.log(m2);  // Map(1) {"b" => 2}

clear : 모든 요소를 제거하고 빈 Map으로 만듭니다.

var m4 = new Map([['a', 1], ['b', 2], ['c', 3]]);
console.log(m4);  // Map(3) {"a" => 1, "b" => 2, "c" => 3}

m4.clear();
console.log(m4);  // Map(0) {}

entries : [key, value] 요쇼를 가진 배열의 Iterator 객체를 반환합니다.

var m5 = new Map([['d', 4], ['e', 5], ['f', 6]]);
var iter = m5.entries();

console.log(iter.next());  // {value: ["d", 4], done: false}
console.log(iter.next());  // {value: ["e", 5], done: false}
console.log(iter.next());  // {value: ["f", 6], done: false}
console.log(iter.next());  // {value: undefined, done: true}

forEach : 배열의 forEach랑 비슷합니다.value, key를 파라미터로 사용 가능합니다.

var m6 = new Map([[_ => _, 'a'], [{}, 'e'], [[1, 2, 3], 4]]);
m6.forEach((value, key) => {
  console.log(value);  // 순차적으로 'a', 'e', 4 출력
  console.log(key);  // 순차적으로 _=>_, {}, [1, 2, 3] 출력
})

get : 키를 전달인자로 받아서 해당 key의 요소가 존재하면 value를, 없으면 undefined를 반환합니다.

var keyObj = {}
var m7 = new Map([['a', 1], [keyObj, 2]]);

console.log(m7.get('a'));  // 1
console.log(m7.get('c'));  // undefined
console.log(m7.get({}));  // undefined. 객체는 참조 타입
console.log(m7.get(keyObj));  // 2

has : 키를 전달인자로 받아서 존재하면 true, 없으면 false를 반환합니다.

var m8 = new Map([['z', 5], ['x', 7]]);

console.log(m8.has('y'));  // false
console.log(m8.has('x'));  // true

keys : key로만 이루어진 Iterator 객체를 반환합니다.

var m9 = new Map([['aa', 4], ['bb', 5], ['cc', 6]]);
var iter = m9.keys();

console.log(iter.next());  // {value: "aa", done: false}
console.log(iter.next());  // {value: "bb", done: false}
console.log(iter.next());  // {value: "cc", done: false}
console.log(iter.next());  // {value: undefined, done: true}

values : value로만 이루어진 Iterator 객체를 반환합니다.

var m10 = new Map([[1, 'v1'], [2, 'v2'], [3, 'v3']]);
var iter = m10.values();

console.log(iter.next());  // {value: "v1", done: false}
console.log(iter.next());  // {value: "v2", done: false}
console.log(iter.next());  // {value: "v3", done: false}
console.log(iter.next());  // {value: undefined, done: true}

size : size는 메소드는 아닙니다.Map의 총 길이를 반환하는 속성입니다.

var m11 = new Map([[1, 'v1'], [2, 'v2'], [3, 'v3'], [4, 'v4']]);

console.log(m11.size);  // 4