자바스크립트 정리 - 기초

 

자바스크립트 정리 - 기초

 

 

 

명시적 형변환

• 내장함수를 이용하여 직접 형 변환
  
  

문자열 👉 숫자

Number(값)

let str1 = "10";

let strToNum1 = Number(str1);

 

(숫자가 아닌 문자열을 포함한) 문자열 👉 숫자

parseInt(값)

let str2 = "10개";

let strToNum2 = parseInt(str2);

 

숫자 👉 문자열

String(값)

let num1 = 20;

let numToStr1 = String(num1);

 

 

 

---

 

 

nullish 병합 연산자

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

let var1; // undefined
let var2 = 10;

let varr = var1 ?? var2;
// varr = 10
// undefined가 아닌 값(var2)을 varr에 저장함

 

 

• 둘 다 null or undefined가 아니면 처음에 적힌 값 반환

let var2 = 10;
let var3 = 20;

let varr = var2 ?? var3;
// varr = 10

 

 

 

• 회원가입 시스템에 자주 사용

let userName = "홍길동";
let nickName = "hihihi";

let displayName = userName ?? userNickName;
// 유저 네임이 있으면 유저 네임 저장
// 유저 네임이 없다면(undefined) 닉네임으로 저장

 

 

 

---

 

typeof 연산자

: 값의 타입을 문자열로 반환하는 연산자

let word = 1;
let a = typeof word;
// a = number

word = "hello";
a = typeof word;
// a = String

word = true;
a = typeof word;
// a = boolean

 

 

 

---

 

 

함수

⭐ Javascript는 함수를 변수에 담을 수 있다.

 

 

함수 선언문

• 보통의 함수
• 호이스팅 O

function funcA() {
   console.log("funcA");
}

let varA = funcA;
varA();

함수 표현식

• 함수를 선언과 동시에 변수에 저장
• 익명 함수
• 호이스팅 XXX
  (함수를 함수 선언문 위에서 호출할 수 없음)

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

varB();

 

콜백 함수

: 다른 함수에 인수로 전달된 함수

function main(value) {
  value();
}

main(() => {
  console.log("i am sub");
});
// main() 함수의 인자로 화살표 함수("i am sub")가 전달됨

 

 

 

• 구조가 비슷한 함수를 축약할 수 있음

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

repeat(5); // 1 2 3 4 5
repeatDouble(5); // 2 4 6 8 10


// 콜백함수의 활용
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);
});

 

 

 

---

 

 

객체(object)

 

객체 생성하기

 

1. 객체 생성자

let obj1 = new Object();

 

 

2. 객체 리터럴

let obj2 = {};

 

 

 

객체 프로퍼티

{ key: value }

let person = {
  name: "이정환",
  age: 27,
  hobby: "테니스",
  job: "FE Developer",
  extra: {},
  10: 20,
  "like cat": true,
};

 

 

객체 프로퍼티 다루기

 

1. 특정 프로퍼티에 접근하기

(1) 점 표기법

객체명.key명

let n = person.name;

 

(2) 괄호 표기법

객체명["key명"]

let n = person["name"];

 

2. 새로운 프로퍼티 추가하기

객체명.key명 = 새로운 값;

객체명["key명"] = 새로운 값;

person.job = "fe developer";
person["favoriteFood"] = "떡볶이";

 

3. 프로퍼티 수정하기

객체명.key명 = 수정할 값;

객체명["key명"] = 수정할 값;

person.job = "educator";
person["favoriteFood"] = "초콜릿";

 

 

 

 

4. 프로퍼티 삭제하기

delete 객체명.key명

delete 객체명["key명"]

delete person.job;
delete person["favoriteFood"];

5. 프로퍼티의 존재 유무 확인하기 (in 연산자)

"key명" in 객체

• boolean형

let result1 = "name" in person;
let result2 = "cat" in person;

console.log(result1); // true
console.log(result2); // false

 

 

 

 

---

 

상수 객체

: 상수에 저장된 객체

• 프로퍼티 추가, 수정, 삭제는 가능 ⭕

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

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

 

 

 

---

메서드

: 값이 함수인 프로퍼티를 말함

const person = {
  name: "이정환",

  sayHi() { // 메서드 선언
    console.log("안녕!");
  }
};

 

 

메서드 호출

person.sayHi();
person["sayHi"]();

 

 

---

 

 

출처

한입 크기로 잘라먹는 리액트