[카카오테크캠퍼스 5주차] JavaScript 선행: 개요

⏳ 2023. 5. 8. - 2023. 5. 14.

 

1. 표기법

1.1. dash-case(kebab-case)

단어와 단어 사이 -를 사용하여 구분

1.2. snake_case

단어와 단어 사이 _를 사용하여 구분

1.3. camelCase

처음 단어의 첫 문자는 소문자, 다음 단어의 첫 문자는 대문자

1.4. PascalCase

camelCase와 유사하지만, 처음 단어의 첫 문자가 대문자!

---

2. 데이터 종류

2.1. String

      

      

      

    
    

      <javascript />
    
let myName = "iam454"; // 큰 따옴표 사용
let email = 'realseogy@gmail.com'; // 작은 따옴표 사용
let hello = `Hello, ${myName}!`; // 백틱을 이용한 보간법

(보간법이라고 하는구나.. 이름도 모르고 쓰고 있었다. 😱)

2.2. Number

정수, 실수 구분하지 않고 그냥 숫자!(편함)

      

      

      

    
    

      <javascript />
    
const a = 0.1;

console.log(a + undefined); // NaN

NaN(Not a Number) : 데이터 타입은 number지만, 숫자로 표기할 수 없는 값

      

      

      

    
    

      <javascript />
    
const a = 0.1;
const b = 0.2;

console.log(a + b); // 0.30000000000000004 -> 부동소수점 연산
console.log(Number((a + b).toFixed(1))); // 0.3

2.3. Boolean

true, false 두 가지 값만 있는 논리 데이터

2.4. Undefined

값이 할당되지 않은 상태

      

      

      

    
    

      <javascript />
    
let undef;
let obj = { abc: 123 };

console.log(undef); // undefined
console.log(obj.abc); // 123
console.log(obj.xyz); // undefined

2.5. Null

값을 의도적으로 비운 상태

      

      

      

    
    

      <javascript />
    
let empty = null;

console.log(empty); // null

2.6. Object

데이터를 Key: Value 형태로 저장 { }

      

      

      

    
    

      <javascript />
    
let user = {
  // Key: Value,
  name: 'iam454',
  age: 85,
  isValid: true
};

console.log (user.name) ; // 'iam454'
console.log (user.age); // 85
console.log (user.isValid); // true


// 객체를 생성하는 3가지 방법
// 객체 생성자
const user1 = new Object();
user1.name = "iam454";
user1.age = 85;

// 생성자 함수
function User() {
  this.name = "iam454";
  this.name = 85;
}
const user2 = new User();

// 리터럴
const user3 = {
  name: "iam454",
  age: 85,
};

2.7. Array

여러 데이터를 저장 [ ]

      

      

      

    
    

      <javascript />
    
let fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'

---

3. 함수

3.1. 기명(이름이 있는) 함수

      

      

      

    
    

      <javascript />
    
function hello() {
  console.log("hello");
}

// 함수 호출
hello(); // 'hello'

3.2. 익명(이름이 없는) 함수

      

      

      

    
    

      <javascript />
    
let world = function () {
  console.log("world");
}

// 함수 호출
world(); // 'world'

3.3. 메소드

      

      

      

    
    

      <javascript />
    
let user = {
  name: "iam454",
  // 메소드(Method)
  getName: function () {
    return this.name;
  },
};

const hisName = user.getName();
console.log(hisName);
// 또는
console.log(user.getName());

---

4. 메소드 체이닝

      

      

      

    
    

      <javascript />
    
const a = "Hello";
const b = a.split("").reverse().join(""); // 메소드 체이닝

console.log(a); // 'Hello'
console.log(b); // 'olleH'