JavaScript 기초 문법 요약

* 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다.

---

본 글에서 다룰 내용

• var vs let vs const
• function

---

변수

 

변수는 아래와 같은 키워드를 이용해 선언할 수 있습니다.

 

• let
• const
• var

많은 분들이 let, const, var의 차이점을 잘 모르시는 것 같습니다. 저 역시 그랬고.. 그래서 이 세 키워드의 차이점을 알아보겠습니다.

 

스코프란?

- 자바스크립트 엔진이 참조의 대상이 되는 식별자를 검색할 때 사용하는 규칙의 집합이다. 즉, 어떤 변수를 사용하거나 함수를 호출하려고 할 때 해당하는 식별자로 사용하는데, 그 식별자를 검색하는 매커니즘이라고 이해하면 된다.

 

스코프 규칙

• var은 함수 스코프를 갖는다.
• let과 const는 블록 스코프를 갖는다.

이해를 돕기 위해 간단한 예시 코드를 봅시다.

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar);

  {
    let baz = "Bazz";
    console.log(baz);
  }

  console.log(baz); // ReferenceError
}

run();

스코프 규칙에 따라서, 위 코드를 실행했을 때 블록 안에 있는 baz를 블록 밖에서 출력하게 되면 ReferenceError가 발행하는 것 입니다.

 

재선언

• var는 재선언이 가능하다.
• let과 const는 재선언이 불가능하다.

이해를 돕기 위해 간단한 예시 코드를 봅시다.

var foo = "foo1";
var foo = "foo2"; // 문제없음

let bar = "bar1";
let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared

다음과 같이 var로 선언했을 경우 재선언이 가능하지만, let 혹은 const로 선언하면 오류가 발생합니다.

 

이렇게 var과 let의 차이점을 알아보았는데, 그렇다면 let과 const의 차이점은 무엇일까요?

• var과 let은 재할당이 가능하다.
• const는 선언과 초기화가 반드시 동시에 일어나야 하며 재할당이 불가능하다. 즉, 상수와 같은 고정값을 선언할 때 사용하는 키워드이다.

이해를 돕기 위해 간단한 예시 코드를 봅시다.

// let은 선언하고 나중에 값을 할당이 가능하지만
let dd
dd = 'test'

// const 선언과 동시에 값을 할당 해야한다.
const aa // Missing initializer in const declaration

다음과 같이 const는 선언과 당시에 값을 할당 해야하며, 이를 어긴다면 에러가 발생할 것입니다.

---

함수

 

세 가지 방법으로 함수를 만들 수 있습니다.

 

1. 함수 선언문: 주요 코드 흐름을 차지하는 방식

function sum(a, b) {
  let result = a + b;

  return result;
}

 

2. 함수 표현식: 표현식 상태로 선언된 함수

let sum = function(a, b) {
  let result = a + b;

  return result;
};

 

3. 화살표 함수

// 화살표(=>) 우측엔 표현식이 있음
let sum = (a, b) => a + b;

// 대괄호{ ... }를 사용하면 본문에 여러 줄의 코드를 작성할 수 있음. return문이 꼭 있어야 함.
let sum = (a, b) => {
  // ...
  return a + b;
}

// 인수가 없는 경우
let sayHi = () => alert("Hello");

// 인수가 하나인 경우
let double = n => n * 2;

요약

• 함수는 지역 변수를 가질 수 있습니다. 지역 변수는 함수의 본문에 선언된 변수로, 함수 내부에서만 접근할 수 있습니다.
• 매개변수에 기본값을 설정할 수 있습니다. 문법은 다음과 같습니다. function  sum(a = 1, b = 2) { . . . }
• 함수는 항상 무언가를 반환합니다. return문이 없는 경우는 undefined를 반환합니다.

---

참고 문헌 및 사이트

 

모던 JavaScript 튜토리얼 - https://ko.javascript.info/javascript-specials

Must-Know-About-Frontend - https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/var-let-const.md

var-let-const 차이점 - https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d

 

긴 글 읽어주셔서 감사합니다😀