[React] JavaScript 기초 (변수/상수/조건문/함수/콜백함수)

뭔가 허전하길래 만들어봤다.

<Udemy 리액트 챌린지 1주차>

이번에 유데미에서 리액트 강의를 듣고 기술 블로그를 정리하는 챌린지를 진행하길래 덥썩 참가 신청을 했다.

그리고 노션에 내용을 정리하며 강의를 들었다! 이 기회에 블로그도 가꾸고 리액트도 배우고 인강 완강도 하는 멋진 성과를 이뤘으면 좋겠다!

---

JavaScript 기본

JavaScript는 웹사이트에 활기를 불어넣고 실제로 움직일 수 있게 할 수 있는 언어이다. 이번 포스팅에서는 JavaScript의 변수, 자료형, 연산자, 조건문, 함수 등의 기본적인 내용을 정리해봤다. 이미 알고있는 개념이기 때문에, 타 언어들과 조금씩 다른 문법에 대해서만 짚고 넘어간다.

Hello JavaScript 🙌

• 웹사이트에 활력을 부여-실제로 움직일 수 있게 함. alert, server에서 값 받아오기 등
• javascript - javascript엔진이 읽어서 동작시킴 → 웹브라우저에 내장되어있다.
• 구글 크롬의 V8* : 자바스크립트 엔진, 나중에 아주 큰일을 내니까 기억해두기!
• 브라우저의 개발자도구 (F12) 를 통해 실습가능 → Console 탭에서 간단한 실습 가능
• console.log("안녕! 자바스크립트") : 콘솔에 출력
• CodeSandBox : 온라인 코드 에디터 > 수업 실습에 사용하는 에디터이다!

CodeSandbox

---

변수와 상수

• 변수 선언 방법 : let 변수이름; , var 변수이름;
  • 변수 : 계속해서 값이 바뀔 수 있는 저장소
  • ex) let age = 25; , var age = 25;
    → var는 동일한 변수명으로 변수를 여러개 선언할 수 있다. 나중에 혼란을 야기할 수 있기 때문에 let을 쓰는게 좋다.
  • 변수명에 ‘_’ 과 ‘$’ 제외 모든 기호 사용 불가능 (^age 불가)
  • 맨 앞에 숫자 불가능 (6age 불가)
  • 예약어 불가능 (if, else, for ..등)
• 상수 선언 - 상수는 readonly, 선언 이후 변경 불가능. 선언할 때 초기화 해야한다.
  • 선언 방법 : const age = 25;

자료형

• Primitive : Number, String, Boolean, Undefined, Null
  → 한번에 하나의 값만 가질 수 있음, 하나의 고정된 저장공간 이용
  let num = 25;
• Non-Primitive : Object, Array, Function
  → 한번에 여러 개의 값을 가질 수 있음, 여러개의 고정되지 않은 동적 공간 사용
  let array = [1, 2, 3, 4];

Primitive DataType (원시 타입)

let age = 25;    // 정수
let tall = 159;  // 실수

let inf = Infinity;      // 무한의 값
let minusInf = -Infinity // 무한 음수

let nan = NaN;    // Not a Number : 잘못된 입력으로 계산을 할 수 없음

let name = "Youmin";    // 문자열, 작은 따옴표나 큰 따옴표
let name2 = `Kim ${name}`;   // 템플릿리터럴 : 문자열에 변수의 값을 넣을 수 있음

let isSwitchOff = true;    // boolean : true/false

let b;           // undefined -> 아무런 값을 할당하지않은 상태
let a = null;    // null이라고 대입해줘야함. 안하면 undefined

형 변환

let numberA = 12;
let numberB = "2";

console.log(numberA * numberB);    // = 24

묵시적 형변환
→ 자바스크립트 엔진이 스스로 형변환 하여 문자열 “2”를 숫자 2로 계산함

let numberA = 12;
let numberB = "2";

console.log(numberA + numberB);  // = 122

→ 덧셈연산은 숫자를 문자열로 변환하여 수행

 

명시적 형변환 

console.log(numberA + parseInt(numberB));  // = 24

: numberB를 숫자로 변환하고 싶으면 parseInt() 함수를 사용해 형 변환을 해야한다.

---

연산자

• 대입 연산자 = : let a = 1;
• 산술 연산자 : 사칙연산 +, -, *, / (몫), % (나머지)
• 복합 연산자 : +=, *=, -=, /= : 산술 + 대입
• 논리 연산자 : boolean을 위한 연산자
  console.log(!true) → false : boolean 값 반전
  && → AND 연산, 둘 다 참일 때만 true
  || → OR 연산, 둘 중 하나만 참이어도 true
• 비교 연산자 : 크기 대소 비교
  a == b → a와 b의 값이 같으면 true
  a === b → a와 b가 자료형까지 같아야 true
  a != b → a와 b가 다르면 true
  • ex) 1 != '1' → false : 값이 동일하기 때문에 1과 ‘1’은 같음, 자료형까지 체크해야 정수 1과 문자열 ‘1’이 다르다는 결과를 얻을 수 있다.
    a !== b → a와 b가 값과 자료형까지 다르면 true
    a > b→ a 보다 b가 크면 true
    a < b → a가 b보다 작으면 true
    a >= b → a가 b와 같거나 크면 true
    a <= b → a 가 b와 같거나 작으면 true
• typeof 변수명 : 어떤 타입인지 알 수 있는 연산자

  • let a = 1; let b = '1'; 
    console.log(typeof a); // number 리턴 
    console.log(typeof b); // string 리턴

• null 병합 연산자 : 값이 null인 경우를 처리해주는 연산자
  

  • let a; 				// undefined
    a = a ?? 10; 		// a가 null이거나 undefined이면 a에 10 대입 
    console.log(a); 	// 10 출력

증감 연산자 : 숫자형에만 사용가능

후위 연산

a++ : a의 값 1 증가 (a += 1)
a-- : a의 값 1 감소 (a -= 1)
→ 증감연산자 사용한 다음 줄에 값 증가/감소

전위 연산

++a : a의 값 1 증가
—-a : a의 값 1 감소
→ 증감연산자를 사용한 줄부터 값 증가/감소

차이

// 후위 연산
let a = 10;

console.log(a++);

👉 후위연산 → 10 출력
console.log(a++); 다음 줄부터 a가 1 증가한 값이 a에 적용되기 때문에 해당 줄에선 10이 출력되고, 그 다음 줄 부터 a의 값은 10이 된다.

// 전위연산
let a = 10;

console.log(++a);

👉 전위 연산 → 11 출력
console.log(++a); 줄에서 바로 a의 값이 증가하기 때문에 11이 출력된다.

---

조건문

let a = 3;

if (a > 7){
    console.log("7보다 큼");
} else if (a > 5){
    console.log("7이하, 5보다 큼");
} else {
    console.log("5이하임");
}

• if ~ else if ~ else 이미 다 아는 문법이라 설명 생략..

let country = "ko";
switch(country){    // country를 case문으로 조건 확인
  case 'ko':
    console.log("한국");
        break;
  case 'jp':
    console.log("일본");
        break;
  case 'uk':
    console.log("영국");
        break;
    default:  // 그외
    console.log("미분류");
        break;
}

• switch-case : 여러 조건 걸기 편함~~
  default : 조건 외 (else와 같음)

---

함수

// 넓이 = 너비 * 높이를 구하는 소스
//-  사각형 1
let width1 = 10;
let height1 = 20;
let area1 = width1 * height1;

console.log(area1);
//- 사각형 2
let width2 = 20;
let height2 = 30;
let area2 = width2 * height2;

console.log(area2);

👇 반복되는 부분 함수화

// 넓이 = 너비 * 높이를 구하는 함수 선언
function getArea(width, height){
        let area = width * height;    // 지역변수 : 함수 내부 변수는 외부에서 접근 불가능
    return area;
}

//- 사각형 1
let width1 = 10;
let height1 = 20;
console.log(getArea(width1, height1));    // 함수 호출

//- 사각형 2
let width2 = 20;
let height2 = 30;
console.log(getArea(width2, height2));    // 함수 호출

• function 함수명(매개변수1, 매개변수2 ...) { ..함수 작동 로직.. }
  💡 함수선언 시 파이썬처럼 매개변수의 자료형을 입력할 필요가 없다!
• 지역변수 : 함수 내부에서 선언되어 함수 내부에서만 사용가능, 외부에서 접근 불가능
• 전역변수 : 함수 외부에서 선언되어 어디에서든 호출 가능

함수 표현식 & 화살표 함수

• 함수 표현식 : 무명함수를 변수에 담는 방식

function hi(){
    return "하이";
};  // 함수 선언식
let hello = function(){
    return "헬로";
};  // 함수 표현식

console.log(hello);    // 출력 : hello(){} -> 함수 담고 있는 것 확인 가능 

const helloText = hello(); // hello() 의 리턴 값이 변수에 담김
console.log(helloText);    // 출력 : "헬로"

• 함수선언식-함수표현식 차이

console.log(helloB());  // "하이" 정상 출력
// console.log(helloA()); // 오류 발생 (함수표현식은 호이스팅 발생 X)
let helloA = function(){
    return "헬로";
};  // 함수 표현식

function helloB(){
    return "하이";
};  // 함수 선언식

→ 함수 선언식으로 만들어진 함수는 선언부 앞에서 호출 가능하다. (함수선언식 👉 호이스팅 됨)

• 호이스팅(hoisting) : 프로그램 실행 전에 var 변수와 함수 선언을 해당 스코프의 최상단으로 끌어올린 것처럼 실행한다. 때문에 함수 선언부 위에서 함수 호출이 가능하다.
  → 함수 표현식으로 만들어진 함수는 함수 선언부 위에서 호출이 불가능하다. (호이스팅이 이루어지지 않음)
• 화살표 함수 : 무명함수를 간단하게 작성할 수 있도록 해줌

let helloA = () => {
    return "헬로";
};

→ 구현부가 한줄이면 한줄로도 작성가능  let helloA = () => "헬로";

→ 화살표 함수도 호이스팅 대상이 아니다!

콜백 함수

• 콜백함수 : 함수의 매개변수로 함수를 넘겨주는 것

// 기분에 따라 다른 동작을 하는 함수
function checkMood(mood){
    if(mood == "good"){
        // 기분 좋을 때 하는 동작
        sing();
        } else {
        // 기분 안좋을 때 하는 동작
        cry();
    }
}
function cry(){
    console.log("ACTION :: CRY");
}

function sing(){
    console.log("ACTION :: SING");
}

function dance(){
    console.log("ACTION :: DANCE");
}

checkMood("good");

→ 기분 좋을 때/안 좋을 때 할 수 있는 동작이 sing() 또는 cry()로 고정되어있음.

👇 좀 더 융통성있게 함수를 매개변수로 받아, 원하는 동작을 할 수 있도록 수정

// 기분에 따라 다른 동작을 하는 함수
function checkMood(mood, goodCallback, badCallback){
    if(mood == "good"){
        // 기분 좋을 때 하는 동작
        goodCallback();
        } else {
        // 기분 안좋을 때 하는 동작
        badCallback();
    }
}

checkMood("good", sing, cry);  // 파라미터로 함수 전달
checkMood("good", dance, cry); // 파라미터로 함수 전달

• 함수를 매개변수로 받을 수 있는 콜백함수로 수정!
  매개변수로 함수를 전달 → mood 가 good일 경우 수행할 함수 지정 가능(👉 sing() 또는 dance() 동작)

---

출처 : Udemy '한입 크기로 잘라먹는 리액트' (이정환)