25.2. 프로그램언어 자바스크립트(JavaScript)의 템플릿 리터럴과 문자열 포매팅

함수 선언과 사용법

함수는 프로그래밍에서 중요한 개념 중 하나로, 특정 작업을 수행하는 코드 블록을 의미합니다. 함수를 선언하고 사용하는 방법에 대해 알아보겠습니다.

먼저 함수를 선언하는 방법은 다음과 같습니다. 함수는 function 키워드를 사용하여 선언하며, 함수명과 매개변수를 지정할 수 있습니다. 함수 내부에는 원하는 작업을 구현하고, 필요에 따라 값을 반환할 수 있습니다.


function greet(name) {
    return "Hello, " + name + "!";
}

위의 예제에서는 ‘greet’라는 함수를 선언하고 있습니다. 이 함수는 ‘name’이라는 매개변수를 받아들이고, 해당하는 인사말을 반환합니다.

함수를 사용하는 방법은 함수명을 호출하고 필요한 매개변수를 전달하는 것입니다. 이렇게 호출된 함수는 정의된 작업을 수행하고, 필요에 따라 값을 반환합니다.


var message = greet("Alice");
console.log(message); // 출력: Hello, Alice!

위의 예제에서는 ‘greet’ 함수를 호출하고 있습니다. “Alice”라는 매개변수를 전달하여 함수를 실행하고, 반환된 값을 ‘message’ 변수에 저장한 후 콘솔에 출력하고 있습니다.

이벤트 핸들링

이벤트 핸들링은 웹 개발에서 사용자의 상호작용에 대응하기 위해 이벤트를 감지하고 처리하는 과정을 말합니다. HTML 요소에 이벤트 핸들러를 등록하여 사용자의 동작에 반응하도록 만들 수 있습니다.

예를 들어, 버튼을 클릭했을 때 메시지를 출력하고 싶다면 해당 버튼에 클릭 이벤트 핸들러를 추가할 수 있습니다.


<button id="myButton">Click me</button><script>
document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked!');
});
</script>

위 예제 코드에서는 id가 “myButton”인 버튼을 클릭했을 때 ‘Button clicked!’ 메시지를 띄우는 이벤트 핸들러를 등록하고 있습니다.

객체와 프로토타입

객체와 프로토타입에 대해 알아보겠습니다.

객체는 JavaScript에서 가장 중요한 데이터 유형 중 하나입니다. 객체는 속성과 메서드를 포함하는 컨테이너로, 다양한 데이터 유형을 저장하고 조작할 수 있습니다. JavaScript에서 객체는 중괄호({})를 사용하여 만들 수 있습니다.


// 객체 생성
let person = {
  name: 'Alice',
  age: 30,
  greet: function() {
    return 'Hello, my name is ' + this.name;
  }
};

프로토타입은 JavaScript에서 객체 간의 상속을 구현하는 방법입니다. 모든 JavaScript 객체는 프로토타입을 가지며, 다른 객체의 속성과 메서드를 상속받을 수 있습니다. 모든 객체는 Object.prototype을 상속받습니다.


// 프로토타입 활용
let student = {
  major: 'Computer Science'
};// student 객체의 프로토타입 설정
Object.setPrototypeOf(student, person);// student 객체에서 상속된 greet 메서드 호출
console.log(student.greet()); // 출력: Hello, my name is Alice

배열 메소드 사용법

배열 메소드는 자바스크립트에서 배열을 다룰 때 유용하게 활용할 수 있는 기능들을 제공합니다. 이러한 메소드들을 사용하여 배열을 추가, 삭제, 정렬, 검색 등 다양한 작업을 수행할 수 있습니다.

예를 들어, 배열에 요소를 추가하고 싶을 때는 push() 메소드를 사용할 수 있습니다. 이 메소드는 배열의 끝에 새로운 요소를 추가합니다.


let fruits = ['apple', 'banana', 'orange'];
fruits.push('grape');
console.log(fruits); // ['apple', 'banana', 'orange', 'grape']

배열 메소드 중 pop() 메소드는 배열에서 마지막 요소를 제거하고 해당 요소를 반환합니다.


let fruits = ['apple', 'banana', 'orange'];
let removedFruit = fruits.pop();
console.log(removedFruit); // 'orange'
console.log(fruits); // ['apple', 'banana']

또 다른 유용한 배열 메소드로는 filter() 메소드가 있습니다. 이 메소드는 주어진 함수의 조건을 만족하는 요소들로 이루어진 새로운 배열을 반환합니다.


let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

이와 같이 배열 메소드를 적절히 활용하면 배열을 효율적으로 다룰 수 있습니다. 다양한 배열 메소드들을 학습하여 자바스크립트 프로그래밍을 보다 효율적으로 수행할 수 있습니다.

조건문과 반복문 사용법

조건문과 반복문은 프로그래밍에서 중요한 개념으로, 특정 조건에 따라 코드의 실행을 제어하거나 일정한 작업을 반복적으로 수행할 때 사용됩니다.

조건문(Conditional Statements)

조건문은 주어진 조건이 참(True)인 경우에만 특정 코드 블록을 실행하도록 하는 구문입니다. 가장 일반적인 형태로는 ‘if’, ‘else’, ‘else if’가 있습니다.


if (condition) {
    // 조건이 참일 때 실행되는 코드
} else {
    // 조건이 거짓일 때 실행되는 코드
}

예제 코드:


let num = 10;if (num > 0) {
    console.log("양수입니다.");
} else if (num < 0) {
    console.log("음수입니다.");
} else {
    console.log("0입니다.");
}

반복문(Loops)

반복문은 동일한 코드 블록을 여러 번 실행할 수 있도록 하는 구문으로, 주로 배열이나 리스트와 같은 데이터 구조를 처리할 때 사용됩니다. 'for', 'while', 'do-while' 등이 있습니다.


for (initialization; condition; increment/decrement) {
    // 반복 실행되는 코드
}

예제 코드:


for (let i = 0; i < 5; i++) {
    console.log("현재 인덱스는 " + i);
}

조건문과 반복문은 프로그래밍에서 매우 중요한 역할을 하며, 코드의 효율성과 가독성을 높이는 데 큰 도움을 줍니다.

Leave a Comment