자바스크립트 함수와 객체: 개발 언어의 강력한 도구

 

 

 

안녕하세요 오늘은 자바스크립트에서 함수와 객체를 사용하는 법을 알아보겠습니다.

 

 

 

1. 함수의 정의와 호출 방법:

 

함수는 재사용 가능한 코드 블록입니다. 함수를 정의할 때는 function 키워드를 사용합니다.

 

함수 정의는 다음과 같은 구조를 가집니다:

 

function functionName(parameter1, parameter2) {
  // 함수 내부에서 수행될 코드
}

 

functionName은 함수의 이름이며, 필요에 따라 생략할 수도 있습니다.
parameter1, parameter2 등은 함수에 전달되는 매개변수(Parameter)입니다. 매개변수는 선택적으로 지정할 수 있습니다.

 

 

 

2. 함수 호출:

함수를 호출하기 위해서는 함수 이름을 사용하고 괄호 안에 필요한 인자(Argument)를 전달합니다.

 

 

함수 호출은 다음과 같은 구조를 가집니다.

 

functionName(argument1, argument2);

 

인자(argument)는 매개변수(parameter)로 전달되어 함수 내부에서 사용됩니다.

 

 

 

3.매개변수와 반환값 처리 방법:

매개변수(Parameter): 함수가 호출될 때 전달된 값을 받아들이기 위해 사용됩니다. 

매개변수는 함수 내부에서 변수처럼 활용되며, 해당 값에 접근하여 원하는 작업을 수행할 수 있습니다.

 

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

 

위 예시에서 a, b가 매개변수이며, 이들은 호출 시 전달된 인자(argument) 값을 받아들입니다.

반환값(Return Value): 함수가 실행을 완료하고 결과를 호출한 곳으로 반환하는 값입니다. 

return 키워드를 사용하여 반환값을 지정할 수 있습니다.

 

 

 

4.객체의 생성과 속성 접근 방법:

객체(Object)는 여러 속성(Property)을 그룹화한 데이터 구조입니다. 객체는 중괄호 {}를 사용하여 생성됩니다.

객체의 속성에 접근하기 위해서는 점(.) 또는 대괄호([]) 표기법을 사용합니다.

객체의 속성 값을 변경하거나 새로운 속성을 추가하기 위해서도 동일한 점 또는 대괄호 표기법을 사용합니다.

 

const person = {
  name: 'John',
  age: 30,
};

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

person.age = 35; // 속성 값 변경
person.gender = 'Male'; // 새로운 속성 추가

 

위 예시에서 person은 객체이며, name과 age는 해당 객체의 속성입니다.

위 예시에서 .name은 person 객체의 이름 속성에 접근하고, ['age']는 대괄호 표기법으로 나이 속성에 접근합니다.

위 예시에서 person 객체의 age 속성 값을 변경하고, gender 속성을 추가합니다.

 

 

 

(응용) 함수 사용 방법 - 익명 함수와 콜백 함수:

 

// 익명 함수 정의 및 호출
const greeting = function(name) {
  console.log(`Hello, ${name}!`);
};

greeting('John'); // "Hello, John!" 출력

// 콜백 함수로 활용
function processUserInput(callback) {
  const name = prompt('Please enter your name:');
  callback(name);
}

processUserInput(greeting); // 입력된 이름을 인자로 받아 인사하는 콜백 함수 호출

 

위의 예시에서는 함수안에 함수가 들어간 상태로 이런 것을 콜백함수라고 부르며 자바스크립트에서 자주 쓰입니다.

addEventListener 같은 함수가 대표적인 콜백함수이죠

 

 

 

 

(응용) 객체 사용 방법 - 메서드 추가:

 

const calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};

console.log(calculator.add(5, 3)); // 8 출력
console.log(calculator.subtract(10, 4)); // 6 출력

 

객체 안에는 객체가 있을수도 있고 함수가 있을 수도 있습니다.

 

 

 

(응용) 객체 생성자와 프로토타입 활용:

 

// 객체 생성자 함수 정의
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 프로토타입에 메서드 추가
Person.prototype.introduce = function() {
   console.log(`My name is ${this.name} and I'm ${this.age} years old.`);
};

// 객체 생성과 메서드 호출
const person1 = new Person('John', 30);
person1.introduce(); // "My name is John and I'm 30 years old." 출력

const person2 = new Person('Jane', 25);
person2.introduce(); // "My name is Jane and I'm 25 years old." 출력

 

이렇게도 가능합니다. 마치 자바 같네요

 

 

 

(응용) 객체 상속 - 프로토타입 체인:

 

// 부모 객체 생성자 함수 정의
function Animal(name) {
  this.name = name;
}

// 부모 객체의 메서드 추가
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
};

// 자식 객체 생성자 함수 정의 및 상속 설정
function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype); // 프로토타입 체인 설정
Dog.prototype.constructor = Dog; // 생성자 지정

// 자식 객체에 추가된 메서드
Dog.prototype.bark = function() {
  console.log(`${this.name} barks.`);
};

// 객체 생성과 메서드 호출
const dog1 = new Dog('Buddy');
dog1.speak(); // "Buddy makes a sound." 출력 (부모 메서드 호출)
dog1.bark(); // "Buddy barks." 출력 (자식 메서드 호출)

 

기본적인 상속도 자바스크립트로 가능합니다.

 

 

다음에는 DOM 요소를 선택하고 조작하여 웹브라우저에서 자바스크립트가 가지는 강력함을 살펴보겠습니다.

 

감사합니다.