[멋쟁이사자처럼] 프론트엔드 2일차 정리

멋쟁이사자처럼 2일차 정리 (6월 18일)

6월 18일 학습 내용은 JavaScript의 핵심적인 개념과 데이터 조작 방법에 중점을 두었으며 연산자, 함수, 배열, 객체, 그리고 JSON에 대해 깊이 있게 다루었습니다.

1. 데이터 분석을 위한 연산 (Operator)

• Truthy/Falsy 값: JavaScript에서는 if (3 + 4)와 같은 값도 truthy 또는 falsy로 판단합니다. C나 Java에서는 0이 아닌 모든 값이 참으로 인식됩니다.
  Truthiness examples: true, {}, [], 42, "0", "false", -3.14, new Date(), Infinity, -42, -Infinity, 12n, 3.14 Falsiness examples: false, null, undefined, 0, -0, 0n, NaN, ""
   
• 논리 OR (||) 연산자: 둘 중 하나라도 true이면 true를 반환하며, 첫 번째 truthy 값을 반환합니다 (참을 찾습니다).
   
• 논리 AND (&&) 연산자: 둘 중 하나라도 false이면 false를 반환하며, 첫 번째 falsy 값을 반환합니다 (거짓을 찾습니다. 만약 거짓을 찾지 못하면 마지막 값을 반환합니다).
   
• 기본값 설정 방법:
  || (OR) 연산자를 사용: var name = null || 'default string';
  Nullish coalescing operator (??): 좌항이 null 또는 undefined일 때 우항의 값을 반환합니다.
   
• 숫자 산술 연산 및 타입 변환:
  덧셈 (+): 숫자를 문자열로 변환하여 문자열 연결을 수행할 수 있습니다 ('3' + 3 결과 33). 
  곱셈 (*): 문자열을 숫자로 변환하여 연산을 수행합니다 ('3' * 3 결과 9).
  숫자와 문자열('a')의 덧셈은 문자열 연결 ('3a'), 곱셈은 NaN을 반환합니다.
   
• NaN과 Infinity 비교: isNaN()과 같은 전역 함수를 활용하여 비교해야 합니다.
   

2. Array Collections (배열 컬렉션)

• 배열은 객체: JavaScript에서 배열은 컬렉션으로, 객체의 일종입니다.
   
• 배열 초기화: new Array(), new Array(5) (비어있는 배열, 길이는 5.)
                      new Array(1, 2, 3) (요소 초기화)
   
• 데이터 구조 활용:
  스택 (Stack): 후입선출 (LIFO - Last In First Out) 구조로, pop()을 이용하여 뒤에서부터 자료를 수정할 때 사용합니다.
  큐 (Queue): 선입선출 (FIFO - First In First Out) 구조로, push()와 shift()를 이용합니다. 전송과 관련된 경우(버퍼)에 활용됩니다.
   
  • splice(): 배열 요소를 추가, 삭제, 교체하는 다목적 메서드입니다.
    splice(index): index부터 끝까지 모든 요소를 제거합니다.
    splice(index, deleteCount): index부터 deleteCount만큼 요소를 제거합니다.
    splice(index, 0): index 위치에 아무것도 제거하지 않고 삽입할 수 있습니다.
• 배열 순회 및 변환 메서드 (Loop over):
  forEach: 배열의 각 요소에 대해 함수를 실행합니다.
  for...of: 반복 가능한 객체 (배열 포함)를 순회합니다.
  find: 조건을 만족하는 첫 번째 요소를 반환합니다.
  filter: 조건을 만족하는 모든 요소를 포함하는 새 배열을 반환합니다.
  map: 배열의 각 요소에 함수를 적용하여 새로운 배열을 반환합니다. (배열 변환)
  join: 배열의 모든 요소를 연결하여 하나의 문자열로 만듭니다.
  reduce: 배열의 모든 요소를 단일 값으로 "축소"합니다 (예: 총합 계산).
   

3. Object 객체

• 속성 사용하기: object.property 또는 object['property'] (특수 문자가 포함된 속성명에 유용).
   
• delete: 객체 속성을 삭제합니다.
   
• Proto Type: JavaScript 객체는 프로토타입을 통해 속성과 메서드를 상속합니다. 모든 생성자는 객체를 가지며, 동일한 기능을 공유합니다.
   
   
• 생성자 함수: function Exam(kor, eng, math) { ... }와 같이 생성자를 정의하여 객체를 생성합니다. new 키워드를 사용하여 호출하면 this는 새로 생성될 객체를 가리킵니다.
   

4. Function Object (함수 객체)

• 함수는 객체: JavaScript에서 함수는 일급 객체입니다.
   
• 함수 재사용: 함수는 반복적으로 생성하기보다는 가능한 한 재사용하는 것이 바람직합니다.
   
• 매개변수 (Parameter)
  arguments 객체: 함수 내부에서 전달된 모든 인수에 접근할 수 있는 유사 배열 객체입니다.
  Rest Parameter (...rest): 남은 인자들을 배열로 묶어줍니다.
   
• 클로저 (Closure): 외부 함수의 변수에 접근할 수 있는 내부 함수를 의미합니다.
   
• 화살표 함수 (Arrow Function)
  일반 함수와 매개변수 처리에 차이가 있습니다.
  arguments 객체가 없습니다.
  this 바인딩이 없습니다 (렉시컬 스코프의 this를 따릅니다). 즉, 객체가 없습니다.
  생성자로 사용할 수 없습니다 (new 키워드 사용 불가).

5. JSON (JavaScript Object Notation)

• 자바스크립트의 기본형: Boolean, Number, String, Array, Object 등은 값이 존재하고 타입이 존재합니다.
   
• JSON의 역할: JavaScript의 모든 객체를 쉽게 표현할 수 있게 해줍니다.
   
• XML vs JSON: JSON은 XML (태그로 마크업하는 방식) 보다 가볍고 읽기 쉬운 데이터 교환 형식입니다.
   
• JSON 파싱: JSON.parse()를 사용하여 JSON 문자열을 JavaScript 객체로 변환합니다. 이때 JSON 문자열의 키는 반드시 큰따옴표로 감싸야 합니다.
   
• 객체 속성 정의: 키와 값이 동일할 때 간결하게 표현할 수 있습니다.
   
• 데이터 구조 및 Destructuring (구조 분해 할당):
  데이터 구조는 중첩을 낮춰서 사용하는 것이 좋습니다.
  객체 속성을 연산에 직접 사용하는 것보다 Destructuring을 통해 새로운 변수로 생성하는 것이 바람직합니다.
  ES6에서 지원하는 기능으로, 속성의 복잡도를 낮추어 사용할 수 있습니다.