Yesterday I Learned..(2021.03.16) (Javascript 4일차) // 함수

김현재·2021년 3월 17일
0
post-thumbnail

함수 Function

특정 기능을 처리하는 Javascript code 모음

형태)

function + keyword

 사용 방법은 총 2가지.

  1. 함수를 정의내린 후 사용
 function book () {
   var title = "JS book";
   };
  1. 변수에 함수를 할당하여 사용
 var point = function (one, two) {
   var total = one + two;
   var bonus = total + 100;
   };

함수 이름 짓기

  1. 첫 문자는 영문자, $, 언더바(_)를 사용한다.
    (숫자, &, *, @, + 사용 불가)

  2. 함수 code를 읽지 않더라도 이름과 파라미터 기능을 이해할 수 있도록 시맨틱을 부여하여 작성
    (구체적으로 작성하는 것이 중요!)

  3. 동사로 시작할 것
    예) calculatePoint() --> camel case라고 한다

  4. 두 단어 이상 사용 시 명사 첫 글자는 대문자로 작성

  5. 15자 내외로 작성할 것

함수 호출하기

함수는 불러줘야 실행된다

호출 방법)

함수 이름 + (소괄호 작성)

소괄호 안에는 함수에 넘겨줄 값을 작성한다.
숫자, 글자, 함수이름을 작성할 수 있으며, 여러개 작성이 가능하다.

예)

function setValue (one, two) {
   var total  = one + two;
   };
//함수는 가시성을 위하여 위쪽에 작성 추천

setValue (10, 20);
//함수 호출

return

표현식의 평가 결과를 반환하는 기능

형태)

return 표현식 (표현식 작성은 옵션);

사용예)

function getPoint() {
   retrun 10*30;
};
   
var result = getPoint ();
//여기에다가 10*30 값을 반환한다

console.log(result);

결과 값 : 300

주의사항
return문은 표현식을 꼭 한줄에 작성해야한다.
안그러면..다른 (별개의) 것으로 인식한다..!

주석 추가 설명

작성 시나리오)
1. 코드 작성 전 우선 생각정리를 한다(기능, 시나리오 등)
2. 정리 내용을 주석으로 작성
3. 문법에 맞추어 code로 작성한다

작성 기준)
코드의 목적, 결과가 미치는 영향 작성
다른 사람들이 알 수 있도록 자세히작성

*주석을 자세히 작성하기 위해 함수 코드를 분리하는 경우도 있다

Object  추가 설명

형태)

property : {name:value}

value에는 숫자, string, boolean, function 중 아무거나 작성 가능.

Object에는 Property가 추가, 변경 가능하다.

예를 들면,

var obj={}
obj.sbc = 123;

이런식으로..


변경 방법

  1. 점과 property 이름을 사용한다.
    예)

    var obj={}
    obj,abc=123;

    -> abc라는 이름이 없으면 {abc:123}을 추가하고, abc라는 이름이 있는 경우 property의 값을 123으로 변경한다.

  2. 대괄호 사용
    obj["abc"] = 123;

  3. property이름을 변수에 작성하고 사용하기

    var book = (title : "JS book");
    var varName = "title";
    book [varName] = "HTML book";
    console.log (book);

Object Property에서 property값 추출하는 방법

상황 예)

var obj = {book : "책"};
var Value = obj.book;

위와 같이 변수명.property name을 사용하여 추출해낸다.
혹 property 상 없는 이름으로 추출 시도하였을 경우 undefined을 반환한다

예)

var obj = {book : "책"}
console.log (obj.book);
//이 경우 "책"이 도출된다

console.log (obj["sports"]);
//이 경우 undefined가 도출된다

for~in

Object에서 property 열거하는 방법

형태)

for (변수 in Object) 문장;
for (표현식 in Object) 문장;

예)

var sports = {
    soccor : "축구",
    baseball : "야구"
};
for (var item in sports)
// property name이 item에 부여됨
{
    console.log (item);
    // property name 도출
    console.log (sports [item]);
    // 도출된 property name에 할당된 value 도출
};

Built-in

JS가 code를 처리하는 영역에 값 type, 연산자, object를 사전에 만들어 놓은 것.

값 type : undefined, Null, Boolean, Number, String, Object..

즉 사전 처리 하지 않고 즉시 사용 하는 것

Built-in object

개발자 도구 sources창을 통해 볼 수 있다.

앞에서 배운 Object가 우리가 임의로 data를 만들어 낸거라면,
이것은 이미 만들어진 object를 활용해 data처리를 하는 것이 중점

Number Object

숫자 처리를 위한 함수와 property가 포함되어 있으며, 함수를 호출하여 숫자처리.
property 키로 값을 구한다.

예)

toString ()

여기서 키는 toString, value는 ()에 들어가는 함수다..

Number()

파라미터 값을 Number type로 변환 시 사용

파라미터 값이 string type여도 값이 숫자인 경우 반환이 가능하다.
값을 작성하지 않으면 0을 반환.

undefined의 경우 -> 0으로 반환
null의 경우 -> 0으로 반환
Number type으로 변환 못하는 경우 -> nan을 반환

Number 상수

상수 값은 변경, 삭제 불가.
영문 대용자 사요이 관례임

이름도출되는 값
Number.MAX_VALUE1.79769...*10의 308승
Number.MIN_VALUE5*10의 -324 승
Number.NaNNot-a-Number
Number.POSITIVE_INFINITYInfinity
Number.NEGATIVE_INFINITY- Infinity

new 연산자

object로 instance를 생성하여 반환 = 복사..하는 것

예)

var obj = new Number ();
console.log (typeof obj);

결과 : object
instance type은 항상 object임

(원래 Number()만 있으면 built-in object(함수)지만, 앞에 new가 있어서 생성자 함수(constructor)로 지칭한다)

instance 생성 목적
동일 함수 사용 시 함수의 값만 다르게 각각 가져가야되는 경우 instance 사용

예)

var oneObj = new Number ("123");
console.log (oneObj.valueOf ());
var twoObj = new Number ("123");
console.log (twoObj.valueOf());

이렇게 insance를 생성하면 source창에서 prototype만 제공해준다..
나머지는 원본을 찾아봐야됨

Primitive 값

언어에 있어 가장 낮은 단계의 값
더이상 분해, 전개 못하는 수준

Primivice type별 instance 생성 가능 여부

  • Number, String, Boolean : instance 생성 가능
  • Null, Undefined : instance 생성 불가
  • Object({key:value}) : primitive value 제공하지 않음

instance의 primitive value
인스턴스의 파라미터값을 primitive 값으로 설정한다.

var obj = new Number (456);

이 경우 파라미터값인 456이 primitive값이 된다

Primitive value를 갖는 object
Boolean, Number, String, Date


valueOf ()

Number instance의 primitive 값을 반환 시 사용
ex)

var obj = new Number ("123");
console.log (obj.valueOf ());

결과 : 123

toString ()

데이터를 String type으로 변환 시 사용
파라미터에 0을 넣어놓으면 기본값인 10진수로 숫자 표현.
파라미터 안에 숫자 2~36사이 넣어놓으면 해당 진수로 숫자 표현

ex)

var value = 20;
console.log (20===value.toString());

결과 값 :  false (primitive값은 글자기에 string으로 일치하지 않음)

console.log (value.toString(16));

결과 값 : 14 (20을 16진수로 표현)

주의사항
숫자 입력 시 꼭 점을 2개 찍어야된다
console.log(20..toString());
점을 하나만 찍게 되면 20.을 변환 대상으로 인식해서 에러가 난다..

toLocalestring ()

숫자를 브라우저가 지원하는 지역화문자 (한국어, 일본어...)로 변환

  • 지역화 지원 및 형태를 브라우저 개발사에 일임한 형태로, 지역화를 브라우저가 지원하지 않으면 toString() 로 변환된다.

toExponential ()

숫자를 지수표기로 변환하여 문자열로 반환
파라미터에 소수 이하 자릿 수를 작성한다 (0~20 사이)

예)

var value = 1234;
console.log (value.toExponential());

결과값 : 1.234e+3

파라미터에 값을 작성하지 않으면, 변환대상의 첫 자리만 소수점 앞에 표시하고, 나머지를 소수에 표기한다.
이어, e+(지수)를 표시하고, 정수에서 소수로 변환된 자릿 수를 표시한다.

다른 예)

var value = 123456;
console.log (value.toExponential(3));

결과 값 : 1.235e+5

 위의 경우 4번째 자리에서 반올림 하여 3자리로 표시한다.

toFixed ()

고정 소숫점 표기로 변환하여 문자열로 반환.
파라미터 안에는 반환할 소수 자릿 수로르 입력 (0~20)

표시방법)

  • 파라미터 값보다 소수 자릿수가 더 길면, 작성한 자릿수에서 1을 더한 위치에서 반올림.
  • 변환 대상 자릿수보다 파라미터 값이 더 크면 나머지를 0으로 채워 반환
  • 파라미터가 공란인 경우 0으로 간주하여 정수로 출력
profile
쉽게만 살아가면 재미없어 빙고!

0개의 댓글