Javascript 기본

JavaScript

mykuromi 2022. 9. 20. 00:11

✔️ Front-end

리액트 : 자바스크립트 라이브러리 중 하나, 노드js와 함께 사용하는 경우 효율 극대화
HTML5 : 요소들의 배치와 내용을 기술하는 언어, 다만 색이나 크기와 같은 디자인 부분 수행 불가
CSS3 : 색, 크기, 애니메이션 등을 정의, 스타일링을 위한 언어
자바스크립트 : 웹사이트에 활력을 부여하는 언어, 웹사이트를 실질적으로 움직이게 하는 요소 -> 자바스크립트 Runtime : 웹브라우저의 자바스크립트 엔진을 통해 실행(ex. 크롬 V8)

✔️ JS 개발 도구

✔️ 변수

✔️ 상수

✔️ 자료형

값을 성질에 따라 분류한 것
Primitive Data Type(Number, String, Boolean, Undefined, Null) / Non-Primitive Data Type(Object, Array, Function)

✔️ Prmitive Type(원시 타입)

내장형, 기본형 타입
하나의 순간에 하나의 값만 가질 수 있음(값 변화 가능)
하나의 고정된 저장 공간 이용
ex. let number = 12;
1) Number : 정수, 실수, Inifinity, -Infinity(음의 무한대), NaN(연산이 잘못 수행된 경우, 실패의 결과값) -> 연산 가능
2) String : " " or ' ' 로 감싸서 사용, ` ` 사용 시 문자열 내부에 변수 사용 가능 -> 템플릿 리터럴 ex. `mykuromi ${name}`
3) Boolean : true / false
4) Null : 의도적으로 이 변수가 아무것도 가리키지 않을 때 사용
5) Undefined : 변수를 선언하고 아무 값도 할당하지 않았을 때 ex. let variable;

✔️ Non-Prmitive Type(비원시 타입)

✔️ 형변환

✔️ 연산자

대입 연산자 : =
산술 연산자 : +, -, *, /, %
연결 연산자 : + 문자열 연결, 문자 + 숫자 시 묵시적 형변환
복합 연산자 : +=
증감 연산자 : ++, --, 전위연산, 후위연산
논리 연산자 : ! not, && and, || or
비교 연산자 : ==, !=(값만 비교), ===, !==(자료형까지 비교), > 대소 비교
typeof 연산자 : 자료형 출력
null 병합 연산자 : 양쪽의 피연산자 중 null이나 undefined가 아닌 값을 선택 ex. let a; a = a ?? 10; -> a는 10 출력

✔️ 조건문

✔️ 함수

✔️ 함수 표현식 & 화살표 함수

함수 표현식 : 함수는 값이므로 변수나 상수에 담아 사용 가능
ex. let hello = function () { }; const hellloText =hello();
호이스팅: 함수 선언식으로 만든 함수는 프로그램 실행 전 최상단으로 끌어올려져, 후에 선언되어도 먼저 호출하는 코드 작성 가능 cf. 함수 표현식, 화살표 함수는 호이스팅 불가
화살표 함수 : 함수 표현식을 간단하게 사용하는 방법 ex. let hello = () => { }; 또는 let hello = () => "안녕하세요 여러분"; (리턴값이 있는 경우)

✔️ 콜백 함수

다른 함수의 매개변수로 함수를 넘겨준 것
ex. function checkMood(mood, goodCallback, badCallback) { ... }; function cry () { .. }; function sing () { .. }; 호출 시에는 checkMood("sad", sing, cry); -> cry 함수 호출

✔️ 객체

1) 객체 생성자 : ex. let person = new Object();
2) 객체 리터럴 : ex. let person = { key : "value" } ;
객체 프로퍼티 : 멤버, 객체 속성, 객체가 가지고 있는 데이터(key : value), value는 모든 자료형 가능, key는 문자열로만 작성
프로퍼티 접근 : 점 표기법 ex. person.name / 괄호 표기법 ex.person["name"] - 키가 고정되어 있지 않거나 파라미터로 주고 받을 때 괄호 표기법 사용
상수로 선언한 객체도, 상수 자체를 수정하는 행위가 아니기 때문에 상수인 객체에 프로퍼티 추가 가능
프로퍼티 삭제 : delete 객체.프로퍼티 또는 delete 객체["프로퍼티"] -> delete 키워드는 메모리를 계속 점유하는 형태이기 때문에 null로 초기화 하는 방법 추천
메서드 : 객체 내의 함수
this : 객체 자기 자신
존재하지 않는 프로퍼티 확인 : ${"프로퍼티" in 객체명}

✔️ 배열

✔️ 반복문

for (초기식; 조건식; 증감연산자) { 반복 수행할 명령 } ;
반복문을 통해 배열, 객체 순회 가능
객체 순회시 Object.keys(객체명); 함수 이용 -> 객체의 key를 배열로 반환 ex. const personKeys = Object.keys(person); for (let i = 0; i < personKeys.length; i++) { const curKey = personKeys[i]; const curValue = person[curKey]; console.log(`${curKey} : ${curValue}`); );
value만 반환하고 싶은 경우 Object.values(객체명);

✔️ 배열 내장 함수

forEach : 배열 순회 함수, forEach라는 내장함수에 전달하는 콜백 함수를 배열의 각각 요소에 적용 ex. arr.forEach( (elm) => console.log(elm) ); // 콜백함수
map : 배열의 모든 요소에 대해 한 번씩 연산 후 새로운 배열 return ex. const newArr = arr.map( (elm) => { return elm * 2 } );
includes : 주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는지 확인(true/false) ex. arr.includes(number);
indexOf : 주어진 배열에 요소가 존재하는지 확인 후 인덱스 반환, 존재하지 않을 시 -1 반환
findIndex : 객체 배열에서 원하는 속성을 가진 요소의 인덱스 반환 ex. arr.findIndex( (elm) => elm.속성 == "value") );
find : 객체 배열에서 원하는 속성을 가진 요소 반환
filter : 배열 필터링, 특정한 속성을 가진 요소 모두 반환 ex. arr.filter( (elm) => elm.color === "blue") );
slice : 배열 자르기 ex. arr.slice(0, 2);
concat : 배열 붙이기 ex. arr1.concat(arr2); 첫 번째 배열에 두 번째 배열 붙이기
sort : 배열 사전순(문자순) 정렬 cf. 숫자 오름차순 정렬시 -> const compare = (a, b) => { if (a > b) return 1; if (a < b) return -1; return 0; }; 배열명.sort(compare); // 1은 클 때, 배열의 뒤로 보냄, 2는 작을 때, 배열의 앞으로 보냄, 0은 같을 때 제자리
join : 쉼표로 구분하여 배열의 요소를 문자로 합쳐 반환, 파라미터로 구분자 사용 가능 ex. arr.join("-");