개발

자바스크립트에서 유일하게 3개의 피연산자를 취할 수 있는 문법. true or false를 판별할 수 있는 조건문, ? 뒤에는 참일 경우 반환값, : 뒤에는 거짓일 경우의 반환할 값. if else의 대체제로 많이 사용하지만 조건 연산자 안에 조건 연산자를 중첩해서 사용할 경우 연산 결과를 쉽게 예측 하기 어렵기 때문에 가급적 사용을 자제해야 함./* 조건문 ? true 일 경우 값 : false 일 경우 값 */const value = 3console.log(value % 3 === 0 ? "참" : "거짓") // 참

Front-End/Javascript 2024. 9. 26. 13:35

- 객체의 전개 구문은 순서가 중요함. 작동의 순서차이로 인해 전혀 다른 객체가 될 수 있다.const obj = {a:1, b:2}const obj1 = {c:3, d:4}const newObj = {...obj, ...obj1} // {a:1, b:2, c:3, d:4}const FirObj = {...obj, c: 10} // {a:1, b:2, c:10}const BacObj = {c: 10, ...obj} // {c:10, a:1, b:2} FirObj와 BacObj의 결과값은 다른데, 전개 구문 이후에 값 할당이 있다면 할당한 값이 이전에 전개했던 구문 값을 덮어씌움. 반대의 경우는 전개 구문이 해당 값을 덮어씀. 전개 구문에 있는 값을 덮어쓸 것인지 값을 받아들일지에 따라 순서에 차이가 발생..

Front-End/Javascript 2024. 9. 25. 18:21

전개구문(Spread Syntax)배열이나 객체, 문자열과 같이 순회활 수 있는 값에 대해 전개해 간결하게 사용할 수 있는 구문. 배열의 전개 구문은 ES6(ES2015), 객체의 전개 구문은 ES2018에 선보임. 배열의 전개 구문- 전개 구문 이전에는 배열 간 합성을 하려면 push, concat, split 등의 메서드를 사용했어야 되지만 전개 구문을 통해 간편하게 합성가능.const arr = ['a', 'b']const arr1 = [...arr, 'c', 'd'] // ['a', 'b', 'c', 'd']const copy = arrconst spread = [...arr]arr === copy // true 내용이 아닌 참조를 복사하기 때문에arr === spread // false 값만 복..

Front-End/Javascript 2024. 9. 25. 18:16

- Parser에서 토큰을 트리구조로 변경하게 되며 각 언어로 프로그래밍 된 소스코드는 추상적으로 바뀌게 되고 코드의 구조는 노드로 변경하게 된다. 이러한 노드의 집합으로 만들어진 자료구조를 AST, 추상 구문 트리라 함.- AST explorer 에서 각 Parser에 맞는 추상 구문 트리를 확인할 수 있다.const text = "text test";function testFunc(str) { console.log(str)}testFunc(text) - Javascript, acron 을 선택한 후 위의 예제를 입력하게 되면 아래와 같은 Tree view와 JSON view를 확인 가능하다.{ "type": "Program", "start": 0, "end": 88, "body": [ {..

Front-End/Javascript 2024. 9. 25. 17:28

- 자바스크립트의 컴파일 과정을 살펴보기 전에 컴파일 언어인 C 언어의 컴파일 과정을 알아봄.1. compile 언어의 compile 과정 (EX. C 언어) 1-1. preprocessor (전처리기)  : # 이 앞에오는 소스 코드를 처리하며(preprocessing directives) 주석제거, stdio.h 같은 헤더 파일을 코드 상으로 필요한 내용으로 채워주고 define으로 먼저 정의된 상수를 symbol table에 저장 등 매크로를 확장 및 치환하며 전처리된 코드로 변환. (*.c -> *.i)  1-2. compile  : 전처리된 소스 코드를 어셈블리어 코드로 변환하며 언어의 문법 검사, static 영역의 메모리 할당하며 front-end -> middle-end -> back-en..

Front-End/Javascript 2024. 9. 25. 16:09

const object = { a: 1, b: 2, c: 3, d: 4,}const {a, b, ...rest} = object// a 1// b 2// rest = {c: 3, d: 4}const object1 = { a: 1}const {a1: first} = object1// first: 1- 객체 내부 이름으로 꺼내오며 새로운 이름으로 다시 할당하는 것 가능. /* Example 1 */const object = { a: 1, b: 1}const {a=10, b=10, c=10} = object// a 1// b 1// c 10/* Example 2 */function Sample({a, b}) { return a + b}Sample({a: 3, b: 5}) //8/* Exampl..

Front-End/Javascript 2024. 9. 23. 18:16

- 배열 또는 객체의 값을 분해해 개별 변수에 즉시 할당하는 것. 주로 객체나 배열에서 선언문 없이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용하며 배열은 ES6(ES2015), 객체는 ECMA2018에 등장.배열 구조 분해 할당/* Example1 */const array = [0, 1, 2, 3, 4, 5]const [zero, first, second, ...rest] = array// zero 0 // first 1// second 2// rest [3,4,5]/* Example2 */const array1 = [0, 1, 2, 3, 4]const [zero, , , , four] = array1 // 1,2,3은 표현식이 없으므로 변수 할당 생략. zero //0 fout //4 - 배열..

Front-End/Javascript 2024. 9. 23. 10:45

- 웹 페이지로 구현할 경우 사용자의 브라우저와 버전은 개발자와 다르게 항상 최신 버전 아니며 사파리, 크롬, 파이어폭스 등 다양하기 브라우저에서의 자바스크립트 표준인 ECMAScript의 문법 지원을 염두에 두어야 한다. 인터넷 익스플로러 11의 지원은 종료되었지만 여전히 어느정도 사용중이며 엣지 환경에서도 호환성 모드를 활성화하면 익스플로러 환경으로 페이지에 접근가능하며 셋톱박스와 같은 업데이트를 쉽게 할 수 없는 구형 기기에서도 ES5까지만 작동하는 경우가 있으므로 ES5 기준으로 transpile 된 코드를 파악하는 것이 중요.- 사용자의 다양한 브라우저 환경, 최신 문법을 작성하고 싶은 개발자의 요구를 해결하기 위해 탄생한 것이 바로 바벨이며, 바벨은 JS의 최신 문법을 다양한 브라우저에서도 일..

Front-End/Javascript 2024. 9. 21. 14:04