🔍 JavaScript 기본

한 입 크기로 잘라 먹는 리액트 섹션 2 - JavaScript 기본

VsCode 플러그인 설치

1. 코드 정렬 플러그인

Prettier 를 설치하고,

Ctrl + , 를 눌러서 설정에 들어간 후, format on save 를 해준다.

강의에선Shift + S를 누르면 정렬된다구 했는데... 적용이 안되었다. 승윤선배님께서 Default Formatter를 Prettier로 바꿔줘야한다고 알려주셨다 ... 굿

2. 아이콘 플러그인

Material Icon Theme 을 설치한 후, 위에 파일 아이콘 테마 선택에서 Material Icon Theme 을 선택해주면,

더 예쁘게 바뀐 아이콘을 볼 수 있다.

3. 오류 메시지 플러그인

Error Lens 를 설치하면

에러에 대한 설명을 해주는 설정이 가능하다.

4. 라이브 서버 플러그인

Live Server 를 설치해준 후,

index.html 파일에서 Ctrl + Shift + P를 눌러서 상단에 Live Server: Open with Live Server 를 선택해주면,

브라우저에 우리가 만든 index.html 파일을 열 수가 있다.

자바스크립트 개념

1. 변수

let으로 변수를 선언한다.
중복 선언은 불가하다.

2. 상수

상수는 한 번 선언하면 바꿀 수 없는 값이다. (Uncaught TypeError가 뜬것을 볼 수 있다. )

상수는 무조건 초기화가 필요하다.

3. 변수 명명규칙

3.1. $, _ 제외한 기호는 사용할 수 없다.
3.2. 숫자로 시작할 수 없다.
3.3. 예약어를 사용할 수 없다.

JavaScript의 자료형 (Data Type)

1.1 원시 타입

1.1.1 숫자 타입

1. Infinity: 양의 무한대
2. -Infinity: 음의 무한대
3. NaN: 산술 연산 불가(not-a-number)

1.1.2 문자열 타입

템플릭 리터럴 문법 : 백틱 (``)

let introduceText = `${myName}은 ${myLocation}에 거주합니다`;

1.1.3 불리안 타입

True / False

1.1.4 null 타입

"아무것도 없다"
undefined 와는 다르게 개발자가 명시적으로 '값이 없다!' 를 표시하려고 할 때 사용한다.

let empty = null;

1.1.5 undefined 타입

초기화하지 않았거나, 존재하지 않는 값을 불러오려고 할 때 출력된다.

let none;
console.log(none);

1.1.6 심벌 타입

1.2 객체 타입

1.2.1 객체

1.2.2 함수

1.2.3 배열

형 변환

1.1 묵시적 형 변환

개발자가 직접 설정하지 앟아도 알아서 자바스크립트 엔진이 형 변환 하는 것

let num = 10;
let str = "20";

const result = num + str;

숫자와 문자열을 덧셈한 경우, 자바스크립트 엔진이 자동으로 num을 str로 해석하여 결과를 출력

1.2 명시적 형 변환

개발자가 직접 함수 등을 이용해 형 변환 하는 것

let str2 = "10개";
let strToNum2 = parseInt(str2);

문자열 -> 숫자

let num1 = 20;
let numToStr1 = String(num1);

숫자 -> 문자열

연산자 1

1.1 대입 연산자

=

1.2 산술 연산자

+, -, *, /, %

1.3 복합 대입 연산자

+=, =+, *=, /=, %=

1.4 증감 연산자

++변수명 : 전위 연산
변수명++ : 후위 연산

1.5 논리 연산자

or ||
and &&
not !

let or = true || false; //true

let and = true && false; //false

let not = !true; //false

or -> 하나만 참이면 true
and -> 두개 모두 참이면 true
not -> 반전

비교 연산자

===
!==
<
>
<=
>=

==을 두번 붙이는 이유? -> 자료형 까지 같은지를 보기 위해!

let comp1 = 1 === "1"; //false
let comp2 = 1 !== 2; //true

연산자 2

null 병합 연산자

존재하는 값을 추려내는 기능
null, undefined가 아닌 값을 찾아내는 연산자

let var1;
let var2 = 10;
let var3 = 20;

let var4 = var1 ?? var2;
let var6 = var3 ?? var2;
console.log(var4);    //10
console.log(var6);    //20

var1은 undefined 값이며, var2는 10이다. 따라서 var4는 10이 출력된다.
var3 & var2 모두 값이 있는 경우 앞에 적은 var3에 해당되는 값이 var6에 출력된다.

typeof연산자

값의 타입을 보여주는 연산자

삼항 연산자

항을 3개 사용하는 연산자
조건식을 이용해서 참, 거짓일 때의 값을 다르게 반환

let var8 = 10;

let res = var8 % 2 === 0 ? "짝수" : "홀수";
console.log(res);

참일때 -> 짝수
거짓일때 -> 홀수

조건문

1. if 조건문

if ~ else if ~ else
if로 시작하여 else로 끝나야한다.

2. switch 문

switch- case - break - default
다수의 조건을 처리할 때 if보다 더 직관작이다.

반복문

for(초기화 식 ; 조건식 ; 증감식)
for문을 그만 하고 싶을 때는 break 사용
반복의 특정 회차를 건너뛰게 만들고 싶으면 continue 사용

for (let idx = 1; idx <= 10; idx++) {
  if (idx % 2 === 0) {
    continue;
  }
  console.log(idx);

  if (idx >= 5) {
    break;
  }
}

함수

1. 함수 선언

function 함수명() {
	console.log(" 출력 값 ");
}

함수명 ();

2. 함수의 매개변수 사용

function 함수명(매개변수 1, 매개변수 2){
	let 변수 = 매개변수 1 * 매개변수 2 ;
	console.log(함수명);
}

함수명(인수 값, 인수 값);

3. 중첩 함수

함수 안에 또 다른 함수를 사용해도 된다.

function 함수1 (매개 1, 매개2) {
  function 함수2() {
    console.log("함수2");
  }

  함수2 ();
  let 변수 = 매개1 * 매개2;

  return 변수;
}

4. 호이스팅

선언문이 호출문보다 아래에 있어도 JavaScript에서는 작동한다.

함수 표현식과 화살표 함수

1. 함수 표현식

let varA = function() {
	console.log("funcB");
};

varA();

함수를 굳이 따로 선언하지 않고 변수에 바로 담아버리는 것도 가능하다.

2. 화살표 함수

=> 화살표 다음 값을 바로 반환하는 방법이다.

let varA = () => 1;

console.log(varC());

콜백 함수(Callback Function)

자신이 아닌 다른 함수에, 인수로써 전달된 함수

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

main함수의 value 매개변수 값은 sub 함수값이다.
이처럼 main이라는 다른 함수에 함수가 인수로써 들어간 함수를 콜백 함수라고 한다.

중복코드가 발생했을 때 유용하다.

function repeat(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx);
  }
}

function repeatDouble(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx * 2);
  }
}

function repeatTriple(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx * 3);
  }
}

repeat(5);
repeatDouble(5);
repeatTriple(5);

이런식으로 코드를 짜게 되면 가독성이 떨어진다.

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, function (idx) {
  console.log(idx * 3);
});

콜백 함수를 사용하면 코드가 훨씬 간단해진다.

스코프

변수나 함수에 접근하거나 호출할 수 있는 범위이다.

전역 스코프

바깥에서 선언된 변수 -> 어디서든 접근 가능

지역 스코프

함수 내부에서 선언한 변수 -> 함수 블록 외부에서 출력하려고 하면 오류

객체 1

원시 타입이 아닌 객체 타입의 자료형

1. 객체 생성

let obj1 = new Object(); // 객체 생성자
let obj2 = {}; // 객체 리터럴 (대부분 사용)

2. 객체 프로퍼티 (객체 속성)

let 함수명 = {
	key : value
    .
    .
    .
};

띄어쓰기가 있는 key인 경우 "" 큰 따옴표로 묶어줘야한다.

3. 객체 프로퍼티 다루는 방법

3.1 특정 프로퍼티에 접근 (점 표기법, 괄호 표기법)

let name = person.name; //점 표기법

let age = person ["age2"]; //괄호 표기법

존재하지 않는 프로퍼티에 접근하면 undefined 출력

3.2 새로운 프로퍼티를 추가하는 방법

person.job = "fe developer";

3.3 프로퍼티를 수정하는 방법

person.job = "educator";

person["favoriteFood"] = "초콜릿";

3.4 프로퍼티를 삭제하는 방법

delete person.job;

delete person["favoriteFood"];

3.5 프로퍼티의 존재 유무를 확인하는 방법 (in 연산자)

let result1 = "name" in person;
let result2 = "cat" in person;
console.log(result2);

객체 2

1. 상수 객체

const animal = {
  type: "고양이",
  name: "나비",
  color: "black",
};

animal.age = 2; // 추가
animal.name = "까망이"; // 수정
delete animal.color; // 삭제

2. 메서드

값이 함수인 프로퍼티이다.

const person = {
  name: "이정환",
  // 메서드 선언
  sayHi() {
    console.log("안녕!");
  },
};

배열

여러개의 값을 순차적으로 담을 수 있는 자료형

1. 배열 생성

let arrA = new Array(); // 배열 생성자
let arrB = []; // 배열 리터럴 (대부분 사용)

let arrC = [
  1,
  2,
  3,
  true,
  "hello",
  null,
  undefined,
  () => {},
  {},
  [],    // 배열은 모든 값을 다 넣을 수 있다..!
];

2. 배열 요소 접근

let item1 = arrC[0];
let item2 = arrC[1];

arrC[0] = "hello";
console.log(arrC);

배열은 0부터 세기 때문에 첫번째 요소를 0으로 불러와야한다.