JavaScript/JSON

JSON(JavaScript Object Notation) 기초

SeaPlus 2021. 7. 2. 14:43

[JSON]

 

-  JSON은 Javascript 객체 문법을 따르는 문자 기반의 구조화된 데이터 포맷 입니다.

(javascript가 아니더라도 읽고 쓸수는 있다.)

 

- 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용합니다.

(서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우)

 

- 개별 JSON객체를 .json확장자를 가진 단순 텍스트 파일에 저장할 수 있습니다.

 

 

 

문자열에서 네이티브 객체로 변환하는 것은 파싱(Parsing)이라고 합니다. 네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은 문자열화(Stringification)이라고 합니다.

 

더보기

네이티브 객체

  • 네이티브객체는 호스트 환경 아니라 ECMAScript의 스펙에 의해서 정의된 객체입니다.
  • NOTE 표준 네이티브객체는 위에 언급한 스펙으로 정의되어 있습니다. 약간의 네이티브객체들은 빌트인이고 나머지는 ECMAScipt 프로그램이 실행되는 동안 구성됩니다.

 

  • 예시: Object (constructor), Date, Math, parseInt, eval, string methods like indexOf and replace, array methods, ....

 

호스트 객체

  • ECMASrcipt의 실행 환경을 만들기위해 호스트 환경에서 제공된 객체입니다.
  • NOTE 네이티브객체가 아니면 호스트객체 입니다.

 

  • 예시(브라우저 환경일 때): window, document, location, history, XMLHttpRequest, setTimeout, getElementsByTagName, querySelectorAll, …

 

ECMA스크립트

  • ECMA스크립트란: ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. (스크립트 언어 → 응용프로그램을 제어하기위한 언어)
  • 자바스크립트를 표준화하기 위해 만들어졌다.

 

 

[JSON 구조]

예시) super hero squad

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

- 이 객체를 Javascript 프로그램에서 로드하고, 예를 들어 superHeroes라는 이름의 변수에 파싱하면

점 브라켓 표기법을 통해 접근 가능하다.  

 

-  superHerpes의 두번째 member의 세번째 power에 접근하고자 한다.

superHeroes['members'][1]['powers'][2]

JAVAscript 개체속성 액세스 방법

더보기

점 표기법

let obj = {
  cat: 'meow',
  dog: 'woof'
};
let dog = 'cat';
let sound = obj.dog;
console.log(sound);
// woof
  • 속성 식별은 영숫자(및 _ 및 $)만 가능합니다.
  • 속성 식별자는 숫자로 시작할 수 없습니다.
  • 속성 식별자는 변수를 포함 할 수 없습니다.
  • 확인 — obj.prop_1 , obj.prop$
  • 확인 —  obj.1prop , obj.prop name

 

대괄호 표기법(브라켓 표기법)

let obj = {
  cat: 'meow',
  dog: 'woof'
};
let dog = 'cat';
let sound = obj[dog];
console.log(sound);
// meow
  • 속성 식별자는 문자열 또는 문자열을 참조하는 변수 여야합니다.
  • 숫자로 시작하는 변수, 공백 및 문자열을 사용하는 것은 괜찮습니다.
  • 확인 — obj["1prop"] , obj["prop name"]

 

점과 브라켓 표기법의 차이점

점 표기법으로 조회를 시도할때는 실제 변수 값을 찾는게 아닌 객체내에서 문자열 값을 찾습니다!!

●  위 예시코드들에서 console.log를 실행했을때

1. 점표기법 ⇒ 변수'dog'의 값이 아닌 객체 내의 'dog'문자열 값을 조회 ⇒ 호출: 'woof'

 

2. 브라켓 표기법 ⇒ 변수'dog'의 값에 접근 후 조회 ⇒ 호출: 'meow'

 

 

 

 

[JSON 특징]

- JSON은 순수히 데이터 포맷입니다. 오직 프로퍼티만 담을 수 있습니다. 메서드는 담을 수 없습니다.

 

- JSON은 문자열과 프로퍼티의 이름 작성시 큰 따옴표만을 사용해야 합니다. 작은 따옴표는 사용불가합니다.

 

- 콤마나 콜론을 잘못 배치하는 사소한 실수로 인해 JSON파일이 잘못되어 작동하지 않을 수 있습니다. 

JSONLint같은 어플리케이션을 사용해 JSON 유효성 검사를 할 수 있습니다.

 

- JSON은 JSON내부에 포함할 수 있는 모든 형태의 데이터 타입을 취할 수 있습니다. 즉, 배열이나 오브젝트 외에도 단일 문자열이나 숫자또한 유효한 JSON 오브젝트가 됩니다.

 

- 자바스크립트에서 오브젝트 프로퍼티가 따옴표로 묶이지 않을 수도 있는 것과는 달리, JSON에서는 따옴표로 묶인 문자열만이 프로퍼티로 사용될 수 있습니다.

 

 

프로퍼티와 메서드

더보기

프로퍼티

  • 프로퍼티(property)는 일부 객체 지향 프로그래밍 언어에서 필드(데이터 멤버)와 메소드 간 기능의 중간인 클래스 멤버의 특수한 유형이다.
  • 프로퍼티의 읽기와 쓰기는 일반적으로 게터(getter)와 세터(setter) 메소드 호출로 변환된다.

 

메서드

  • 메서드(method) 또는 멤버 함수(member function)는 객체 지향 프로그래밍에서 객체과 관련된 서브 루틴 (또는 함수)이다.
  • 데이터와 멤버 변수에 대한 접근 권한을 갖는다.

 

 

 

 

 

 

( 참조: https://www.notion.so/JSON-845890c53aa1454ea00ee04a8fd28d2c )

 

 

'JavaScript/JSON'의 다른글

  • 현재글JSON(JavaScript Object Notation) 기초

티스토리툴바