[1] Javascript 기본

VSCode  확장자 추천

1. prettier : 코드 정렬

2. 파일 확장자별 아이콘 설정

3. 오류 안내

4. 수정사항 즉시 반영

 

 

변수와 상수

1. 변수

let age;
age = 30;

2. 상수

const birth = "1997.01.07";

3. 변수 명명규칙(네이밍 규칙)
3-1. $, _ 제외한 기호는 사용할 수 없다.

let $_name;

3-2. 숫자로 시작할 수 없다.

let name1;
let $2name;

3-3. 예약어를 사용할 수 없다.

let if = a; (x)
let const = 1; (x)

4. 변수 명명 가이드

let salesCount = 1;
let refundCount = 1;
let totalSalesCount = salesCount - refundCount;

 

자료형

1. 숫자형  2. 문자형  3. 참거짓  4. null  5. undefined

리터럴타입

let myName = "이정환";
let myLocation = "목동";
let introduce = myName + myLocation;	//이정환목동
let introduceText = `${myName}은 ${myLocation}에 거주합니다`; //이정환은 목동에 거주합니다.

 

형변환

묵시적 형 변환

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

const result = num + str;

명시적 형 변환

// -> 문자열 -> 숫자
let str1 = "10";
let strToNum1 = Number(str1);

let str2 = "10개";
let strToNum2 = parseInt(str2);	//문자열 생략

// -> 숫자 -> 문자열
let num1 = 20;
let numToStr1 = String(num1);

 

연산자

1. 대입연산자(=)  2. 산술연산자(+, -, *, /, %)  3. 복합대입연산자(+=, -=, *=, /=, %=) 

4. 증감연산자(++, --)  5. 논리연산자(||, &&, !)  6. 비교연산자(===, !==, >, <, >=, <=)

1. null병합연산자

2. typeof 연산자

3. 삼항연산자

 

조건문

1. if/else

if (num >= 10) {
} else if (num >= 5) {
} else {
  console.log("조건이 거짓입니다!");
}

2. swtich

switch (animal) {
  case "cat": {
    console.log("고양이");
    break;
  }
  case "dog": {
    console.log("강아지");
    break;
  }
  default: {
    console.log("그런 동물은 전 모릅니다");
  }
}

 

반복문

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

 

함수

// 함수
let area1 = getArea(10, 20);
console.log(area1);

let area2 = getArea(30, 20);
console.log(area2);

getArea(120, 200);

// 호이스팅
// -> 끌어올리다 라는 뜻
function getArea(width, height) {
  function another() {
    // 중첩 함수
    console.log("another");
  }

  another();
  let area = width * height;

  return area;
}

 

함수표현식/화살표 함수

1. 함수표현식 : 값으로써 함수 생성

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


//varB(); 함수표현식은 호이스팅x
let varB = function () {	//함수명 생략가능
  console.log("funcB");
};

varB();	//funcB

2. 화살표 함수

let varC = (value) => {
  console.log(value);
  return value + 1;
};

console.log(varC(10));

 

콜백함수

메인함수가 원하는 타이밍에 실행시키는 함

function main(value) {
  value();	//i am sub
}
function sub(){	//=콜백함수
  console.log("i am sub");
}

//간결한 표현식
main(() => {
  //   console.log("i am sub");
});

활용 (유사하게 반복되는 함수에 활용)

function repeat(count, callback) {
  for (let idx = 1; idx <= count; idx++) {
    callback(idx);
  }
}

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

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

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

 

스코프

1. 전역 스코프 : 전체 영역에서 접근 가능

2. 지역 스코프 : 특정 영역에서만 접근 가능

let a = 1; // 전역 스코프

function funcA() {
  let b = 2; // 지역 스코프
  console.log(a);
}

 

객체

객체 : 여러값을 동시에 저장할 수 있는 자료형 (↔️원시타입)

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

// 2. 객체 프로퍼티 (객체 속성)
let person = {
  name: "이정환",
  age: 27,
  hobby: "테니스",
  job: "FE Developer",
  extra: {},
  10: 20,
  "like cat": true,
};

// 3. 객체 프로퍼티를 다루는 방법
// 3.1 특정 프로퍼티에 접근 (점 표기법, 괄호 표기법)
let name = person.name;
let age = person["age2"];

let property = "hobby";
let hobby = person[property];

// 3.2 새로운 프로퍼티를 추가하는 방법
person.job = "fe developer";
person["favoriteFood"] = "떡볶이";

// 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);

1. 상수객체 : 상수에 저장된 객체의 property 추가, 수정, 삭제 가능

2. 메서드

 

배열

// 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);

 

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 | 이정환 Winterlood - 인프런