개발일지

개발일지 1주차 WIL

2023. 4. 9. 23:07
목차
  1. 자바스크립트 ES
  2. 자바스크립트 ES5와 ES6 문법차이
  3. 자바스크립트 ES5
  4. ES5 문법
  5. ES6 문법
  6. 요약

자바스크립트 ES

- 자바스크립트 ES란  ECMA Script의 약자이다 ECMA는 European Computer Manufactures Association의 약자로,

정보와 통신시스템의 비영리 표준 기구이다. 즉 ES는 ECMA라는 조직에서 정한 자바스크립트 표준 규격이란 뜻이다.

ECMA에서 다루는 표준을 기준으로 자바스크립트는 ECMA-262로 지정되어있다.

ECMA의 홈페이지에 들어가보면 자바스크립트 외에도 다양한 정보, 통신 ,언어에 대한 규격이 나와 있다. 

 

https://www.ecma-international.org/publications-and-standards/standards/ecma-262/

 

ECMA-262 - Ecma International

ECMAScript® 2022 language specification, 13th edition - ECMAScript is a programming language based on several technologies like JavaScript.

www.ecma-international.org

자바스크립트 ES5와 ES6 문법차이

자바스크립트 ES5

- 자바스크립트 ES5는 자바스크립트 ECMA script 언어의 버전이다. ES5는 자바스크립트 ECMA script 버전 5라고 해석하면 편할것 같다. 자바스크립트 ES5버전은 2009년에 발행되었다.

ES5 문법

  • ES5에서는 알고리즘을 풀거나 배열을 편하게 조작할 수 있는 forEach, map, filter ,reduce, some, every 같은 메소드들이 추가 되었다
  • Object에 대한 getter와 setter가 지원되었다.
  • strict모드가 지원되었다 (엄격모드)
  • JSON(JavaScript Object Notation) 형식의 자료들을 지원하게 되었다

*JSON이란 아래 코드와 같이 "key":"value"로 이루어진 자바스크립트 데이터를 표현하는 텍스트 기반 방식이다.

db에 자료를 저장하거나 가져올때 사용할 수 있다.

 

{
  "number_1" : 210,
  "number_2" : 215,
  "number_3" : 21.05,
  "number_4" : 10.05
}

 

자바스크립트 ES5 pdf 공식문서이다 252페이지로 이루어져 있으며, ES5버전에 업데이트된 모든 기능의 설명이있다.

https://www.ecma-international.org/wp-content/uploads/ECMA-262_5th_edition_december_2009.pdf

ES6 문법

- 자바스크립트 ES6에서는 현재 사용하는 문법들중 유용한 기능이 다수 추가 되었다.

  • let, const  : let과  const라는 키워드가 추가되어 변수를 할당할때 상수인지, 변수인지를 예측할 수 있게되었다.
  • 템플릿 리터릴  : 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 띄워쓰기나 줄바꿈도 백틱안에서 사용이 가능하다.
const a = "안녕"
const b = "하세요"

console.log(`안녕하세요\n${a}${b}`)
//안녕하세요
//안녕하세요
  • 화살표 함수 : 함수 표현식을 간결하게 작성할 수 있어 가독성 및 함수의 유지보수가 좋아졌다. 함수의 코드가 한줄인 경우에는 return을 생략할 수 있다. 화살표 함수가 익숙하지 않은 경우 함수표현식을 먼저 자주 사용하여 익숙해 진 후 화살표 함수를 조금씩 사용하여 화살표 함수에 익숙해지는 것도 좋은 방법이다. map이나 reduce같은 반복하는 메서드에서 자주 사용되기 때문에 필수로 알아두면 좋은 함수 표현식이다.
//함수 표현식
function add(a,b){
 return a + b
}

const add = (a, b) => {
  return a + b;
}
//return 생략
const add = (a, b) => a + b;
  • 구조 분해 할당 : 객체나 배열을 해체 한후 각각의 값을 새로운 변수에 할당 하는 것이다. 리액트 useState Hook에서 사용된다.
const obj = {
    firstName: '유리',
    lastName: '짱구'
};
const { firstName, lastName } = obj;


console.log(obj) //{ firstName: '유리', lastName: '짱구' }
console.log(firstName) //유리
console.log(lastName)  //짱구
  • Promise : 프로미스는 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 사용한다.
let promise = new Promise(function(resolve, reject) {
  // executor 
});
  1. executor(실행함수) - 결과를 최종적으로 만들어내는 제작코드를 포함한다.
  2. resolve(value) — 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
  3. reject(error) — 에러 발생 시 에러 객체를 나타내는 error와 함께 호출
  4. 요약 -  executor는 자동으로 실행되는데 여기서 원하는 일이 처리됨 처리가 끝나면 executor는 처리 성공 여부에 따라 resolve(valure)나 reject(error)를 호출.
  • module : 재사용하기 위한 코드 조각이다 세부사항은 캡슐화 시키고 api부분만 외부에 노출시킨 코드들이다.
<script type="module" src="bbs.mjs"></script>
<script type="module" src="file.mjs"></script>

- 모듈은 파일 하나이다. 스크립트 하나는 모듈 하나이다 모듈은 스코프를 가지며 export와 import키워드를 통해 다른 모듈을 불러와 모듈에 있는 함수를 호출할 수 있다.

- React에서 각 모듈별로 js를 만들고 app.js에 가져올때 사용하거나 node.js에서도 같은 방식으로 사용이 가능하다.

  1. export
// 짱구.js
export function jjangu(user) {
  alert(`Hello, ${user}!`);
}

console.log(jjangu(jjangu)) //"Hello jjangu"

2. import

//  app.js
import {jjangu} from './짱구.js';

alert(jjangu); // 함수
jjangu('jjangu'); // Hello, jjangu!

요약

  • ES5는 2009년에 발행되었다. forEach, map, filter ,reduce, some, every 같은 메서드들이 추가 되었다.
  • ES6는 2015년에 발행되었다. 구조분해, 화살표 함수, 모듈, let const, 템플릿 리터릴 , promise 등의 기능이 추가 되었다.

다음주 목표: ES5와 ES6에서 추가된 기능들에 대해 구체적으로 이해하고, 나만의 방식대로 사용해보기.

'개발일지' 카테고리의 다른 글

개발일지 26일차  (3) 2023.04.12
개발일지 25일차  (0) 2023.04.11
개발일지 24일차  (0) 2023.04.06
개발일지 23일차  (0) 2023.04.06
개발일지 22일차  (0) 2023.04.05
  1. 자바스크립트 ES
  2. 자바스크립트 ES5와 ES6 문법차이
  3. 자바스크립트 ES5
  4. ES5 문법
  5. ES6 문법
  6. 요약
'개발일지' 카테고리의 다른 글
  • 개발일지 26일차
  • 개발일지 25일차
  • 개발일지 24일차
  • 개발일지 23일차
index.ys
index.ys
머리속에 떠도는 코드조각들을 맞추는 공간입니다.
index.ys
코린이 개발일지
index.ys
전체
오늘
어제

공지사항

블로그 메뉴

  • 홈
  • 방명록
  • Github
  • Notion
  • Figma
  • 타닥타닥 (235)
    • 개발일지 (124)
    • html , css (0)
    • Javascript (30)
    • Node.js (8)
    • React (2)
    • 네트워크 (1)
    • DB, SQL (5)
    • AWS (11)
    • CS (21)
    • 면접 (13)
    • 사진 (4)
    • 북로그 (3)
    • 머릿속 (5)

인기 글

최근 글

최근 댓글

hELLO · Designed By 정상우.
index.ys
개발일지 1주차 WIL
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.