09009

[Javascript] 함수와 객체 본문

Front-End/Javascript
[Javascript] 함수와 객체
09009

함수

- 익명 함수 : 함수 이름을 입력하지 않고 생성

- 선언적 함수 : 함수 이름을 입력하여 생성

익명 함수 function() {  }
선언적 함수 function 함수( ) {  }

 

함수 실행

- 함수도 변수이기 때문에 가장 마지막에 입력된 값이 저장된다.

 

✍ 입력

💻 출력

선언적 함수와 익명 함수를 함께 사용할 때

선언적 함수와 익명 함수를 함께 사용할 경우, 실행 순서가 다르다.

자바스크립트에서는 모든 코드를 읽기 전에 선언적 함수를 먼저 읽는다.

 

✍ 입력

💻 출력 

선언적 함수(위의 예시 코드의 경우 함수 B)가 익명 함수(함수 A) 뒤에 있지만 위의 소스코드를 실행하면 선언적 함수를 먼저 읽기 때문에 나중에 읽은 익명함수를 실행하게 되어 익명 함수의 출력문인 '함수 A'가 출력되는 것이다.

 

 

매개변수와 반환값

✍ 입력

    <script>
        // 함수를 선언합니다.
        function f(x) {
            return x * x;
        }

        // 함수를 호출합니다.
        alert(f(3));
    </script>

💻 출력 

 

 

 

콜백 함수

- 매개변수로 전달되는 함수

 

✍ 입력

💻 출력 

위의 화면이 10번 출력된다,

 

콜백 함수는 익명 함수로 사용할 때가 많다.

 

객체

- 자료형 여러 개를 한 번에 저장

- 배열은 인덱스를 기반으로 자료를 저장하고, 객체는 키(key)를 기반으로 자료를 저장

 

• 객체 생성 예시

속성
소속팀 토트넘 홋스퍼 FC
포지션 스트라이커
등번호 7
국적 대한민국

 

 

• for in 반복문 형태

- for in 반복문을 사용하면 객체 요소를 하나씩 살펴볼 수 있다.

for (var 키 in 객체) {	
	문장
}

 

✍ 입력

💻 출력

enter를 누르면서 출력 결과를 하나씩 확인

 

 

속성과 메서드

- 요소 : 배열에 있는 값 하나하나

- 속성 : 객체에 있는 값 하나하나

 

객체 속성 중에서 자료형이 함수인 속성을 메서드라고 한다.

son 객체에는 team 속성과 eat 속성이 있는데 eat 속성의 자료형이 함수이므로 eat() 메서드라고 한다.

 

✍ 입력

객체 속성의 자료형이 함수일 때

💻 출력

 

this 키워드

객체에 있는 속성을 메서드에서 사용하고 싶을 때는 자신이 가지고 있는 속성임을 분명하게 표시해야 한다.

이 때, this 키워드를 사용한다.

아래 예시는 eat() 메서드와 name 속성 모두 person 객체 내부에 있기 때문에 this 키워드를 사용한 것이다.

 

✍ 입력

💻 출력