크와앙

코드 순서의 (비)중요성

app.js

const defaultResult = 0;

function add(num1, num2) {
  const result = num1 + num2;
  alert('The result is ' + result);
  return result;
}

currentResult = add(1, 2);

let calculationDescription = `( ${defaultResult} + 10) * 3) / 2 - 1`;

outputResult(currentResult, calculationDescription);

let currentResult = defaultResult;

• 만약에 이런식으로 코드를 정의하게 된다면, 코드가 꺠지게 된다.
• console을 보게 되면, currentResult에 엑세스할 수 없다는 오류가 뜨게 된다.
• 사전정의 없이, 변수에 값을 할당하려고 해서 오류가 발생한 것이다.
• 즉, JavaScript에서 let이나 const 키워드를 사용할 때는, 사용하기 전에 먼저 선언을 해야한다.
• 값은 재할당할 수 있지만, let과 const는 한 번만 선언할 수 있다.

app.js

const defaultResult = 0;
let currentResult = defaultResult;

currentResult = add(1, 2);

let calculationDescription = `( ${defaultResult} + 10) * 3) / 2 - 1`;

outputResult(currentResult, calculationDescription);

function add(num1, num2) {
  const result = num1 + num2;
  alert('The result is ' + result);
  return result;
}

• 하지만, 함수의 경우에는 변수와 다르게, 맨 하단으로 옮겨도 상관이 없다.
• 정의하기 전에 호출하는 것이라 생각하면 된다.
• JavaScript가 Script를 실행하기 전에 자동으로 모든 함수를 등록부터 하는 특별한 행동 방식을 갖추기 때문이다.
• 전체 Script를 로드할 때, 구문을 분석하되 이를 바로 실행하는 것이 아니라 위에서부터 아래로 읽기를 하는데, 이 떄, 파일 내에서 함수를 찾게 되면 함수를 자동으로 맨 위로 끌고 가서 인식을 한다고 표현할 수 있다.
• 중요한 것은 일관된 코드 스타일을 사용해야한다.
• 중간에 코드를 쓰는 것이 그나마 효율적인 방식이다.

return

app.js

const defaultResult = 0;
let currentResult = defaultResult;

function add(num1, num2) {
  const result = num1 + num2;
  alert('The result is ' + result);
  return result;
}

const additionResult = add(1, 2); // 함수 호출결과가 additionResult에 저장되고, 이를 코드 어디에서나 사용할 수 있게 된다.

currentResult = ((currentResult + 10) * 3) / 2 - 1;

let calculationDescription = `( ${defaultResult} + 10) * 3) / 2 - 1`;
let errorMessage = 'An error \n' + 'occurred!';

outputResult(currentResult, calculationDescription);

• const additionResult = add(1, 2); 에서는 함수 호출결과가 additionResult에 저장되고, 이를 코드 어디에서나 사용할 수 있게 된다.

app.js

const defaultResult = 0;
let currentResult = defaultResult;

function add(num1, num2) {
  const result = num1 + num2;
  alert('The result is ' + result);
  return result;
}

currentResult = add(1, 2);

let calculationDescription = `( ${defaultResult} + 10) * 3) / 2 - 1`;

outputResult(currentResult, calculationDescription);

• 만약에 다음과 같은 함수를 작성 후에, reload를 하게 되면 result는 3이 나오게 된다.
• 1과 2를 더한 결과가 3이기 떄문이다.

functions

• 함수는 JavaScript 뿐만 아니라, 다른 프로그래밍 언어에도 존재하는 언어구성이다.
• 이전까지 우리가 작성했던 모든 코드들은 페이지가 로드될 떄, 즉각적으로 실행되었지만, 함수를 사용하게 되면, 나중에 실행되어야 할 코드를 정의할 수 있고, 특정 버튼을 눌릴 때만 그 함수가 실행될 수 있도록 하기 위해서 특정함수를 웹 페이지에 있는 버튼에 연결할 수도 있다.
• 즉시 실행되지 않는 코드를 작성하게 해주며, 웹사이트에 상호작용을 제공해주는 것이다.
• 사용자가 정의하는 함수의 경우, 중괄호 사이에 본문을 넣으면 된다.
• 함수 뒤에는 세미콜론을 넣지 않는다.

app.js

const defaultResult = 0;
let currentResult = defaultResult;

function add(num1, num2) {
  const result = num1 + num2;
  alert('The result is ' + result);
}

add(1, 2); // 1,2로 먼저 한 번 정의한다.
add(5, 5); // 5,5로 한 번 더 정의하는 것이다.

currentResult = ((currentResult + 10) * 3) / 2 - 1;

let calculationDescription = `( ${defaultResult} + 10) * 3) / 2 - 1`;
let errorMessage = 'An error \n' + 'occurred!';

outputResult(currentResult, calculationDescription);

• alert로 3이 먼저 뜬 뒤에, OK를 눌리게 되면 10이 뜬다.
• 함수 두 개를 실행하고 있기 때문에, alert에 의해 script 실행이 차단되어, 첫 번째 alert가 해제될 때까지 두 번쨰 alert가 대기하는 것이다.
• 두 번째의 alert를 닫게되면, 기존의 페이지가 렌더링된다.

String

• 언제나 문자열을 열었던 것과 동일한 방식으로 닫아야 한다.
  즉, "를 썼으면, "로 닫아야한다. ' '로 닫게 되면, 에러가 뜨거나, 문자열로 인식하지만 한덩어리의 텍스트로 인식되어 버린다.
• 만약에 ' 작은 따옴표를 하나만 보여주고 싶다면, 큰 따옴표로 감싼다.
  "'" 이렇게 말이다.

app.js - Template Literals

const defaultResult = 0;
let currentResult = defaultResult;

currentResult = (currentResult + 10) * 3 / 2 - 1;

let calculationDescription = `( ${defaultResult} + 10) * 3) / 2 - 1`;

outputResult(currentResult, calculationDescription);

• 작은 따옴표(' ') 대신에 백틱(``)을 사용한다.
• 그렇게되면, defaultResult는 문자자체로 나오게 되므로, Syntax를 사용한다.
  Syntax는 ${value}과 같이 쓴다.
• 현재는 defaultResult의 상수 값을 표현한다.
• 만약 작은 따옴표를 쓰게 된다면 Syntax가 표현되지 않기에, ${defaultResult}가 출력된다.
• 이런 과정을 Template Literals 이라고 한다.

Template Literals

• Template Literal의 장점은 여러 행으로 된 문자열을 쉽게 작성할 수 있다.
• 자동으로 렌더링을 했기 때문에, 쉽게 줄 바꿈을 추가할 수 있다.
• 즉, 긴 문자열들을 줄 바꿈을 통해서 가독성이 좋아진다.
• 하지만 CSS가 지정되면, 바로 전부 문제가 되기 때문에, 이 형식을 사용할 떄는 여분의 공란이나 줄 바꿈이 있는 문자열을 생성하는 경우에만 사용해야한다는 점을 주의해야 한다.
• 즉, 가독성만의 이유로 사용하면 안된다.

app.js

const defaultResult = 0;
let currentResult = defaultResult;

currentResult = (currentResult + 10) * 3 / 2 - 1;

let calculationDescription = `( ${defaultResult} + 10) * 3) / 2 - 1`;
let errorMessage = 'An error \n' + 
                    'occurred!';

outputResult(currentResult, calculationDescription);

• \n을 사용하게 되면, 줄바꿈으로 인식하게 된다.
• \n은 Template Literals 또한 지원한다.
• \는 많은 역할을 한다.
  만약에, 작은 따옴표 하나만 출력하고 싶을 때는 \'와 같은 형식으로 적게 되면, 된다.
• \\또한, \를 표시하기 위해서 사용된다.

Data Types(자료형)

app.js

let currentResult = 0; // 초기값 설정

currentResult = ((currentResult + 10) * 3) / 2 - 1;

let calculationDescription = '((currentResult + 10) * 3) / 2 - 1';

outputResult(currentResult, calculationDescription);

• 위에 있던 currentResult 값을 인식하지 못한다.
  calculationDescription을 선언하면서 ' ' 안으로 들어가면서 문자로 인식해버리기 때문이다.
  그렇기에, 아래와 같이 바꾸게 된다면, currentResult를 어떤 값으로 바꾸게 되어도 잘 작동하게 된다.

app.js - currentResult ' ' 수정

let currentResult = 0; // 초기값 설정

currentResult = ((currentResult + 10) * 3) / 2 - 1;

let calculationDescription = '(' + currentResult + ' + 10) * 3) / 2 - 1';

outputResult(currentResult, calculationDescription);

• calculationDescription에서 +는 더하는 연산자가 아니다.
• 하지만 다음과 같이 하게 되면, 결과 값이 두 번 계산되는 오류가 발생하게 된다.

app.js - const 사용

const defaultResult = 0;
let currentResult = defaultResult;

currentResult = (currentResult + 10) * 3 / 2 - 1;

let calculationDescription = '(' + defaultResult + ' + 10) * 3 / 2 - 1';

outputResult(currentResult, calculationDescription);

• 상수를 사용하게 되면, 위의 오류를 막을 수 있다.
• const를 통해서 상수 선언을 해준다. defaultResult의 경우는 위에서 0으로 지정해줬으므로, 바뀌지 않는다.
• 계산 결과도, 식도 그대로 원래 원하던 값으로 나오게 된다.