Web - 7) JavaScript 함수와 객체

WEB

함수와 객체

함수 개요와 내장 함수

함수 개요

함수는 특정 작업을 기술하는 곳으로 함수명(인수리스트) { } 로 구성되며 실행결과는 return문을 사용해서 반환함

또한 재사용성과 모듈화를 제공

함수를 사용할 때 반드시 알아야 할 3가지 사항은 다음과 같음

• 함수가 하는 일 : 함수명
• 함수 인수의 개수와 타입 : 인수리스트
• 함수의 실행결과 타입(리턴타입) : return문

내장 함수

자바스크립트에는 자주 사용되는 다양한 내장 함수들이 있음

parseInt(), parseFloat(), isNaN(), isFinite(),alert() 등

예)
alert("메세지 내용");

사용자 정의 함수

사용자 정의 함수는 특정 작업을 처리하기 위한 절차나 나열한 함수로 필요에 따라서 작성함. 사용자 정의 함수는 var 함수명 = function() {} 과 같은 형태로 작성하며, 작성한 함수를 사용할 때는 함수명()과 같이 함수를 호출함

 

일반 함수

일반 함수는 이름을 붙여서 정의한 함수입니다. function 키워드를 사용하여 선언하며, 호출 시에는 함수 이름을 사용함

function add(a, b) {
  return a + b;
}
console.log(add(5, 3)); // 8

 

익명함수

익명 함수는 이름이 없는 함수로. 함수 표현식으로 정의하며, 변수에 할당하거나 다른 함수의 매개변수로 전달할 때 사용함

이름이 없다는 것은 특정 경우에만 사용하고 사용 후 자동으로 제거 되기에 메모리 관리에도 좋음

주로 이벤트처리(콜백함수), 즉시실행 함수, 클로저, 함수 표현식에 사용됨

 

이름이 없기 때문에 변수에 넣어서 사용하거나 함수의 인수로 사용됨

const multipl = function(a, b) {
  return a * b;
};
console.log(multipl(4, 6)); // 24

 

콜백함수

이벤트에 반응하는 함수로 이벤트가 발생하면 자동으로 실행됨

다른 함수에 매개변수로 전달되어, 그 함수가 작업을 완료한 후 호출되는 함수

비동기 작업이나 이벤트 처리에서 자주 사용됨

 

즉시 실행함수(Self-Invoking Functions)

함수 정의와 동시에 실행하는 함수로, 함수 호출 없이 자동으로 실행됨

(function(){})(); 과 같은 형태로 함수 선언부와 바디를 ()로 싸서 선언함

예)
(function() {var x = "Hello";}();

클로저

즉시실행 내부함수로 함수의 캡슐화, 런타임 실행시 인자 값을 넘겨서 자동 동작되는 작업에 사용됨

함수 안에 리턴값으로 정의되는 익명 함수로 카운터 딜레마에 사용됨

클로저는 함수와 그 함수가 정의된 환경을 기억하는 기능임. 클로저를 사용하면 함수 내부의 변수에

접근할 수 있으며, 함수가 외부에서 호출되더라도 내부 변수의 상태를 유지할 수 있음.

예)
var func1 = function(){
	return function(){
    	return 1;
    }
;}();

 

카운팅 딜레마

전역변수와 지역변수 스코프 문제로 전역변수는 웹 페이지 내에서 긴 스코프를 가져서 해당 페이지가 서비스되는

동안 사용 가능한 반면, 접근이 쉬워서 보안상 취약하다는 문제점을 갖음

반면에 지역변수는 함수내의 스코프만 갖기 때문에 다른 함수에서 접근할 수 없어서 보안상 더 좋음

또한 지역변수는 해당 함수의 사용이 끝나면 사라져서 메모리 관리도 좋음

 

전역 변수

let count = 0;

function test1() {
  count++;
  return count;
}

 

지역 변수

function test1() {
  let count = 0;
  count++;
  return count;
}

 

클로저를 사용한 카운팅 딜레마 처리

즉시실행함수와 내부함수를 결합한 클로저를 사용해서 변수의 보안 기능과 누적 기능을 모두 충족시킬 수 있음

클로저의 원리는 딱 1번만 실행되는 즉시실행함수를 사용해서 자식인 익명 내부함수가 부모함수의 스코프에 접근함

var add1 = (function () { // 부모함수
	var counter = 0;
    return function () {
    	counter += 1; 
        return counter;
    } // 익명 내부함수
})();

add1(); counter = 1
add1(); counter = 2
add1(); counter = 3

// counter 변수 접근 안 됨

객체

자바스크립트에서 객체는 데이터를 저장하고 조작하는 데 사용하는 주요 구조임.

객체는 여러 속성(property)과 메서드(method)를 포함할 수 있으며,

객체를 사용하면 관련된 데이터를 그룹화하고 조작할 수 있음

var 객체변수명 = {프로퍼티 : 값, 프로퍼티 : 값, ...};

예)
var test = {"id" : "aaa@aaa.com", "password" : "123"};
var test = {id : "aaa@aaa.com", password : "123"};
둘 다 가능

 

객체 사용(접근) : 프로퍼티나 메소드를 사용해서 접근

점 표기법 (Dot Notation)

점 표기법을 사용해 객체의 속성이나 메서드에 접근

객체명.프로퍼티명

var test = {id : "aaa@aaa.com", password : "123"};

test.id;

 

대괄호 표기법 (Bracket Notation)

객체명["프로퍼티명"]

var test = {id : "aaa@aaa.com", password : "123"};

test["id"];

 

프로퍼티에 접근해서 프로퍼티 값을 얻어내거나(겟팅) 변경하거나(세팅) 프로퍼티를 생성(추가)할 수 있음

프로퍼티 값 게팅 : 객체명.프로퍼티명
프로퍼티 값 세팅 : 객체명.프로퍼티명 = 새값;
새 프로퍼티 생성(추가) : 객체명.새프로퍼티명 = 값;

 

메소드를 사용한 객체의 동작에 접근할 때는 객체명.메소드명()과 같이 씀

 

객체의 프로퍼티 반복 : for in

for(var 속성저장변수 in 객체명){}

예)
for(var t1 in test){
	test[t1];
}

 

객체 프로퍼티 삭제 : delete 연산자

객체 프로퍼티를 삭제할 때는 [delete 객체.프로퍼티명]과 같이 delete 연산자를 사용함

예)
var test = {name:"바나나", subName:"kick"};

delete test.subName; // test객체의 subName프롶퍼티 삭제

 

객체 비교

두 객체가 동일한 참조(객체주소가 같으면)를 가지고 있으면 같은 객체임

객체가 가진 값이 같더라도 객체를 각각 생성한 경우 두 객체는 서로 다른 객체임

const obj1 = { name: "바나나" };
const obj2 = { name: "바나나" };
const obj3 = obj1;

console.log(obj1 === obj2); // false (서로 다른 객체 참조)
console.log(obj1 === obj3); // true (같은 객체 참조)

 

객체의 내용이 같은가를 비교할 때는 보통 두 객체가 문자열(String) 타입일 때 === 연산자를 사용해서 비교함

자바스크립트에서 ==은 값이 같은가를 비교 ===은 값과 타입이 같은가를 비교할 때 사용함

문자열 비교에서는 ===을 사용하는 것을 권장함

값을 비교할 때는 타입이 일치하는지 엄밀하게 비교하는 것이 프로그램의 안정성을 주기 때문에

일반적인 값을 비교할 때도 ===을 사용하는 것이 좋음

 

문자열이 아닌 객체의 내용을 비교할 때는 JSON.stringify(객체) 메소드를 사용함

JSON.stringify(객체) 메소드는 객체 안에 들어있는 프로퍼티(메소드, 배열 포함)를 모두 1개의 문자열로 묶어 주기

때문에 두 객체의 내용이 같은가를 비교할 때 사용할 수 있음 

생성자 함수

샛성자 함수는 객체를 생성할 때 사용하는 틀로 해당 객체의 형태를 결정함

생성자 함수명은 클래스명을 작성하는 규칙과 같이 첫 글자가 대문자로 시작하고 단어가 바뀔 경우

다음 단어의 첫 글자를 대문자로 씀

 

생성자는 주로 프로퍼티값 게팅/세팅에 사용됨 생성자 함수 내에서 프로퍼티는 

this.프로퍼티명 = 파라미터; 와 같이 this 키워드를 사용함

 

생성자 함수 내에서 메소드를 정의할 때는 this.메소드명 = function(){};와 같이 this 키워드를 함께 사용함

메소드 정의 : this.메소드명 = function(){}

예)
this.getName = function(){return name;}

내장 객체

 

Window	열린 브라우저 창에 대한 정보를 가진 객체
Document	브라우저에 로드된 문서에 대한 정보를 가진 객체
Screen	사용자의 스크린 정보를 가진 객체
History	방문한 URL에 대한 정보를 가진 객체
Location	현재 URL에 대한 정보를 가진 객체
Navigator	브라우저에 대한 정보를 가진 객체