코딩하는라민

렛츠기릿 자바스크립트 책 #4 함수, 객체 본문

Core/JavaScript

렛츠기릿 자바스크립트 책 #4 함수, 객체

코딩하는라민 2022. 10. 22. 21:36
728x90
반응형

렛츠기릿 자바스크립트 책 #4 함수, 객체

 

 

 

 

 

§. 함수

1. 함수

- 함수 : 특정한 작업을 수행하는 코드

- 선언한다 : 함수를 만드는 행위

[ 함수를 만드는 세 가지 방법 ]
① 함수 선언문 : function 키워드 뒤에 함수 이름을 넣는 방식

function
a() { }

② 함수 표현식 : 상수나 변수에 대입하는 방식
const
b
= function() { } ;

③ 화살표 함수 : 화살표 기호를 사용해 함수를 만들 수도 있다.
const c = ( ) = > { } ;

 

- 호출한다 : 함수를 사용하는 행위.

- 선언한 함수 이름 뒤에 () 를 붙이면 함수가 실행됨.

> function a( ) { }    → 함수 a 선언
  a() ;     → 함수 호출 : a 뒤에 () 를 붙임

(없음)    → 함수가 정의되지 않아 실행 결과가 아무 것도 나오지 않음
consol.log   → 얘도 함수
parseInt    → 얘도 함수

 

- 함수 안에서 다시 함수를 호출할 수 있다.

- 함수를 호출하면 그 안에 있던 함수도 같이 호출된다.

> function a( ) {
     console.log('Ramin');
     console.log('Coding');
   }
  a();

Ramin
Coding

 

- 함수로 만들면 좋은 점 : 재사용성 향상. 코드의 양 감소.

- 함수를 여러번 호출하면 호출한 만큼 내부의 실행문이 실행됨.

 

2. 반환값과 return문

- 반환값(return value) : 함수 호출 시 나오는 결괏. 기본값은 undefined.

- return 문¹ : return 문을 추가하여 반환값을 직접 정할 수도 있음.

 ① 반환값 직접 정하기 = 정한 반환값으로 나온다.


② 반환값 정하지 않았을 때 = 반환값은 undefined로 나온다.

실행문 끝에 return undefined가 생략된 것

 

- 반환값도 이기 때문에 다른 식이나 문에 넣어서 사용 가능

- 상수나 변수에 대입 가능

undefined 는 console.log 의 반환값

 

- return 문² 역할 두 번째 : 함수의 실행을 멈추는 역할

Ramin 만 출력됨

→ return 을 중간에 삽입하면 그 위에만 실행하고, 밑에는 실행하지 않는다. 즉, 함수의 실행을 중단시킴.

 

- 조건문과 return 문을 결합하여 함수의 실행 조작하기

① 
if 문의 조건이 거짓이므로 조건문은 실행되지 않는다.
따라서 return 문이 실행되지 않기 때문에 console.log 함수가 실행.


if 문의 조건이 참이므로 조건문이 실행된다.
따라서 return 문이 실행되므로 아래의 console.log 함수는 실행되지 않는다.
결괏값은 undefined.

 

3. 매개변수, 인수

 - 매개변수(parameter)와 인수(argument)를 이용해 함수에 원하는 값 넣기

→ a 함수를 선언할 때 소괄호 안에 변수를 넣고, 함수를 호출할 때 소괄호에 원하는 값을 넣으면 함수 a를 선언할 때 입력한 변수와 연결되어 그 값이 출력된다. 따라서 parameter = 'argument' 이 둘은 같은 값이 된다는 것.
→ 따라서 parameter 자리에 들어가는 값은 변수와 같은 특성을 지닌다.
→ 함수 선언할 때 입력한 변수는 매개변수가 되고, 함수를 호출할 때 사용한 값은 인수라고 한다.

 

- 여러 개의 매개변수와 인수를 가질 수도 있음.

- 매개변수와 인수의 개수가 일치하지 않아도 됨.

① 매개변수가 인수보다 많은 경우


> function a(w, x, y, z) {    → 매개변수를 w, x, y, z 로 4개를 갖는 함수 선언
    console.log(w, x, y, z);    → 콘솔에 매개변수 w, x, y, z 를 출력
    console.log(arguments);    arguments 를 호출하면 인수가 몇개 들어있는지 확인할 수 있다.
}
a('ramin', 'dana', 'udin');

ramin dana udin undefined      매개변수는 4개인데, 인수는 3개라 매개변수가 하나 남는다. 이런 경우에는 매개변수 z의 값은 undefined 값으로 나온다.
Arguments(3) ['ramin', 'dana', 'udin', callee: ƒ, Symbol(Symbol.iterator): ƒ]     인수의 개수가 나옴. 뒤의 callee나 Symbol 은 인수가 아니므로 무시해준다.

② 매개변수의 개수가 인수보다 적을 때

→ 인수 udin 은 사용되지 못함

 

 

Q. 매개변수로 x, y, z를 받아 더한 값을 반환하는 함수 만들기

 

Q. 매개변수로 x, y, z를 받아 곱한 값을 반환하는 함수 만들기, 화살표 함수 이용.

 

 

- 함수 안에서 변수, 상수 선언하고 사용 수 있음

- 함수 밖에 위치한 변수, 상수를 사용할 수도 있음

→ 즉, 자신의 매개변수나 내부에 선언한 상수나 변수가 아니더라도 다른 상수, 변수에 접근 가능 (하지만 그렇다고 해서 모든 상수, 변수에 접근 가능한 것은 아님(추후에 나올 것))

- 순수 함수 : 자신의 매개변수나 내부 변수만 사용하는 함수


함수 내에서 상수 선언하고 사용하기


함수 밖에서 정의한 상수 사용하기

 

 

 

§. 객체 리터럴

1. 객체

- 객체 : 여러 개의 변수를 하나로 묶을 때 사용

- 객체 리터럴 : { } 를 사용해서 객체를 표현하는 것

const 객체 = {
   속성1 이름: 속성값,
  속성2 이름: 속성값,
  속성3 이름: 속성값 , 
}

 

- 변수를 사용하면 나이, 직업, 생일 등과 같은 변수명을 한번 밖에 사용하지 못하는데, 이 때 객체를 사용하게 된다면 여러 개의 변수를 하나로 묶어 여러 번 사용할 수 있다.

① 변수 사용

② 객체 사용

→ 객체 낸부에 사용되는 name, year, gender 와 같은 정보들을 '속성 property' 이라고 함

 

- 속성 이름 : 문자열, 자바스크립트의 모든 값 사용 가능(숫자, 불 값, null, undefined, 띄어쓰기, 온점 포함, 뿐만 아니라 함수(메서드), 배열, 다른 객체들 까지 사용 가능)

- 속성에 접근하는 두 가지 방법

① 온점

② 배열 처럼 [ ] 을 사용
→ 많이 사용

- 온점을 사용할 수 없는 경우 : 속성 이름이 띄어쓰기를 포함하거나, 온점을 포함하는 경우

 

2. 객체 속성 변경. 제거

- 객체 속성 값 변경하기 : 변수.속성 = 값; 

 

- 객체 속성 값 제거하기 : delete 변수.속성;

 

 

3. 메서드

- 메서드(method) : 속성 값으로 함수가 들어간 경우에 그 속성을 '메서드'라고 함

→ log 는 raminblog 객체의 메서드
→ 여태 사용했던 console.log 가 바로 이것과 같은 개념이다. 이와 마찬가지로 log가 console 객체의 log 메서드이다. 이것은 웹 브라우저에서 기본적으로 만들어 놓은 객체이기 떄문에 따로 선언하지 않아도 사용할 수 있던 것임.

 

 

4. 객체 비교

- 객체는 모양이 같더라도 생성할 때마다 새로운 객체가 생성된다.

> { } === { }
  false

→ 따라서, false 가 나온다.

 

- 객체를 비교하려면 객체를 변수에 저장해야 함.

 

 

5. 참조와 복사

- 참조 : 변수 b에 a를 대입한 경우, a의 변수의 속성 값을 변경하면 b의 변수의 속성 값도 같이 변경될 때, a와 b는 같은 객체를 참조하고 있다고 한다. 또한 a와 b, 그리고 객체 간에 참조 관계가 있다고 표현할 수 있음.

 

- 객체가 아닌 값의 경우에는 참조 관계가 생기지 않음.

- 복사(copy) : 참조가 생기지 않는 상황

→ me 의 값이 'ramin' 이었는데, you 에 me를 대입함. 그러고 나서 me의 값을 'choi'로 변경했다. 하지만 콘솔에 you 의 값을 출력하면 me 에 'choi' 를 대입하기 전의 값인 'ramin' 이라는 값이 출력된다. 참조관계가 생성되지 않았기 때문에 me 의 값을 변경해도 you 의 값이 같이 변경되지 않은 것이다.

 

 

 

Q. ' tistory' 에 접근하는 방법은?

const ramin = {
     blog : {
         one : 'naver',
         two : 'tistory',
     }
     youtube: '없음',
}
두 가지 방법이 있다.
① ramin.blog.one;
② ramin['blog']['one'];

 

728x90
반응형