Javascript 주요 키워드
export default
- export :
- 모듈화된 자바스크립트에서 내보내기를 위한 키워드
- 다른 파일에서 import하여 사용 가능하도록 함
- default :
- export와 함께 사용되며, 모듈에서 기본으로 내보낼 대상을 지정
- Default Export는 하나만 존재할 수 있음
function
- function : 함수 선언 키워드
- 변수에 할당하거나 다른 함수의 인수로 전달(callback) 할 수 있음
- function으로 선언된 함수는 호이스팅되므로 선언 전에 호출 가능
function의 호이스팅
console.log(add(2, 3)); // 출력: 5
function add(a, b) {
return a + b;
}화살표 함수
callback 함수
- 다른 함수에 인수로 전달되어, 특정 작업이 완료된 후 실행되는 함수
- 주로 비동기 처리에서 실행 흐름을 정의하는데 사용
function downloadFile(url, callback) {
console.log(`Downloading file from ${url}`);
setTimeout(() => {
console.log("Download complete");
callback("fileData");
}, 3000);
}
function processFile(data) {
console.log(`Processing file: ${data}`);
}
downloadFile("https://example.com/file", processFile);
// 출력:
// Downloading file from https://example.com/file
// (3초 후) Download complete
// Processing file: fileDataconst
- const : 상수 선언 키워드 (재할당이 불가능한 변수)
- const에 함수를 할당하면 함수처럼 호출할 수 있음
- const를 사용하면 재할당을 방지할 수 있어 코드의 안전성을 높임
const에 함수를 할당하는 이유
- TypeError를 일으켜 재할당과 호이스팅을 방지
재할당 방지
const greet = () => console.log("Hello!"); // greet = () => console.log("Hi!"); // >TypeError: Assignment to constant >variable.
function의 호이스팅 방지
console.log(add(2, 3)); // TypeError: add >is not a function const add = function (a, b) { return a + b; };
const에 함수 할당하기
기본적인 방법
const square = function(x) {
return x * x;
};화살표 함수로 구현하는 방법
매개변수 없는 경우
const greet = () => {
console.log("Hello!");
};
greet(); // 출력: Hello!매개변수 있는 경우
const greet = (name) => {
console.log(`Hello, ${name}!`);
};
greet("Alice"); // 출력: Hello, Alice!재할당과 호이스팅
- 호이스팅 : 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수의 선언을 미리 처리하는 것
- 재할당 : 이미 선언된 변수에 새로운 값을 할당하는 것
- 변수를 선언하면 해당 변수는 메모리에서 특정 값을 참조하게 됨
- 특정 변수가 참조하는 값을 새로운 값으로 변경하는 것을 재할당이라고 함
- var와 let은 재할당이 가능하지만, const는 불가능(내부 값을 변경하는 것은 가능)
class
- 객체 지향 프로그래밍(OOP)을 지원하기 위해 ES6에서 도입된 문법
- 객체를 생성할 수 있는 템플릿으로, 속성과 메서드를 정의
class 예시
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
// Getter
get area() {
return this.width * this.height;
}
// Setter
set dimensions(dimensions) {
this.width = dimensions.width;
this.height = dimensions.height;
}
}
const rect = new Rectangle(10, 20);
console.log(rect.area); // 출력: 200 (Getter 호출)
rect.dimensions = { width: 15, height: 25 }; // Setter 호출
console.log(rect.area); // 출력: 375함수와 메소드의 차이
메소드는 클래스나 객체를 통해서 호출해야 하지만, 함수는 이름만으로 호출 가능
- Java(객체지향 중심)는 객체지향 언어로 class 기반 언어
- Java에서는 일반적으로 함수라는 개념 없이 메소드라는 용어 사용
- Java8 이후 람다 표현식과 메소드 참조가 도입되면서 함수형 프로그래밍 일부 지원
- JavaScript(함수 중심)는 이벤트 기반 동작을 주로 처리함
- 이벤트 기반 동작을 주로 처리하기 때문에 함수 중심 프로그래밍
- ES6에서 객체지향 프로그래밍을 지원하면서 class를 사용할 수 있음
- 함수 : 특정 작업에 대해 독립적으로 정의된 코드
- 독립적으로 존재하며, 객체나 클래스에 소속되지 않음
- 전역 또는 특정 스코프에서 동작하며, 호출만으로 실행 가능
- 입력(인자)을 받아 출력(반환값)을 계산하거나 특정 동작을 수행
- 메소드 : 클래스나 객체에 속한 함수, 객체의 동작을 정의, 주로 데이터를 처리하거나 조작하는 역할
- 객체 또는 클래스에 소속되어 있으며, 그들의 일부로 동작
- 객체(인스턴스)나 클래스와 밀접하게 연관되어 있으며, 이를 호출할 때 해당 객체 또는 클래스의 데이터를 조작하거나 활용
Jihukimme