보이보이

1. JSON (JavaScript Object Notation)

JSON 은 속성-값 쌍(Attribute-Value pairs), 배열 자료형 또는 기타 시리얼화 가능한 값,

또는 키-값 쌍으로 이루어진 데이터 객체를 전달하기 위한 개방형 표준 포맷입니다.

2. 내장객체 (Built-in Object)

브라우저의 자바스크립트 엔진에 내장된 객체를 말합니다.

3. JSON 내장객체

JSON 객체는 JSON 을 분석하거나 값을 JSON 으로 변환하는 메소드를 가지고 있습니다.

JSON 을 직접 호출하거나 인스턴스를 생성할 수 없으며, 두 개의 메소드를 제외하면 특별한 기능은 없습니다.

두 개의 메소드는 다음과 같습니다.

1) JSON.stringify();

2) JSON.parse();

4. JSON.stringify & JSON.parse 함수

글 자체의 핵심은 간단하게 아래의 코드와 그 결과로 정리할 수 있습니다.

JSON.stringfy 함수는 자바스크립트의 값을 JSON 문자열로 변환합니다.

JSON.parse 함수는 JSON 데이터를 자바스크립트의 값으로 변환합니다.

  <script>
    const stringArr = {name: 'park', age: '15', city: 'seoul', country: 'korea'};
    const jsonData = JSON.stringify(stringArr);
    const parseData = JSON.parse(jsonData);

    console.log(stringArr);
    console.log(jsonData);
    console.log(parseData);
  </script>

대단한게 있을 것 같지만 사실 단순한 함수 두 개입니다.

알고나면 참 쉬운 함수지만, 모르면 활용 자체가 불가능하기 때문에 인지만 하고 계시면 될 것 같습니다.

오늘도 고생하셨습니다.

감사합니다.

자바스크립트 호기심천국

이번에 다뤄볼 주제는 일반적인 함수 정의 방식 vs 익명 함수 선언 참조 방식 입니다!

참 길고 복잡해보입니다.

하지만 알고보면 별거 아닌 이야기라는 것~ 하지만 그게 디테일이라는 것~

한 번 알아보겠습니다.

1. 기본 함수 정의문

함수를 사용하여 코드를 저장하는 것을 함수 정의문이라고 합니다.

변수를 선언할 때 var, let, const 를 사용한 것처럼 함수에서는 function 키워드를 사용해 함수를 선언합니다.

이 떄 함수 정의문은 다음 두 방식으로 선언할 수 있습니다.

1) 일반적인 함수 정의

함수를 다음과 같이 선언합니다.

function myFunction() {
  count++;
  document.write("hello" + count, "<br>");
}

함수를 다음과 같이 사용합니다. 참 쉽죠?

myFunction();

2) 익명 함수 선언 참조 방식

함수를 다음과 같이 선언합니다.

var theFunction = function () {
  count++;
  document.write("bye" + count, "<br>");
};

함수를 다음과 같이 사용합니다. 참 쉽죠?

theFunction();

2. 두 방식 간 차이

함수 선언 방식 두 가지를 살펴보았습니다.

두 방식 간 차이가 과연 있긴 한건가 의심이 됩니다.

바로 알아보겠습니다.

일반 함수 정의는 함수 호출 시 호이스팅(Hoisting) 기술을 지원합니다.

그러나 익명 함수 선언 참조 방식은 호이스팅을 지원하지 않습니다.

호이스팅 기술을 적용하면 함수 정의문보다 함수 호출문이 먼저 나와도 정상 동작합니다.

자바스크립트에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

쉽게 설명하여 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것이라고 생각하시면 됩니다.

쉽게 코드로 확인해보겠습니다.

다음은 일반적인 함수 정의 방식입니다.

var count = 0;

myFunction();

function myFunction() {
  count++;
  document.write("hello" + count, "<br>");
}

소스코드를 순서대로 읽어내려가는 인터프리터 언어 특성 상 myFunction(); 호출문은 아직 선언된 상태가 아니므로,

상상 속에서는 동작이 실패했어야 하지만, 정상동작함을 확인할 수 있습니다.

이는 호이스팅 기능 덕으로 함수의 선언부가 코드의 최상단으로 옮겨진 후 동작을 했기 때문입니다.

다음은 익명 함수 선언 참조 방식입니다.

var count = 0;

theFunction();

var theFunction = function () {
  count++;
  document.write("bye" + count, "<br>");
};

위 코드는 실행 시

Uncaught TypeError 가 발생합니다.

이유는 전과는 정반대로 호이스팅 기술을 지원하지 않기 때문입니다.

두 방식 간 차이점을 확인해봤습니다.

그럼 결론으로 넘어가보겠습니다.

3. 결론

결론입니다.

호이스팅 방식을 보면 코드의 자유도가 하나의 장점인 자바스크립트의 매력 포인트로 보입니다.

하지만 자유도 과하면 독이 되는 법입니다.

길고 긴 코드, 여러 사람이 관리하는 코드일 경우 선언되지 않은 함수나 변수가 사용되는 것은 관리하기에는 단점이 될 수 있습니다.

비슷한 느낌으로 변수의 선언방식 var, let, const 중 var 가 이미 권장하지 않는 선언방식이 되었습니다.

이유는 여러가지가 있겠지만, 이번 사례와 같이 호이스팅 기술의 지원 유무가 큰 몫을 했습니다.

코딩에 정답은 없지만, 더 나은 방식은 존재합니다.

길고 길었지만 결론: 보통의 경우에는 익명 함수 선언 참조 방식을 사용하시면 됩니다!

var theFunction = function () {
  count++;
  document.write("bye" + count, "<br>");
};

부족한 글 읽느라 고생하셨습니다.

오늘도 좋은 하루 보내세요.

감사합니다.

코드 입력 시 주의사항

1. JS 는 대소문자를 구분하여 작성합니다.

New date(); -----> X
new Date(); -----> O

2. 코드 한 줄을 작성한 후에는 세미콜론(;) 을 쓰는 것이 좋습니다.

document.write("hi") document.write("bye") -----> X
document.write("hi"); document.write("bye"); -----> O

3. 코드를 작성할 때는 한 줄에 한 문장만 작성하는 것이 가독성을 위해 좋습니다.

document.write("hi"); document.write("bye"); -----> X

document.write("hi"); 
document.write("bye"); -----> O

4. 문자형 데이터를 작성할 때는 큰따옴표(" ") 와 작은 따옴표(' ')의 겹침 오류를 주의해야 합니다.

document.write("티스토리에 "자바스크립트는 대소문자를 구분해야 합니다" 라고 나와 있습니다."); -----> X

document.write('티스토리에 "자바스크립트는 대소문자를 구분해야 합니다" 라고 나와 있습니다.'); -----> O
document.write("티스토리에 \"자바스크립트는 대소문자를 구분해야 합니다\" 라고 나와 있습니다."); -----> O

5. 코드를 작성할 때 중괄호{} 또는 소괄호()의 짝이 잘 맞아야 합니다.

document.write("welcome!"; -----> X
document.write("welcome!"); -----> O

변수 선언 시 주의사항

1. 변수명 첫 글자로는 $, _(언더바), 영문자만 올 수 있습니다.

var 1num = 10; -----> X 
var num1 = 10; -----> O
var $num = 10; -----> O
var _num = 10; -----> O

2. 변수명에는 영문자, 숫자, $, _(언더바)만 포함할 수 있습니다.

var num*1 = 10; -----> X
var num_$1 = 10; -----> O

3. 변수명으로는 예약어를 사용할 수 없습니다.

예약어란 이미 자바스크립트 내에서 사용 중인 단어를 말합니다.

var document = 10; -----> X
var location = 10; -----> X
var window = 10; -----> X
var num2 = 10; -----> O

4. 변수명을 지을 때는 되도록 의미를 부여해 작성하는 것이 좋습니다.

var num1 = "hello"; -----> X
var num2 = 10; -----> O

5. 변수명을 사용할 때는 대소문자를 구분해야 합니다.

var num2 = 10;
document.write(Num2); -----> X
document.write(num2); -----> O

비교 연산자(==, ===)의 차이

표로만 정리해선 이해가 쉽지 않습니다.

다음 스크립트를 통해 설명하겠습니다.

<script>
    var a = 10;
    var b = "10";

    document.write(a == b, "<br>");
    document.write(a != b, "<br>");
    document.write(a === b, "<br>");
    document.write(a !== b, "<br>");
</script>

결과값은 다음과 같습니다.

true
false
false
true