[한입 크기로 잘라 먹는 리액트] Javascript 기본

변수 : let으로 선언(var는 중복선언이 되므로 오류발생위험)

변수명 중에서 쓸 수 있는 기호는 _와 $뿐이다.

상수 : const로 선언, 선언과 동시에 초기화가 되어야한다. (선언이후에 값을 바꿀수 없으므로)

 

---

 

(자료형)데이터 타입은 원시타입(primitive data type)5개, 비원시타입(non-primitive data type)3개로 구분된다.

 

Primitive type : 한번에 하나의값만 가질수있음, 하나의 고정된 저장공간 이용

Non-Primitive type : 한번에 여러개의값 가질수있음, 여러개의 고정되지 않는 동적 공간 사용

 

Number

Infinity : 무한대

-Infinity : 마이너스 무한대

NaN : 연산이 잘못수행되었다

 

String

"", '', 백틱(문자열 안에 변수의 값 집어넣을때) ex) `ㅋㅋㅋ ${name}` -> 템플릿 리터럴이다!

Boolean

참,거짓

Undefined

변수에 값을 할당하지 않고 사용하면 undefined

Null

의도적으로 아무것도 안가리키고있다.(아무값도 안담겨있다)

 

형변환(casting)

12 * "2" = 24 -> 자바스크립트가 자동으로 변환하여 계산

묵시적으로 되므로 묵시적 형변환.

12 + "2" = 122 -> parseInt()로 숫자로 형변환가능(명시적 형변환)

---

연산자

대입연산자, 산술연산자, 연결연산자, 복합연산자, 증감연산자, 논리연산자, 비교연산자(자료형타입까지 비교하려면 = 하나 더 추가), 대소비교, typeof(자료형 종류를 알려줌), null병합연산자(null이나 undefined가 아닌 것 선택)

 

---

변수에 함수를 담을 수 있다.

let hello = function() {
	return "안녕하세요 여러분.";
};//이처럼 변수에 담는 것을 함수표현식이라고 함!(함수선언식x)

const helloText = hello();
console.log(helloText);

호이스팅 : 함수선언식 프로그램실행전에 코드최상단에 끌어올려진다

함수선언식을 사용하면 호이스팅이 발생한다.

 

화살표 함수

let helloA = () => "안녕하세요 여러분";
//값만 리턴한다면 다음과 같이 써도 된다.

console.log(helloA());

화살표함수도 호이스팅의 대상이 아니다.

 

 

---

콜백함수

결과적으로 badCallback호출 = cry호출이 된다.

콜백함수는 함수의 파라미터로 함수를 넘기는 것이다.

function checkMood(mood, goodCallback, badCallback) {
	if (mood === "good") {
    goodCallback();
    } else {
    badCallback();
    }
}

function cry() {
	console.log("Action :: Cry");
}

function sing() {
	console.log("Action :: Sing");
}

function dance() {
	console.log("Action :: Dance");
}

checkMood("sad", sing, cry);

---

객체

* 객체생성하는 방법

객체리터럴방식 {}

생성자방식 new Object()

key: "value" 쌍 하나가 객체프로퍼티이다.(객체가 가진 데이터)

key는 중복되지 않도록 작성하기.

 

* 점표기법

객체이름.프로퍼티이름

* 괄호표기법

객체이름["프로퍼티이름"] 반드시문자열형태로 감싸줘야한다. 키가 고정되어있지 않을 때, 함수에 파라미터를 전달할 때 쓰이면 편리하다.

 

표기법으로 프로퍼티를 추가할 수 있다.

수정도 가능하다.

 

delete 객체명.프로퍼티명 으로 삭제가능. 하지만 메모리에서 삭제되지 않기 때문에 null로 재할당해주어야 메모리에서 삭제된다.

const person = {
    name: "",//멤버
    age:25,//멤버
    say: function() {
        console.log("안녕");
    }//메서드->방법
};

person.say();
person["say"]();

${"age" in person} persond에 age가 있다면 true, 없다면 false반환한다.

---

배열

* 배열 생성하는 방법

new Array() 생성자호출로 만들기

[] 배열리터럴로 만들기

 

자료형이 달라도 여러종류를 담을 수 있다.

키가 없으므로 인덱스(순서)로 접근할 수 있다.

 

.push함수를 사용하면 배열마지막에 원소를 추가할 수 있다.

---

반복문

순회 - 배열의 모든요소를 한번씩접근

for(let i = 0; i < arr.length; i++) {
	//반복 수행할 명령
	console.log(arr[i]);
}

Object.keys(객체) 객체의 키들을 배열로 반환한다.

Object.values(객체) 객체의 value들을 반환한다.

---

배열내장함수

const arr = [1,2,3,4];
const newArr = [];

arr.foreach(function (elm) {
	newArr.push(elm * 2);
});

const arr = [1,2,3,4];
const newArr = arr.map((elm) => { //map은 배열을 리턴 한다.
	return elm * 2;
});

간단하게 존재여부 확인

arr.includes(number); ===연산자로 찾는다.(타입확인한다)

 

arr.indexof(number) 일치하는 값의 인덱스를 반환한다. 없다면 -1 반환

 

arr.findIndex((elm)=>elm.color === "red"); 일치하는 요건을 가진 첫번째 인덱스를 반환한다.

요소 자체를 찾으려면 findIndex대신 find 사용한다.

 

filter 메서드 : 전달한 콜백함수가 true를 반환하는 모든 요소를 배열로 반환

slice 메서드 : arr.slice(0,2); 0~ 2-1(1)까지 잘라서 새 배열로 반환한다.

concat 메서드 : arr1.concat(arr2) arr1에 arr2를 붙인다

sort 메서드 : chars.sort(); 정렬된 배열을 반환하는게 아니고, 원본 배열을 정렬한다!

join 메서드 : arr.join(); 쉼표로 구분되어 문자열 하나로 리턴한다. 파라미터에 " "를 넣으면 구분자로 공백이 들어간다.