Javascript 핵심 요약 정리

유튜브링크 : https://www.youtube.com/watch?v=393aQ8HZU90 

 

주석처리

대소문자 구별 및 카멜케이스(소문자로 시작) 사용한다.

주석 

// 단일라인 주석

/*

멀티라인1 

멀티라인2

*/

let(변수) , const(상수) 선언

var가 function-scouped로 전역적으로 hoisting이 일어나서 변수 선언이전에도 해당 변수를 사용할 수 있었으며 여러 문제를 야기한다.

var colorCode = "red";

let, const는 block-scoped단위로 hoisting이 일어난다.

앞으로 var대신에 let, const 문으로 변수를 선언한다.

let colorCode = "red";
const pi = 3.14;

 

JavaScript의 타입

1. 원시 값 (일반적인 변수)

타입	값(범위)	예
Boolean	true or false	const const1 = true; let value1 = true;
Null	null 로 할당	let value1 = null;
Undefined	값을 할당하지 않음	let value1;
Number	(2^53 − 1)부터 2^53 − 1까지의 수	const const1 = 0.1; let value1 = 0.1; let value2 = value1 + 1;
BigInt	(2^53 − 1)부터 2^53 − 1까지의 정수	const const1 = 1; let value1 = 1;
String	''(따옴표) , ""(쌍따옴표) , ``(백틱) 등으로 할당	const const1 = "hello"; let value1 = 'hello 영희'; let value2 = "hello 철수"; let value3 = `hello ${name}`; let value4 = "hello " + 1 +"번";

2. 객체 유형

{} 로 생성되며 "." 이하 식별자(변수, 함수, 속성)로 접근하며 데이터작업시 매우 편리하게 사용됨

let obj = {};
obj.firstName = "철수";
obj.lastName = "김";
obj.gender = "남자";
obj.age = 25;

console.log(obj.firstName);

 

JavaScript의 연산자

산술 연산자(예: +, -, *, /, %)
비교 연산자(예: ==, ===, !=, !==, >, <, >=, <=)
논리 연산자(예: &&, ||,!)
할당 연산자(예: =, +=, -=, *=, /=, %=)
조건부(삼항) 연산자(예: a ? b : c)

※ 주
"="과 "=="은 다른 연산자이다. 비교를 할 경우에는 "=="를 사용하여야 한다.
"="은 할당연산자(또는 대입연산자)로 값을 변수에 할당하는 역할을 수행한다.
"===" 연산자는 값 및 변수유형까지 동일한 지 비교한다.
"!==" 연산자는 값 및 변수유형까지 틀린 지 비교한다.

 

 

함수

자바스크립트 함수는 프로그램 전체에 걸쳐 정의되고 재사용될 수 있는 코드 블록이다. 함수는 0개 이상의 매개 변수를 입력으로 사용할 수 있으며 값을 반환하거나 반환하지 않을 수 있다.

다음은 자바스크립트에서 함수를 정의하기 위한 기본 구문이다.

function functionName(parameter1, parameter2, ...) {
  // function body
  // statements to be executed
}

 

function sayHello(name) {
  console.log("Hello, " + name);
}

sayHello("John"); // Output: "Hello, John"

 

ECMAscript 6에 소개된 함수 표현식의 약어인 화살표 함수 표현식을 사용할 수도 있다.

함수명이 있을 경우 :  함수명 = () => {}

함수명없이 즉시 실행 : () => {}

let sayHello = (name) => console.log(`Hello, ${name}`);
sayHello("John"); // Output: "Hello, John"

 

반환 문을 사용하여 값을 반환하는 함수를 정의할 수도 있다:

function add(a, b) {
  return a + b;
}

let result = add(5, 3);
console.log(result); // Output: 8

 

또한 함수를 인수로 다른 함수에 전달할 수 있으며 함수는 다른 함수를 반환할 수 있습니다. 

다음은 함수를 인자로 사용하여  콜백을 통해 특정함수를 호출하도록 하는 구조입니다.

Ajax와 같이 비동기처리 후 특정함수를 처리하도록 함수를 인자로 넘겨 로직의 흐름을 구성할 수 있습니다.

function fnCallBack(endNum, callBackFunction) {
  setTimeout(function() {
    console.log("1초간 대기");
    let sum=0;
    for (let i=0; i<endNum; i++) {
      sum += i;
    }	
    callBackFunction(sum);
  }, 1000);
}

fnCallBack(100, function(sum) {
  console.log("합", sum);
});

 

{} Object

자바스크립트에서 객체는 속성의 집합이며, 여기서 속성은 이름(또는 키)과 값 사이의 연관성이다. 객체는 여러 가지 방법으로 정의할 수 있지만 가장 일반적인 방법은 접미사 {} 집합인 객체리터럴 표기법을 사용하는 방법이며 new Object()형태로 정의 할 수 도 있다.

다음은 객체 리터럴 표기법을 사용하여 객체를 정의하는 방법의 예이다.

let person = {
  name: "John",
  age: 30,
  occupation: "Developer"
};

위의 예에서 person은 name, age, occupattion의 세 가지 속성을 가진 개체이며, 각 속성은 해당 속성과 관련된 값을 가진다.

점 표기법 또는 대괄호 표기법을 사용하여 객체의 속성에 액세스할 수 있다:

console.log(person.name); // Output: "John"
console.log(person["age"]); // Output: 30

 

개체에서 새 속성을 추가하거나 기존 속성의 값을 변경할 수도 있다:

person.address = "New York";
console.log(person); // Output: { name: "John", age: 30, occupation: "Developer", address: "New York" }
person.age = 35;
console.log(person); // Output: { name: "John", age: 35, occupation: "Developer", address: "New York" }

 

삭제 연산자를 사용하여 개체에서 속성을 제거할 수도 있다:

delete person.occupation;
console.log(person); // Output: { name: "John", age: 35, address: "New York" }

 

문자열 함수

자바스크립트에서 문자열은 텍스트를 표현하는 데 사용되는 연속된 문자이다. 문자열은 작은따옴표 또는 큰따옴표 또는 백틱(`)으로 묶는다.

다음은 자바스크립트에서 문자열을 만드는 방법의 예이다.

let message = "Hello, World!";

 

자바스크립트는 문자열을 조작하는 데 사용할 수 있는 많은 내장 메서드를 제공한다.

 

백틱(`)과 템플릿 리터럴

JavaScript 템플릿 리터럴은 ECMA스크립트 6(ES6)에 도입된 새로운 기능으로 보다 강력하고 유연한 구문으로 문자열을 만들 수 있다. 템플릿 리터럴은 작은따옴표나 큰따옴표 대신 백틱(`)으로 묶는다.

템플릿 리터럴의 주요 이점 중 하나는 문자열에 식을 ${}(으)로 묶어서 포함할 수 있다는 것이다.

let name = "John";
let age = 30;
console.log(`My name is ${name} and I am ${age} years old.`); // Output: "My name is John and I am 30 years old."

 

Number Methods

자바스크립트는 숫자 작업을 위한 다양한 메서드를 제공한다. 

 

난수

Math.random(): 0과 1사이의 난수 발생

Math.floor(Math.random() * 100) + 1;

- 1부터 100사이의 난수가 리턴됨

- 100대신에 원하는 범위의 최대값을 넣으면 난수를 구할 수 있음

- Math객체에는 abs(), round(x), ceil(x), floor(x), min(x1,x2,x3,....), max(x1,x2,x3,...)등의 수학함수들이 있다.

 

배열

javaScript 배열은 단일 변수에 여러 값을 저장하는 데 사용된다. 배열은 숫자, 문자열 및 개체와 같은 서로 다른 데이터 유형의 값을 저장할 수 있다. 배열은 []으로 선언하며 인덱스를 사용하여 배열 요소에 액세스할 수 있다. 

• push(element): 배열 끝에 추가
• pop(): 배열 끝에서 삭제

let numbers = [1, 2, 3, 4, 5];

let numbers = new Array(1, 2, 3, 4, 5);

console.log(numbers.length); // Output: 5

console.log(numbers[0]); // Output: 1
console.log(numbers[2]); // Output: 3

 

if else 조건문

특정 조건에 따라  다른 처리를 하기위해 조건문을 사용한다. 다음 예에서 다른 if 블록 내부의 코드는 가변 연령 값이 21보다 크거나 같거나하면 "술마시면 안돼"  19보다 크거나 같으면 "아직 투표할 수 없어" 그밖에는 "투표도 못하고 술도 마시면 안돼" 라는 조건문이다..

 

switch 조건문

switch 문은 식의 값을 여러 개의 경우와 비교하고 일치하는 경우 블록 내의 코드가 실행된다.

각 블록의 하단에는 break문을 사용해 다른 블록으로 실행을 막아야 한다.

 

for 반복문

 

에러처리 및 디버깅

try {
    // y변수를 선언하지 않아 예외가 발생
    let x = y + 2;
} catch (error) {
    console.log(error);
} finally {
    // 오류가 발생하던 안하던 수행하는 코드
    console.log("나는 항상 수행되는 코드다");
}

try catch문을 사용하여 예외사항을 처리하고 finally문안에 있는 코드는 오류와 상관없이 실행되는 코드

 

Map set Iterating

Map객체는 키값으로 구성되어 있으며

set(키, 값) 으로 집어 넣고

get(키)로 가져온다.

delete(키)로 삭제한다.

has(키)로 존재여부를 확인한다.

키를 정의해놓고 키를 알면 자유롭게 사용할 수 있어 매우 유용하다.

forEach, for ~ of 를 사용해서 전체 데이터를 가져올 수 도 있다.

 

 

class

class Person {
    constructor(name) {
        this.name = name;
    }
    greet() {
        console.log(`안녕, 내 이름은 ${this.name}야.`);
    }
}

let person = new Person("최프로");
person.greet();  // Output: "안녕, 내 이름은 최프로야."

생성자 생성 : `constructor`를 사용하여 생성

let person = new Person("최프로");

new문을 사용하여 Person클래스로 부터 person 객체를 생성한 뒤

person.greet(); 와 같이 person객체의 greet()메서드를 사용한다.

 

class Person {
    static species = "Homo Sapien";
    static getSpecies() {
        return Person.species;
    }
    constructor(name) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}
console.log(Person.getSpecies()); // Output: "Homo Sapien"

Person.species = "Homo A.I";
console.log(Person.getSpecies()); // Output: "Homo A.I"

Person.newProperty = 100;
console.log(Person.newProperty); // Output:100

`console.log(Person.getSpecies())`와 같이 static으로 선언된 getSpecies()메서드는

new문을 이용한 객체생성과정없이 사용할 수 있다.

 

`Person`클래스는 getSpecies()라는 메서드와 species라는 프로퍼티를 갖고 있다.

 

person객체에 Person.newProperty = 100;와 같이 프로퍼티를 추가할 수 있다.

추가된 프로퍼티는 바로 사용된다.
console.log(Person.newProperty); // Output:100

class 상속

아래의 예제에서 Student클래스는 Person클래스를 상속받았으며 new문을 사용해 student객체가 된 뒤 Person클래스의 greet()를 사용할 수 있다. 부모클래스 접근은 super키워드를 사용하고 자기 자신은 this키워드로 참조한다.

 

Arrow function 화살표함수

화살표함수로 불리우며, 최근 사용되는 함수 표기법이다.

square 함수 작성

let square = (x) => x * x;
console.log(square(5)); // 25

 

sum 함수 작성

let sum = (x, y) => x + y;
console.log(sum(2, 3)); // 5

 

hello 함수 작성

let hello = () => "Hello";
console.log(hello()); // "Hello"

 

배열 전체를 순서대로 더하는 함수

let arr = [1, 2, 3, 4, 5];
let sumArray = arr.reduce((acc, cur) => acc + cur);
console.log(sumArray) // 15

 

 

다음 >> jQuery 핵심정리

https://itcamp24.tistory.com/182

jQuery 핵심 정리