JavaScript / 함수와 객체

1.함수

함수는 데이터를 전달받아 처리한 후 결과를 돌려주는 코드 블록이다. 

-function : 함수 선언을 표시하는 키워드

-함수 이름 : 개발자가 정하는 것으로 함수의 목적에 맞게 이름 붙임

-arg,arg2... : 함수를 호출하는 곳으로부터 값을 받는 매개 변수. 값을 받지 않는 경우 매개변수 필요 없음

-프로그램 코드 : 함수의 작업을 실행하는 자바스크립트 코드

-return문 : 함수의 실행을 종료하고 호출한 곳으로 되돌아 가면서 함수의 실행 결과를 반환하는 문

 

 

▶함수호출

함수에게 일을 지시하고 결과를 받는 것을 함수 호출이라 한다. 함수의 호출에는 2가지 방법이 있다.

 

①변수이름 = 함수이름(arg1, arg2, ..., argN); //함수 호출 후 리턴 값 받음

②함수이름(arg1, arg2, ..., argN); //함수 호출 후 리턴 값 받지 않음

 

 

 

▶자바스크립트의 전역 함수

 

①eval()함수

:eval()은 수식이나 자바스크립트 문장을 문자열 형태로 전달받아 실행한 후 결과를 리턴한다.

 

 

②parseInt()함수

:parseInt()는 다음과 같이 문자열을 숫자로 변환하여 리턴한다.

 

 

③isNaN()함수와 parseInt()함수

false가 거짓 값을 나타내는 상수 키워드 인것과 같이 NaN은 숫자가 아님을 나타내는 상수 키워드이다. isNaN()은 매개 변수의 값이 NaN인지 비교하여 맞으면 true를 리턴하는 자바스크립트 함수이다.

isNaN()은 주로 parseInt()함수의 리턴 값을 검사하기 위해 사용된다.

 

 

※eval()함수

eval()함수는 여러가지 위험성을 내포하고 있어 사용을 권하지 않는다. 하지만 문자열로 구성된 산술식을 쉽게 계산할 수 있기 때문에 여전히 사용된다. eval()을 사용하지 않으려면 무료나 상용으로 배포되는 산술 계산 자바스크립트 패키지를 사용할 것을 권한다.

 

 

 

 

 

2.객체

사람, 책상, 자동, TV, 컴퓨터등은 모두 객체이다. 객체는 자신만의 고유한 속성이 있다. 실세계에 존재하는 객체는 하나의 값으로 표현할 수 없고 여러 개의 속성과 값의 묶음으로 표현된다.

자바스크립트에서는 객체의 고유한 속성을 프로퍼티라고 부르며, 객체는 여러 프로퍼티와 값의 쌍으로 표현된다. 또한 객체는 여러 개의 함수를 가질 수 있는데 함수를 메소드라고 한다. 메소드는 다른 객체나 코드로부터 호출되며, 주로 객체 내부의 프로퍼티 값을 조작하거나 연산을 수행하고 결과를 리턴한다. 

 

 

▶자바스크립트 객체의 유형

①코어 객체 

:코어 객체는 기본 객체로서 Array, Date, String, Math 타입 등이 있으며, 웹페이지나 웹 서버 응용프로그램 어디서나 사용할 수 있다. 코어 객체 생성은 항상 new키워드를 이용한다. 객체가 생성되면 객체 내부에는 프로퍼티와 메소드가 존재하게 되며, 이들은 점(.) 연산자를 이용하여 접근한다. 객체obj의 프로퍼티와 메소드를 접근하는 코드 모양은 다음과 같다.

 

 

②HTML DOM객체

:HTML DOM객체는 HTML페이지에 작성된 HTML태그들을 브라우저가 하나씩 객체화한 것들로 HTML페이지의 내용과 모양을 제어하기 위해 사용되는 객체들이다.

 

③브라우저 관련 객체(BOM)

:브라우저 관련 객체는 브라우저의 종류나 스크린의 크기 정보를 제공하거나 새 윈도우를 생성하는 등 브라우저와 관련된 객체들이다.

 

 

 

 

 

▶배열과 Array

 

-배열

배열은 여러 개의 원소들을 연속적으로 저장하고 전체를 하나의 단위로 다루는 데이터 구조이다.

배열을 만드는 방법은 2가지로 다음과 같은 방법이 있다.

 

①[ ]로 배열 만들기

②Array 객체로 배열 만들기

 

 

-배열의 특징

①배열은 Array 객체이다.

②배열에는 여러 타입의 데이터가 섞여 저장될 수 있다.

 

 

-Array객체의 메소드 활용

메소드	설명
concat(arr)	현재 배열에 배열 arr의 원소들을 덧붙여 만든 새 배열 리턴. 현재 배열은 변하지 않음
join([separator])	배열의 모든 원소를 연결하여 하나의 문자열로 만들어 리턴. 각 원소 사이에 separator로 지정된 문자열 삽입. separator가 생략되면 "."이 사용
reverse()	원소를 역순으로 재배열하고, 이를 복사한 새로운 배열 리턴
slice(idxA[,idxB])	두 인덱스 idxA와 idxB사이이 원소들로 구성된 새 배열 리턴. 인덱스 idxB의 원소는 포함되지 않음. idxB가 생략되면 끝 원소까지 포함
sort()	문자열 배열의 경우 문자열을 사전 순으로 정렬하고 이를 복사한 새 배열 리턴. 문자열 배열이 아닌 경우 배열의 원소들을 정렬하기 위해, 원소들을 비교하는 함수를 작성하여 sort형식으로 호출해야한다.
toString()	원소들을 모두 연결하여 하나의 문자열로 만들어 리턴. 원소와 원소 사이에  "."삽입

 

 

 

 

▶Date

Date객체는 시간 정보를 담는 객체이다.

 

 

 

 

 

▶String

문자열은 자바스크립트에서 가장 많이 사용되는 데이터로서 무엇보다도 중요하다. String은 문자열을 객체로 만들어 문자열을 다루기 쉽도록 해주며 문자열을 다루는 많은 메소드를 제공한다.

String객체는 new String()을 이용하여 생성하기도 하지만, 문자열 리터럴은 자동으로 String객체가 된다. 

Sting객체는 일단 생성되면 내부의 문자열 수정이 불가능하다. 이 원칙은 String의 모든 메소드에 대해 동일하다.

String 객체의 length프로퍼티는 문자열의 길이를 알려주는 읽기 전용 프로퍼티이다. length는 문자열 리터럴에도 적용된다.

문자열은 배열처럼 [ ]연선저룰 사용하여 각 문자를 접근할 수 있다.

 

-String 활용

①문자열 비교 : ==연산자

②문자열 연결 : >, <, >=, <= 연산자는 두 문자열의 길이를 비교하는 것이 아니며, 사전에 나오는 순서를 비교한다.

③서브스트링 찾기 : '+' 연산자나 concat()메소드를 호출

④서브스트링 리턴 : slice()와 substr(), substring() 로 내부 문자열을 리턴하고 "and"를 리턴한다.

⑤문자열 변경 : replace()를 호출하여 일부 문자열을 다른 문자열로 변경 가능하다.

⑥대소문자 변경 : toUpperCase()는 문자열을 대문자로, toLowerCase()는 소문자

⑦문자열 분할 : split()은 문자열을 호출하여 여러 개의 문자열로 분할 리턴한다.

⑧문자열 앞뒤의 공백 제거 : trim()메소드는 문자열 앞뒤의 공백을 제거한다.

⑨문자열 내의 문자 알아내기 : charAt()를 호출

 

 

 

 

 

▶Math

Math객체는 수학 계산을 위해 프로퍼티와 메소드를 제공한다. Math객체는 new Math()로 객체를 생성하지 않고 다음과 같이 사용한다.

 

Math.random()을 사용하면 난수를 만들 수 있다. 

 

 

 

 

 

▶사용자 객체 만들기

개발자는 자바스크립트에서 제공하는 코어 객체 외 새로운 타입의 객체를 만들어 사용할 수 있다. 개발자가 선언하는 새로운 객체 타입을 프로토타입이라고 부른다.

 

-new Object()로 객체 만들기

자바스크립트 코어 객체 중 Object타입을 이용하면 사용자 객체를 쉽게 만들 수 있다.

 

-리터럴 표기법으로 객체 만들기

account객체는 중괄호를 이용하여 프로퍼티와 메소드를 한 번에 작성 할 수 있다. 이것을 리터럴 표기법이라고 한다. 이방법은 메소드와 프로퍼티가 블록 안에 모두 만들어지기 때문에 가독성이 높다.

 

-프로토타입의 개념과 사용자 객체 만들기 포인트

①프로토타입은 함수로 만든다.

②new로 객체를 생성하고 활용한다.