리액트 올인원-1-자바스크립트 기본

변수와 상수

// 변수
let age = 27; // 선언한다 + 초기화한다

// 만약 let age; 까지만 하고 출력한 경우 undefined가 나온다
// let은 중복 선언이 불가능
let age;
console.log(age); // undefined


// 상수
// 상수라는 것은 한번 저장된 것은 변경이 불가능하다.
const birth = '19970822';
birth = '19970101'; // 불가능하다.

// 변수 이름은 협업에 이쁘게 작성하자

자료형

// 원시타입은 기본형 타입이다(5가지)

// Number
// NaN도 Number에 포함된다.
let inf = Infinity
let mInf = -Infinity

// String
let myName = "트럼프";
let myIntroduce = "대단하다";
console.log(myName + myIntroduct); // 트럼프대단하다
console.log(`${myName}는 ${myIntroduce}`);

// Boolean
true
false

// Null
// 아무것도 없다
let empty = null;
console.log(empty); // null

// Undefined
// 선언만 되어있는 것이다.
let none;
console.log(none); // undefined

형변환

// Type Casting은 형을 다른 타입으로 변환하는 것이다.
// 10 => "10"
// 형변환에는 묵시적 형변환과 명시적 형변환이 존재한다.

// 묵시적 형변환은 JS 엔진이 알아서 형 변환을 해준다.
let num = 10;
let str = "20";
const result = num + str; // 묵시적 형 변환 발생
console.log(result); // 30

// 명시적 형변환은 개발자가 내장함수를 이용해서 직접 형 변환을 명시하는 것이다.
let str1 = "10";
let strToNum1 = Number(str1); // 10
console.log(10 + strToNum1); // 20

// 응용
let str2 = "10개"
let strNum2 = parseInt(str2); // 10 만 반영이 된다
console.log(strNum2); // 10, '개'는 제거

let num1 = 20;
let numToStr1 = String(num1); // "20"
console.log(numToStr1 + "입니다."); // 20입니다.

연산자

// == 는 값 자체만 비교를 하는 것이고, === 은 값과 타입까지 같이 비교하는 것이다.

// null 병합 연산자는 null, undefined 값을 제외하고 진짜로 있는 값만 찾아오는 연산자이다.
let var1; // undefined
let var2 = 10;
let var3 = 20;
let var4 = var1 ?? var2; // var1에는 undefined이기 때문에 var2가 저장이 된다.
let var5 = var2 ?? var3; // 2개 모두 존재하는 경우 앞에 값이 저장이 된다.

// typeof 연산자는 값의 타입을 문자열로 반환하는 기능을 하는 연산자이다.
let var7 = 1;
var7 = "hello";
let t1 = typeof var7; // string 타입

// 삼항 연산자는 3개의 항을 사용하는 것이다.
let var8 = 10;
let response = var8 % 2 === 0 ? "짝수" : "홀수"; // 짝수

조건문

if 문과 switch 문이 존재한다. switch 문의 경우 조건이 많은 경우 if 보다 직관적이다.

switch 문에는 default가 존재하고 break가 반드시 필요하다.

반복문

for (let idx = 1; idx <= 10; idx++) {
	if (idx % 2 === 0) {
    	continue;
    }
    
    if (idx >= 5) {
    	break;
    }
}

함수

function greeting() {
	console.log("오늘 한화이글스 티켓팅 망함..")
}

greeting();

 

인수는 함수에서 필요한 값을 받는 것을 의미하고 매개변수는 함수에서 필요로 하는 변수를 의미한다.

function getArea((width, height) { // 매개변수
	function another() { // 중첩함수
    	console.log("another");
    }
    
    another();
    let area = width * height;
    return area;
}

getArea(120, 200); // 인수

 

함수와 호이스팅에 대해서 알아보자. 아래와 같이 작성되어 있는 경우에도 JS는 동작한다. 일반적으로 Java같은 경우에 선언을 하지 않은 함수를 부르면 오류가 발생한다. 하지만 JS의 경우에는 호이스팅이 존재하기 때문에 가능하다. 호이스팅은 끌어올리다라는 의미이다. 따라서 내부적으로 실행전에 위로 끌어올린다. 그러기 때문에 함수를 가독성이 좋도록 유연하게 작성할 수 있다.

getArea(120, 200); // 인수

function getArea((width, height) { // 매개변수
	function another) { // 중첩함수
    	console.log("another");
    }
    
    another();
    let area = width * height;
    return area;
}

 

함수 표현식과 Arrow Function

function funcA() {
	consol.elog("funcA");
}

let varA = funcA;
varA(); // funcA 출력, 함수도 문자와 같은 값으로 JS에서는 다룬다.

let varB = function funcB() { // 이 부분에서 funcB는 생략이 가능하다.
	console.log("funcB");
}
let varB = function () { // 익명함수
	console.log("funcB");
}
varB(); // funcB
funcB(); // 불가능하다. 왜냐하면 따로 만들지 않았기 때문에

funcA와 같은 경우에는 호이스팅이 가능하지만 함수 표현식을 사용한 varB와 같은 경우에는 호이스팅이 불가능하다.

 

화살표 함수는 간결하게 사용하기 위해서 사용한다.

let varC = function() {
	return 1;
}
let varC = () => {
	return 1;
}
let varC = () => 1;

let varC = (value) => value + 1
let varC = (value) => {
	// 비즈니스 로직
	return value + 1;
}

Callback 함수

콜백함수란 자신이 아닌 다른 함수에 인수로써 전달된 함수를 의미한다. JS에서는 함수도 문자와 숫자취급이 가능하다고 했다. 따라서 함수를 다른 함수의 인수로 사용할 수 있는 것이다.

function main(value) {
	value();
}
function sub() {
	console.log("sub");
}

main(sub); // sub 출력, 여기서 sub를 콜백함수라고 한다.

 

아래와 같은 방법도 가능하다.

function main(value) {
	value();
}

main(function () {
	console.log("sub");
});

main(() => {
	console.log("sub");
});

 

콜백 함수의 활용

function repeat(count, callback) {
    for (let idx = 1; idx <= count; idx++) {
    	callback(idx);
    }
}
repeat(5, function(idx) {
	console.log(idx);
});
repeat(5, function(idx) {
	console.log(idx * 2);
});


repeat(5, (idx) => {
	console.log(idx);
});
repeat(5, (idx) => {
	console.log(idx * 2);
});

Scope

지역변수

전역변수

객체

객체 생성 방법에는 2가지가 있다.

let obj1 = new Object(); // 생성자
let obj2 = {};

 

객체 프로퍼티는 객체 속성값을 의미한다.

let person = {
    name: "트럼프",
    age: 75,
    job: "대통령"
}

// 객체 프로퍼티 다루는 방법에는 점 표기법과 괄호 표기법이 있다.
let name = person.name;
let name = person["name"];

// 새로운 프로퍼티 추가
person.extra = "미국 상남자";
person["extra"] = "미국 상남자";

// 프로퍼티 수정
person.extra = "주식쟁이";
person["extra"] = "주식쟁";

// 프로퍼티 삭제
delete person.extra;
delete person["extra"];

// 프로퍼티 존재유무 확인
let result = "extra" in person; // false

 

상수 객체에 새로운 객체를 변경시키는 것은 불가능 하다. 하지만 내부의 값 또는 프로퍼티를 추가 수정 삭제는 가능하다.

const animal = {
	...
}

animal = {"a" : 1} // 불가능

animal.age = 2l; // 추가
animal.name = "상남자"; // 수정
delete animal.color; // 삭제

 

메소드 값이 함수인 프로퍼티를 의미한다.

const person = {
    name: "트럼프",
    관세때리기() {
    	console.log("관세 90%");
    }
}
person.관세때리기();
person["관세때리기"]();

배열

// 배열을 생성하는 방법은 2가지
// 어떤 타입이든 저장이 가능하다.
let arrA = new Array(); // 생성자
let arrB = []; // 배열 리터럴

// 배열 요소 접근 방법
let itemt1 = arrB[0];
arrB[0] = "트럼프";