[구글 앱스 스크립트] 2주차 첫 번째 : 자바스크립트 시작

2주차 시작하면서 고민한 거 :

어떻게 자바스크립트를 공부해야할까? (X)

어떻게 재밌게 블로그에 담아낼 수 있을까? (O)

?

공부하는 거 맞지?

심지어 1주차를 훌륭하게 해냈다는 의미로 투두몰 측에서 소정의 선물도 받았기에 …

나의 부담감은 점점 커져만 갔다. 일단 근데 자바스크립트라는 자체가 양이 방대해서 고민도 많이 하고 있다.

첫 주차에서 언급했듯 실제 자바스크립트와 GAS 내에서 배우는 자바스크립트는 살짝 다르다고 했다.

자바스크립트를 찍-먹해본 경험이 있으니, 이 점에 유의해서 찬찬히 나아가보자 한다.

일단 해보자고.

 

 

알아두면 좋은 기초 JS 상식

---

 

처리를 수행하는 최소 명령 단위 : 스테이트먼트(Statement)

일련의 처리를 모아둔 함수(function)

스크립트 안에 자유롭게 입력할 수 있는 메모 : 주석(Comment)

function myFunction() {
  console.log('Hello GAS!');
  console.log('I am', 25, 'years old.');  
  
  // console.log('Hello GAS!');
  console.log('Hello GAS!'); // 로그 출력
  
  /*
  
  console..og('Hello GAS!');
  
  */
}

 

스테이트먼트는 그 끝을 나타내는 의미로 ;(세미콜론)을 붙인다. 웬만하면 붙이자.

function 키워드로 함수를 정의할 수 있는데, 위의 예시에서는 함수 이름이 myFunction인 함수이다.

또한 알파벳 대소문자를 엄밀히 구분하기 때문에, console.Log 라고 적으면 에러가 발생할 것이다. 주의하기.

// 으로 1행만 주석으로 처리할 수도, /*와 */로 여러 행을 주석으로 처리할 수도 있다.

스크립트 편집기에서는 [Ctrl] + [/] 키를 이용해 현재 커서가 위치한 행이나 선택 범위를 주석 처리할 수도 있다. (꿀팁.)

 

데이터를 저장하는 데이터 상자 : 변수(variable)

변수를 덮어써도 변경되지 않는 데이터 상자 : 상수(constant)

변수는 먼저 선언(declaration)을 통해 준비되고 대입(assignment)을 통해 데이터가 저장된다.

만약 같은 변수에 연속으로 대입하면은 그 변수는 뭘 나타낼까? 아래 코드블럭에서 확인해볼 수 있다.

 

function myFunction() {
  // 선언
  let num;
  let a, b; // 여러 변수는 ,(콤마)로 구분해 선언
  
  // 대입
  num = 10;
  console.log(num); //10

  // 만약 같은 변수에 연속으로 대입하면?
  num = 10;
  num = 100;
  console.log(num); //100 // 원래 값은 덮어 쓰여진다.
}

 

상수에 값을 다시 대입하는 것은 허용되지 않는다.

따라서 값을 다시 대입하지 않을 때는 변수보다 상수를 우선해서 사용하는 것이 좋다.

만약 아래 코드 블럭 마지막 줄 주석을 해제하면 어떻게 될까? 당연히 에러가 발생한다.

 

function myFunction() {
  const tax = 1.08;
  console.log(tax); //1.08

  // tax = 1.1;
}

 

이제 기초 끝났습니다

데이터 타입(data type) : 데이터 종류

정말 간단하게 예시만 봐도 직관적으로 이해할 수 있다.

수치 타입(Number)	100 1.08
문자열 타입(String)	'데이터' "Google Apps Script"
논리 타입(Boolean)	true false
null	값이 없음을 나타내는 특수한 값
undefined	값이 정의되지 않았음을 나타내는 특수한 값
배열 타입(Array)	[10, 20, 30] ['ABC', true, 100]
객체 타입(Object)	{x: 10, y: 20, z: 30} {name: 'bri9htstar', age: 23}

데이터의 타입을 확인하고 싶을 때는 typeof 연산자를 이용해 확인할 수 있다.

아래에서는 각 데이터 타입에서 특이한 점만 정리하려고 한다. 워낙 기초적인 내용이기도 하고, 다 정리하면 너무 길어져서 마치 파이썬에서는 보지 못 했던 자바스크립트만의 신기한 특징들을 모아모아 적어보겠다.

투두몰은 강제하지 않고 자율적 공부를 추구합니다 사진은 조크 *^^*

 

 

수치 타입 : 16진수, 지수 표현

16진수는 0x(0과 x)에 이어 입력해서 표현할 수 있다.

또한 GAS는 정수 부분의 자릿수가 22자리 이상, 소수 부분의 자릿수가 7자리 이상일 때는 지수로 표기한다.

function myFunction() {
  // hexadecimal
  console.log(0xFFFF); //65535
  
  // exponential expression
  console.log(1000000000000000000000); //1e+21
  console.log(0.0000001); //1e-7
}

 

문자열 타입 : 백틱(`)

이게 뭐죠?

윈도우에서는 tab 키 위에 있고, 맥에서는 영어인 상태에서 (~)(₩)키를 누르면 되는 이 숨겨진 백틱은 무슨 역할일까?

 

백틱으로 둘러싼 문자열은 템플릿 문자열(template string)이라 부르며 문자열 안에 식을 포함한 경우나, 여러 행에 걸친 문자열을 나타날 때 이용한다. 템플릿 문자열에는 달러 기호와 중괄호를 이용해 ${식 (expression)}으로 플레이스홀더(placeholder)를 포함시킬 수 있다. 플레이스홀더의 중괄호 안에는 변수나 상수, 임의의 식을 입력해 문자열 안에 삽입할 수 있다. 예제 보면 이게 뭔 소리인지 알 수 있다.

 

function myFunction() {
  const name = 'bri9htstar';
  const age = 23;

  console.log(`I'm ${name}. I'm ${age} years old.`);
  console.log(`I'm ${name}.
  I'm ${age} years old.`);
}

 

두 가지 로그가 있는데 실행시키면 어떻게 될까?

줄바꿈과 들여쓰기가 잘 반영되어있다.

 

그런데 문자열이 여러 행일 경우에는 들여쓰기가 적용된 코드인지 알기 어렵다. 이 때 필요한 건 이스케이프 시퀀스.

줄바꿈이나 작은 따옴표 등 직접 표현할 수 없는 문자나 특별한 의미를 가진 문자는 \(백슬래시)와 지정된 문자를 조합해 표현할 수 있다. 이를 이스케이프 시퀀스(escape sequence)라 부른다.

 

function myFunction() {
  console.log('Hello\n\'GAS\'!');
}

 

위의 예제에서는 백슬래시와 n을 결합하여 줄바꿈(Line Feed)을 나타냈다.

아주 잘 실행됩니다.

 

undefined vs. null

undefined는 정의되지 않는 상태 즉, 값이 정의되지 않았음을 나타내는 값이다. 변수를 선언만 한 상태. (대입 X)

null은 해당하는 값이 없음을 나타내는 값이다. null도 undefined도 넓은 의미에서는 '없음'을 의미하는 특수한 값을 나타내기는 하는데 … 두 값을 엄밀하게 구분하기 보다는 정의되지 않은 상태 / 값이 없는 상태로 구분하여 알아두는 것이 좋다.

 

 

배열 … 이거는 모를걸

배열에 대해서 당신이 몰랐을 수도 있는 사실 몇 가지를 소개해보려고 합니다.

여기 작은 배열이 하나 있습니다.

const numbers = [10, 30, 20, 40];

 

Q.

만약 numbers[99]와 같이 도중의 인덱스를 뛰어 넘어 추가하면 건너뛴 인덱스에 해당하는 값은 어떻게 돼요?

문제 보자마자 심정 : 음 그러게?

정답.

 

건너뛴 인덱스에 해당하는 값들은 모두 null이 된다. 존재하지 않은 인덱스 요소를 추출하면 그 값은 undefined가 된다.

 

 

Q.

 

배열은 const 키워드로 선언된 상수에 대입함에도 그 요소를 변경할 수 있는 이유는 뭔가요?

 

A. const 키워드를 이용한 상수는 어디까지나 재대입을 금지할 뿐, 해당 요소 자체의 변경을 금지하지는 않기 때문이다.

그게 그 소리인 거 같으면서도 납득이 되기도 하고 …

 

아래에는 배열의 신기한 기능 두 가지를 소개해보고자 합니다.

 

배열의 분할 대입

function myFunction() {
  const numbers = [10, 30, 20, 40];
  let a, b, c, d;
  [a, b, c, d] = numbers;
  console.log(a, b, c, d); //10 30 20 40

  const [name, age, favorite] = ['bri9htstar', 23, 'apple']
  console.log(name, age, favorite); // bri9htstar 23 apple
}

여러 변수나 상수에 배열 요소를 모아서 대입하고 싶을 때는 분할 대입을 이용하면 편리하다.

스테이트먼트 수도 줄이고 코드 가독성도 높일 수 있다.

 

배열 스프레드 구문

function myFunction() {
  const numbers = [10, 30, 20, 40];

  // (1) 배열 안에서 배열 요소 전개하기
  console.log([0, ...numbers, 50]); //[0, 10, 30, 20, 40, 50]

  // (2) console.log 메서드의 괄호 안에서 배열 요소를 전개하기
  console.log(...numbers); // 10 30 20 40

  // (3) 배열을 복사해서 생성하기
  console.log([...numbers]);
}

배열을 특정한 위치에서 각각의 요소로 전개하고 싶을 때는 스프레드 구문을 사용할 수 있다.

마침표 세 개를 연속해서 입력한 뒤 배열을 입력하면 된다.

아주 요긴하게 쓰일 수 있으니, 상세한 사용법은 위의 코드 블럭 참고하기.

 

 

객체와 객체 리터럴

여러 데이터의 집합을 다루는 다른 방법으로 객체를 제공한다. 객체는 다음과 같이 속성과 값을 :(콜론)으로 연결한 조합을 콤마로 구분해 나열하고 전체를 {}로 감싼다. 이 표기 방법은 객체 리터럴이라고 한다. 객체는 속성을 키로 하는 데이터의 집합이며 속성명은 임의의 문자열이다. 속성에는 문자열이나 수치 등의 데이터 외에도 함수를 저장할 수 있는데, 특히 함수가 저장된 속성인 메서드는 ... (to be continued)

// {속성 1: 값 1, 속성 2: 값 2, …}

const person = {name: 'bri9htstar', gender: 'male', age: 23};

 

객체에서 값을 꺼내는 방법은 두 가지이다.

function myFunction() {
  const person = {name: 'bri9htstar', gender: 'male', age: 23};

  // 객체에서 값 꺼내기 (1) 점 표기법
  console.log(person.name); // bri9htstar

  // 객체에서 값 꺼내기 (2) 괄호 표기법
  console.log(person['age']); //23
}

점 표기법 : 단순하고 가독성이 높아 보통 선호한다.

괄호 표기법 : for ... in 문을 사용해 루프 안에서 속성값을 꺼낼 때 효과적이다.

 

속성을 대입하거나 추가할 수도 있다.

function myFunction() {
  const person = {name: 'bri9htstar', gender: 'male', age: 23};

  // (1) 속성 대입 (덮어씌우기)
  person.name = 'Todomall';
  
  // (2) 객체에 존재하지 않는 속성을 지정해 대입해 속성과 값 추가하기
  person['job'] = 'Teacher';

  console.log(person); // {name: 'Todomall', gender: 'male', age: 23, job: 'Teacher'};
}

그렇게 모든 투두몰 사람들을 23세 남성으로 만들어버린 나

존재하지 않는 속성의 요소를 꺼내면 그 값은 undefined이 되니 주의.

객체도 분할 대입과 스프레드 구문이 가능하다. 다만 console.log 메서드의 괄호 안에서는 객체 전개할 수 없다는 사실.

---

이제부터 어려운 얘기에 들어간다.

객체와 프리미티브값

결론부터 얘기하자면, 자바스크립트에서는 데이터 종류에 따라 대입 동작이 다르다. 수치, 문자열 및 부울값은 다른 변수나 상수에 대입하면 그 복사본이 메모리에 만들어진다. 이런 데이터를 프리미티브값이라 부른다.

한편 객체를 다른 변수나 상수에 대입할 때는 참조값이 전달되어 메모리 내 동일한 객체를 참조하게 된다. 다른 주소에 사본을 만들지 않는다.

요로코롬 느낌. 여기서는 Object를 중점으로 보면 된다.

 

 

문자열 대입 예를 보자.

function myFunction() {
  const x = "bri9htstar";

  let y = x;
  y = 'Todomall';
  console.log(y); //Todomall
  
  console.log(x); //bri9htstar
}

상수 x를 변수 y에 대입하는 시점에 그 값이 다른 주소에 복제되고 변수 y는 새로운 주소를 참조하게 된다.

 

그런데 객체를 대입할 때에는 다르다.

function myFunction() {
  const x = {name: 'bri9htstar'};

  const y = x;
  y.name = 'Todomall';
  console.log(y); //{name: 'Todomall'}
  
  console.log(x); //{name: 'Todomall'}
}

실제 상수 x에 객체가 저장되어 있을 때는, 상수 x를 상수 y에 대입하면 상수 y에 전달되는 것은 실제값이 아닌 참조값이 전달된다. 참조값은 메모리상의 주소 위치에 관한 정보다. 즉, 상수 y는 상수 x와 같은 주소를 참조하므로 같은 값을 나타내게 된다.

 

어떻게 보면 실제 돈보다 돈 위치를 알려주는 것이 자바스크립트 세계에서 부자가 되는 지름길 아닐까?

 

산술 연산자 : 수치와 문자열이 연결 가능?

연산자는 값이나 변수 등에 대해 무언가 처리를 수행하기 위한 기호를 말한다. 산술 연산자는 사칙연산 등 수학 연산을 수행하기 위한 연산자다. 실제 수학 연산과 우선 순위도 같고 다른 언어랑 형태도 거의 같지만, 아주 큰 특징이 있는데 …

자바스크립트 산술 연산자 한 장 요약.jpg

연산 대상이 모두 수치이면 덧셈하지만 문자열이 하나라도 있다면 다른 숫자들을 문자열로 간주하고 문자열 연결 처리를 수행하여 연산 결과로 문자열을 반환한다.

function myFunction() {
  console.log("2" + "2" - "2"); // 20
  console.log(2 + 2 - "2"); // '2'

  console.log(12 + 34); // 46
  console.log(12 + '34'); //'1234'
  console.log(12 + 34 + '56'); // '4656'
  console.log(12 + '34' + 56); // '123456'
}

이해는 여러분의 몫으로 …

문자열로 연결을 먼저 하냐, 수치들끼리 계산을 먼저 하냐의 차이이다. 순서대로 식을 읽으면 이해가 된다.

---

지금까지 자바스크립트의 기본 문법에 대해 배웠는데, 애먹은 특징이 있다면 다음과 같다.

#백틱 #null #undefined #배열 #객체 #프리미티브값 #산술연산자

너무 양이 방대해질까봐 빼고, 뺐는데도 이 정도의 양이 나온건데 앞으로 배울 제어문, 함수를 생각하면 아직 멀었다.

열심히 배워보자. 파이팅.

예 앞으로는 좀 달라져야겠죠.

---

위 글은 투두몰 서포터즈 활동의 일환으로 작성된 글입니다.

https://edu.todomall.kr/?utm_source=supporters&utm_medium=contents

투두몰 ㅣ 일잘러의 투두리스트를 훔치다