어제에 이어 자바스크립트 기초 내용부터 배우기 시작했다.
복습을 하며 부족한 부분을 중점적으로 필기했다.

01. 변수

변수 선언 방법 3가지 및 차이점, 자바스크립트 프로그래밍 용어, 연습 문제 풀기를 했다. 이미 아는 내용이었지만 이론을 깔끔하게 정리할 수 있어서 좋았다. 특히 var, let, const의 차이점을 명확히 하고 호이스팅 및 TDZ에 대해 복습하고 정리했다. 연습 문제는 수월하게 풀었으나 let과 const를 사용할 때 생각없이 사용한다는 사실을 알게 됐다. 변할 일이 없을 것 같은 변수는 꼭 const로 선언하자!

var를 사용하지 않는 이유

내가 선언한 변수가 다른 스크립트 파일의 동명의 변수에 의해 덮어씌워져서 모른다면(인지할 수 없음) 큰 오류를 발생할 수 있음

변수 선언별 차이

• var - 변수명 중복, 재할당 가능
• let - 변수명 중복 불가, 재할당 가능
• const - 변수명 중복 불가, 재할당 불가능

자바스크립트에서 사용되는 용어

const num = 10;

1. 키워드: const
2. 식별자(키워드의 역할에 맞춰서 변할 수 있음): num
3. 연산자: =, +
4. 값: 10
5. 표현식: 10+20
6. 선언
7. 할당

호이스팅

• 호이스팅에 대해 배우고 공부한 내용을 정리한 글

세미콜론

• 세미콜론을 안 써도 자바스크립트 엔진이 자동으로 세미콜론을 붙여줌
• 하지만 의도하지 않은 일이 일어날 수 있으므로 세미콜론을 반드시 써서 하나의 문장이 끝났음을 알려주자(Prettier 활용)

---

02. 자료형(Data Type)

• 자료형: 자바스크립트에서 다룰 수 있는 값의 종류
• 크게 기본자료형(primitive datatype)와 참조 자료형(reference datatype)으로 구분
  • 기본자료형: 숫자형, 문자열형, 논리형, 특수자료형(undefined/null), 심볼(sybol)의 5가지 자료형으로 구분
  • 참조 자료형: 객체, 배열, 함수의 3가지 자료형으로 구분하여 총 6가지의 자료형으로 구분

기본 자료형(원시 타입)

숫자형

• 우리가 생각하는 수의 값(양수, 음수, 정수, 소수, 지수)
• 지수를 입력해도 십진수로 반환한다.

특수 자료형

• undefined: 자바스크립트 엔진이 다루는 값
  • 개발자가 다루는 값이 아님
  • ex) 변수를 선언하고 값을 할당하지 않았을 때 undefined를 넣어줌
• null: 의도가 있는 값
  • 개발자가 변수 공간을 만든 것을 인지하고 있음
• undefined와 null 둘 다 데이터가 없는 것

강사님께 질문 한 것

❓var로 변수를 선언했을 때 호이스팅에 의해 변수가 undefined가 되는 상황에서 undefined가 "할당"된다고 표현해도 되나?
❗실행 컨텍스트와 관련이 있는데, 지금 단계에서는 할당한다고 표현해도 됨!

심볼

절대로 중복되지 않는 유니크한 값을 생성함

const t = Symbol("회원 테이블의 고유한 id 값으로 사용하기 위해")
const a = Symbol();

• 절대로 중복되지 않는 값이 필요할 때 사용함

참조 자료형

배열

여러 개의 값을 묶어둔 값

• 자바스크립트에서 다룰 수 있는 모든 자료형의 값을 넣을 수 있음
• 순수하게 값을 묶어둠(값이 직관적이지 않음)

객체

여러 개의 값을 묶어둔 값

• 값을 (키, 값)으로 묶어둠
• 값을 꺼내 쓰는 법
  1. 마침표 연산자: scoreObj.englishScore
  2. 대괄호 연산자: scoreObj[”koreanScore”]

강사님께 질문 한 것

❓기본 자료형과 참조 자료형을 나누는 기준

❗값을 할당하는 방식이 다르다

• 기본 자료형은 값을 다이렉트로 변수 공간에 넣음
• 참조자료형의 값들은 변수 공간에 값을 다이렉트로 집어넣지 않고 값이 저장된 메모리의 주소를 집어넣음
• 즉, 참조자료형을 선언한 변수 안에는 값이 아닌 주소값이 들어가 있음

const arr1 = [10, 20];
const arr2 = [10, 20];

console.log(arr1 === arr2) // false

typeof

• 해당 변수에 들어있는 값의 자료형을 문자열로 반환해줌

let num = [];
console.log(typeof num); // object 자바스크립트의 버그

---

03. 연산자

• 자바스크립트에서는 연산자를 크게 산술, 증감, 대입, 비교, 논리, 삼항, 비트로 구분하고 있음

증감 연산자

• 전치 연산 또는 전위 연산자

  • ++num

  • ~~하기 전에

  • 할당하기 전에 증가시키고 할당해라

    let num = 10;
    const incrementNum = ++num;
    console.log(incrementNum) // 11

• 후치 연산 또는 후치 연산잔
• num++
• ~~한 후에

  let num = 10;
  const incrementNum = num++;
  console.log(incrementNum) // 10

예제

1. 변수 y에 숫자 7을 할당하세요.
   2. 후위 증가 연산자를 사용하여 y를 1 증가시키고, 증가하기 전과 후의 값을 각각 출력하세요.
   3. 후위 감소 연산자를 사용하여 y를 1 감소시키고, 감소하기 전과 후의 값을 각각 출력하세요.
   4. 전위 증가 연산자를 사용하여 y를 1 증가시키고, 증가한 값을 출력하세요.
   5. 전위 감소 연산자를 사용하여 y를 1 감소시키고, 감소한 값을 출력하세요.

let y = 7; 

console.log(y); // 증가하기 전 : 7
console.log(y++); //증가한 후 : 7

console.log(y); // 감소하기전 : 8
console.log(y--); // 감소한후 : 8

// y = 7
console.log(++y); // 증가한값 8

// y = 8
console.log(--y); // 감소한값: 7

비교 연산자

• 암묵적 형변환: 자바스크립트 엔진이 코드 실행 중 자동으로 데이터 타입을 변환하는 과정을 말함
• 동등 연산자 == 및 부등 연산자 !=는 암묵적 형변환을 하기 때문에 실무에서는 사용을 피해야함 (일치 연산자 사용하기)

---

04. 조건문

if

• 삼항연산자로 표현하는 것이 더 났다.
• if 문 내부 코드가 한줄이면 생략가능하다

if(isLoggedIn) message= "로그인 되었습니다";
else message="로그인이 필요합니다.";

• if vs. else if : 상황에 따라 다르지만 퍼포먼스적으로 else if 가 더 좋을 때가 있다. 이런 것들을 생각하면서 코드를 짜자.

switch

• break의 사용위치가 중요함
• 다음과 같이 쓸 수도 있음

const area = '제주도';
let baesongbi = 0;

switch (area) {
  case '서울':
  case '인천':
  case '남양주':
    baesongbi = 3000;
    break;
  case '강원도':
    baesongbi = 3500;
    break;
  default:
    baesongbi = 10000;
}

console.log(baesongbi);

---

05. 반복문

• 무한 루프 조심하기
  • 코드 실행 블록 안에서 반복문을 종료시키는 조건을 충족시켜 줄것

do…while

어떤 내용을 한 번은 실행시키고 반복하려고 할 때 유용하게 사용할 수 있는 문법

do{
  //무조건 한 번은 실행
  //한 번 이후에는 expr이 참이면 실행
}while(expr);

for..in

배열이나 객체를 반복할 때 사용

let arr = ["banana", "apple", "orange"];
let obj = {name:"철수", age:20};

for(let index in arr){
  console.log(arr[index]);
}

for(let key in obj){
  console.log(obj[key]);
}

for..of

배열에만 쓸 수 있음. 대신 배열의 인덱스가 아닌 값에 직접적으로 접근함

for (let value of arr) {
	console.log(value)
}

---

06. 함수

함수는 하나의 특별한 목적을 가지고 코드를 실행하도록 만드는 문법

함수 선언식

function gugudan () {}
gugudan(); // 호출

함수 표현식

익명 함수

const gugudan = function () {}
gugudan(); // 호출

기명 함수

• 함수 자체에 이름이 있기 때문에 디버깅이 쉬운 장점이 있음

const gugudan = function name() {}
gugudan(); // 호출

❓함수 선언식, 익명 함수, 기명 함수 중 어떤걸 사용해야 하나요?

❗프레임워크에서 권장하는 방법을 상황에 맞춰서 사용하기. 단, 기명 함수를 사용하는 게 정석이긴 하지만 실무에서는 익명 함수를 더 많이 사용하기는 한다.

매개변수

• 함수의 재사용성을 높여줌
• 매개변수를 받지 않는다고 해서 에러로 인식하지 않는다.
• 매개변수를 가변으로 받기
  • 문제 상황

    function add(a, b, c) {
    console.log(a+b+c)
    }
    
    add(10, 20); // 두 수만 더하고 싶을 때는 NaN이 나옴
    add(10, 20, 30);

  • 해결책(가변 인자를 처리하는 기법)

    1. 나머지 매개변수 이용

       function add(...args) {
       	let sum = 0;
       	for (let i = 0; i < args.length; i++) {
       	sum += args[i];
       	console.log(sum);
       }
       add(10, 20);
       add(10, 20, 30);

       • 나머지 매개변수와 일반 매개변수를 혼용해서 사용할때는 나머지 매개변수가 항상 마지막에 와야함

         function add(a, b, ...args) {
         	console.log(a, b, args);
         }
         add(10, 20, 30, 40, 50);

    2. arguments

       • 함수도 객체다
       • arguments : 유사배열 객체
       • Es6에서 나머지 매개변수가 나오고 난 이후에는 잘 사용되지 않는 방법

         function add() {
         
         }
         console.dir(add)

         
         

return

• 함수 내부에서만 사용할 수 있음
• 리턴 뒤의 코드는 작동하지 않음
• 리턴을 이용해서 함수의 흐름을 끊기도 함
• 하지만 궁극적인 본질은 값을 넘겨주는 것임
  • return; 의 적확한 의미는 함수 종료가 아닌 undefined 반환임
• 반환할 수 있는 데이터의 종류는 한개임

//외부 함수
function membershipCard() {
	//내부 함수
	return function () {
		return {
			name: "수코딩 온라인 사이트",
			grade: "basic"
		};
	};
};

console.log(membershipCard()());

화살표 함수

• 객체를 즉시 return 하는 법: 소괄호로 묶어주기

  const membershipCard = () => ({
  	name: "수코딩 온라인 사이트",
  	grade: "basic"
  })

• 매개 변수가 한개면 매개 변수의 소괄호를 생략할 수 있음

  const membershipCard = sitename => ({
  	name: `${sitename} 온라인 사이트`,
  	grade: "basic"
  })
  
  const membership = membershipCarp("스나이퍼 팩토리");

• 예제: 아래 함수를 return 키워드를 사용하지 않고 화살표 함수로 바꾸기

  function membershipCard() {
    return function () {
      return function () {
        return {
          name: "수코딩 온라인 사이트",
          grade: "basic",
        };
      };
    };
  }

  • 답

    const membershipCard = () => () => () => ({
      name: '수코딩 온라인 사이트',
      grade: 'basic',
    });
    
    console.log(membershipCard()()());

---

회고

• 강사님께 자바스크립트에서 자료형을 기본 자료형과 참조 자료형으로 나누는 기준을 질문 했는데 두루뭉술하게 알고 있던 내용을 확실하게 알 수 있었다.
• 증감 연산자에서 전치 연산과 후치 연산이 정확히 어떤 방식으로 작동하는지 모르고 있었는데 이제는 코드에서 어떻게 작동하는지 해석할 수 있게 됐다.
• else if 대신 if를 사용할 수 있다는 사실은 알고 있었지만 퍼포먼스가 차이가 있을 거라는 생각은 하지 못했는데 이번 기회를 통해 코드를 짤 때 성능에 대해서도 생각해보자고 다짐했다.
• for..in문과 for..of문의 차이를 명확히 몰랐는데 이번에 명확히 함
• 함수 표현식을 쓸 때 익명 함수를 더 많이 사용했는데 기명 함수를 사용하는 게 정석이라는 사실을 알게됨. 근데 기명 함수가 디버깅이 더 쉽다는데 어떤식으로 더 쉽다는 지는 잘 모르겠다.
• 매개 변수가 존재하는 이유가 함수의 재사용성을 높이기 위해서라는 사실을 알게됨
• 많은 사람들 앞에서 손들고 질문을 해서 뿌듯했다.