[플레이데이터 풀스택 백엔드 9기] 7주차 - JavaScript

서론

7주차 - (04/29 - 05/05)

사흘 연휴가 이어진 한 주였습니다. 머릿 속을 비울 수 있는 시간이였습니다.

1. 내용정리

[Javascript]

프로토타입 기반의 객체지향 언어 / 웹 브라우저에서 동작하는 유일한 프로그래밍 언어

• 인터프리터 언어 : 컴파일을 하지 않아도 되며 런타임 문 단위로 한 줄씩
• 동적 바인딩 특징 : 실행 중에 변수나 함수가 어떤 객체와 연결되는지 결정하는 것
• 비동기 처리 방식 : 결과를 기다리지 않고 다음 작업으로 넘어감 (이벤트 루프와 큐를 통해 - 순차적으로 처리되는 방식)

변수(variable)

• Undefined 타입의 값은 undefined가 유일
• null타입은 값은 없지만 비어있지 않은 상태(의도적으로 값이 없다는 것을 명시할 때)
• 템플릿 리터럴: 백틱(``)을 사용하여 멀티라인 문자열, 표현식 삽입이 가능
• Symbol 타입 : 절대 중복되지 않는 고유 Key를 만들기 위한 타입 (ES6에서 추가된 7번째 타입)
• null의 타입은 object로 인식 (사실 버그)
• NaN끼리 비교 연산자 사용도 불가능하므로 isNaN함수르 이용해서 확인 (문자는 모두 NaN으로 )
• 빈문자열, 빈배열, null, false은 0 / true는 1 / 객체, undefined, 함수는 NaN
• undefined, null, 0, NaN, ''(빈문자열)은 Falsy한 값 (이 외 모든 값들은 Truthy값)
• String 생성자 함수를 new 연산자 없이 호출 (String(값))

비교(operator)

• 동등비교 (==, !=) : 타입 일치 시킨 후 같은 값인지 비교
• 일치비교 (===, !==) : 타입과 값이 모두 일치하는지 비교
• 단축평가 : 표현식을 평가하는 도중 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것 (null, NaN을 최소하기 위한 비교)
• 옵셔널 체이닝 연산자 : 객체나 속성이 존재하지 않아도 에러 없이 undefined를 반환하는 접근 연산자 obj?.value; 좌항의 피연산자가 null또는 undefined인 경우 undefined를 반환
• Null 병합 연산자 : 기본값을 설정할 때 사용obj ?? 'value'; 좌항의 피연산자가 null 또는 undefined인 경우 우향의 피연산자를 반환

객체 (프로퍼티)

• 프로퍼티를 정의하지 않은 빈 객체 생성 : {}
• 숫자 키는 내부적 문자열 반환 / 예약어 키는 권장X
• 프로퍼티 : 객체의 상태를 나타내는 값으로 키-값 쌍으로 구성 (값은 자바스크립트에서 사용할 수 있는 모든 값이 들어올 수 있음)
• 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작
• 숫자 키는 내부적으로 문자열로 반환
• 예약어는 권장하지 않음, 키는 나중에 선언한 값을 사용.
• 인자값이 필요하면 인자값을 넣어줘야 한다. (undefined가 뜸)
• 프로퍼티 값 단축 구문 var product2 = {id, price};
• in연산자 : 프로퍼티 존재 여부 확인
• for in 반복문 : 객체의 모든 키를 순회하는 반복문

함수

• 함수 선언문 function hello() {}
• 함수 표현식 var hello = function(){}
• 함수선언문은 런타임이전에 실행이 일어나있다. 호이스팅이 발생할 수 있다.
• 함수의 매개변수에 인자는 없어도 되고 선언되어 있는 갯수를 넘어가도 된다.
• 없으면 해당값은 undefined가 된다. 여러개면 모두 arguments객체안에 순서대로 키-값 형식으로 들어가 있다. arguments[인덱스값]사용한다.
• 함수(function)은 객체이고 값으로도 판단될 수 있는 일급객체

화살표함수

• 자바에서의 람다 '->'가 자바스크립트에선 '=>'로 / 항상 익명함수로 선언하며 사용(본문이 한줄일 때 유용)

message = () => { return `Arrow Function`; }

즉시 실행 함수

• 함수 정의와 동시에 호출
• 즉시실행함수: 한번만 호출하여 사용가능하고 반드시 그룹 연산자 '()'로 감싼다
• 콜백함수 ★★ : 함수 외부 상태의 뼌경을 지양하는 순수 함수를 사용

일급객체란

• 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능
• 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
• 함수의 매개변수에 전달할 수 있다.
• 함수의 반환값으로 사용할 수 있다.

변수 선언문

• var : 동일 스코프 내 중복 선언 가능 / 호이스팅(hoisting)되어 전역의 맨 위로 끌어올림(
• let : 변수의 중복 선언 금지 / 재할당 가능
• const : 상수특징 / const키워드로 선언한 변수는 반드시 선언과 동시에 초기화 해야 함 / 재할당이 금지(객체도 마찬가지 / 프로퍼티값을 변경하는 것은 문제가 없음)

배열(Array)

자바스크립트의 모든 값은 배열에 들어갈 수 있다. const arr2 = new Array();

• 전달된 인수가 1개이고 숫자인 경우 length 프로퍼티 값이 인수인 배열을 생성 (배열의 길이를 출력)
• { value: 10, writable: true, enumerable: true, configurable: false }
  writable : 변경가능 / enumerable : 순회가능 / configurable
• 자바스크립트도 push, pop 사용
• 전달 된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열을 생성
• 프로퍼티 값 변수명과 프로퍼티 키가 동일할 떄 생략 가능
• 배열의 요소가 연속적으로 위치하지 않고 비어있는 희소배열(중간 인덱스가 비어있는)을 허용

<for of 구문>
// 배열의 요소를 직접 가져와서 처리할 때 for...of를 사용하면 가독성에 용이 / 값(value)을 순회
for (let item of arr) {
    console.log(item);
}

<for in 구문>
// 객체의 속성을 순회할 때는 for...in을 더 적절하게 사용 가능 / 인덱스(index) 또는 속성(property)를 순회
for (let key in obj) {
    console.log(`${key}: ${obj[key]}`);
}

배열 메소드 (Array-method)

indexOf('물회', 1) : 두 번째 요소부터 찾음 (파일명 같은 경우 lastIndexOf)

• concat : const mix = idol1.concat(idol2); (1번이 앞) / 새로운 주소값이 들어옴
• slice : (front.slice(1, 3) : ${front.slice(1, 3)} / 끝 점이 없으면 전부 다
• splice : front.splice(3, 1, "React") /// index, 제거수, 추가값1, 추가값2 .....
• Array.prototype.join : snackList.join("/") 배열을 구분자로 결합하여 문자열로 반환
• Array.prototype.reverse : {[1, 2, 3, 4, 5].reverse() 배열의 순서 뒤집음

배열 고차 함수 ★★ (리액트 때도 자주 사용함)

• Math.floor : Math.floor(Math.random() * 100) + 1 소수점 절삭
• sort : numbers.sort() 정렬(오름차순) / 기본정렬을 하기 위해선 콜백함수를 사용 numbers.sort((a, b) => a - b);
• foreach : forEach((item, index, array)); numbers.forEach((item) => console.log(item * 10));
• Array.prototype.map : [true, 1, 'text'].map(item => typeof item); 콜백 함수 호출 후 새로운 배열 반환
• Array.prototype.filter : numbers.filter(item => item % 2); 콜백 함수 호출 후 true인 값을 가져와 새로운 배열 반환
• Array.prototype.reduce : 콜백함수 실행 반환값을 전달하여 콜백함수를 실행하고 그 결과를 반환
• 합산: numbers.reduce((pre, cur) => pre + cur); / 최대값:numbers.reduce((pre, cur) => (pre > cur? pre: cur));
• numbers.reduce((previousValue, currentValue, currentIndex, array) => {});
• previousValue: 이전 콜백의 반환값 / currentValue : 배열 요소의 값
  currentIndex : 인덱스 / array : 메소드를 호출한 배열
• Array.prototype.some : 배열 내 첫 번째로 조건을 만족하는 요소를 찾으면 즉시 종료.
• Array.prototype.every : 배열 내 모든 요소가 콜백함수의 테스트를 통과하는지 확인하여 그 결과를 boolean으로 반환
• result = [1, 5, 3, 2, 4].every(item => item > 3); / result = [1, 5, 3, 2, 4].every(item => item > 0);
• Array.prototype.find:
  - student.find(item) => item.name === "홍길동"
  - student.findIndex((item) => item.name === "홍길동"
  - result = student.filter((item) => item.score >= 80)

빌트인 프로퍼티 (built in global property)

전역 객체 (global-object)

• console.log(this) : 전역객체
• global.Infinity : 10/0 무한대를 나타내는 숫자 값
• global.NaN : 숫자가 아님
• global.undefined : undefined

빌트인 전역 함수 (built in global function)

• isFinite : true(null은 숫자로 판명됨)
• isNaN : 숫자가 아님을 나타냄
• parseFloat 전달받은 문자열 인수를 부동 소수점 숫자, 실수로 해석하여 반환한다.
• parseInt 전달받은 문자열 인수를 정수로 해석하여 반환한다 encodeURI / decodeURI :
• url로 이용하는 것은 get방식이다. (메소드를 받을 것인데 post방식이 아니고 get방식!)
• 한 세트로 받고 풀어줘야 함

내장 프로토 타입 구조

2. 마무리

> 아쉬웠던 점

같이 공부하는 수강생들과 휴일 동안 공부하는 '스터디'를 형성해
시간을 계획하고 사진을 찍어 디스코드로 공유했지만,
생각이 많아져 공부에 온전히 집중하지 못했습니다.

> 개선할 점

생각을 심플하게 오로지 필요한 것에 집중하기로 했습니다.

> 다음주 계획

다음 주 교육과정 : javascript, 리액트 예정
05/31 : SQLD 자격증 시험

선택과 집중, 공부에 몰두