03. 함수와 배열

1. 함수

함수란,

입력을 받아 특정한 작업을 수행한 후 결과를 반복하는 기능을 수행한다. 

 

함수를 쓸 때 중요한 점은 

반드시 함수 하나당 하나의 기능을 수행하게끔 해야 한다는 것이다. 

 

또한,

소스를 짜는 도중 같은 코드가 2번 이상 나오는 경우,

함수로 만들어 사용하는 편이 좋다.

 

아래는 함수 선언의 기본 형태로 다음과 같이 사용한다.

함수를 호출할 때에는 다음과 같은 형태를 사용한다.

함수 호출시의 기본은

불러올 함수로 넘겨줄 매개변수(인자값)이

해당 함수의 매개변수(인자)와 같은 숫자를 가지고 있어야 한다는 점이다. 

 

그러나 가끔 함수로 넘겨줄 매개변수값을 써넣는 것을 까먹는 실수를 할 때가 있는데

그 때 사용하는 것이 디폴트 매개변수이다.

 

디폴트 매개변수는

함수 호출 시 특정 매개변수를 입력하지 않을 경우 미리 지정해둔 문구를 출력시키는 역할을 한다. 

다음과 같이 함수를 선언할 때 (=)라는 키워드를 통해 생성할 수 있으며, 

이런식으로 매개변수값을 제대로 넘겨주지 못하더라도

미리 지정된 키워드로 출력을 해준다.

디폴트 매개변수를 사용할 때에도 주의해야 하는 점이 있는데 

함수 호출 시 매개변수값 중 가장 뒷 순서에 입력되야 한다는 것이다. 

만일 다른 순서에 입력하게 되면 컴파일러는 이를 이해하지 못한 채 다음과 같은 출력을 하게 된다. 

 

함수는 반환값(return Value)라는 것이 존재하는데

이는 return이라는 키워드를 통해 사용된다.

이 반환값이란 것은 함수를 종료시키며 값을 반환하는데에 사용된다. 

다음과 같은 코드가 있다고 보자.

앞서 설명했듯 return은 반환값을 나타내는 키워드이며, 함수의 종료를 의미한다고 했다.

그렇다면 4행의 소스는 실행되지 않아야 한다.

결과값을 살펴보면 

실제로도 4행의 코드는 실행되지 않았음을 볼 수 있다.

 

다음으로 볼 것은 추상화이다.

 추상화란 프로그램에 필요한 요소만 사용하여 객체를 표현하는 것을 의미한다. 

글로만 읽어선 잘 이해가 안될테니 예시를 들고와보겠다.

여기 ID에러, PW에러, 로그인에러를 처리하는 함수들이 있다.

이 함수들은 전부 에러를 처리하지만, 에러가 발생하는 위치만 다르다.

그럴 때 사용하는 것이 추상화이다. 

즉, 

이렇게 공통점이었던 '에러를 처리한다'는 부분만을 묶어 함수로 만드는 것이다.

이렇듯 추상화는 처리하는 기능은 같지만 내용만 조금 다를 경우 사용하게 된다. 

 

다음으로 볼 것은 함수식이다. 

함수식은 함수명은 없고 함수식만 존재하는 함수들을 말한다.

보통 변수에 함수식을 저장시켜 사용한다. 

 

 

다음으로 볼 것은 오버로딩!!!!!!!이다

오버로딩이란 함수명이 같아도 매개변수의 값이나 타입이 다르다면 오류로 인식하지 않고,

호출시 입력한 매개변수의 값에 따라 알아서 함수를 호출해주는 기능을 말한다.

근데 문제는 자바스크립트에서는 이 기능이 없다는거다.

그래서... 흉내내보았다.

우선 하나의 함수를 선언해준 뒤, 그 안에 switch문을 사용하여

케이스를 만들어주는 방식으로 오버로딩 비스무리한 기능을 만들어 낼 수 있었다. 

 

2. 배열

배열을 선언하는데에는 2가지 방법이 있다.

1. 리터럴로 생성

2. Array객체로 생성

c언어나 자바에서는 객체로 많이 생성하나 자바 스크립트에서는 리터럴로 많이 생성한다. 

 

값 삽입하는 방식은 다음과 같다.

특정 인덱스에 위치하고 있는 값을 확인할 때에는 다음과 같이 사용한다.

이렇게 배열을 선언함과 동시에 초기화 시킬수도 있고,

특정한 크기를 가진 배열을 생성하는것도 가능하다.

배열에서 가장 중요한 내용은 인덱스와 인덱스의 시작숫자인데

인덱스는 배열에 저장된 값에 접근할 수 있게끔 도와주는 것으로 0부터 시작한다.

 

그러므로 내가 위에서 예시로 들었던

이 arrLiteral이라는 배열의 크기는 0, 1, 2, 3, 4, 5로 총 6인 것이다.

 

배열은 우리가 지정한 만큼의 공간을 갖는 존재이기에 일일이 값을 넣는것보다

이렇게 반복문을 이용하여 값을 삽입하는것이 훨씬 편하고 빠르다. 

배열에는 자주 쓰는 함수들이 있다.

1. 배열.push();

2. 배열.pop();

3. 배열.shift();

4. 배열.unshift();

5. 배열.sort();

 

이 함수들은 다음과 같은 형태로 사용된다.

특이하게 다른 함수들과 달리 sort함수(정렬)은 어떤 상황에서 

서로의 자리를 바꿀 것인지 참조할 수 있는 조건을 지정해야 한다. 

 

+++++

 

정렬을 위해 랜덤한 숫자를 뽑는 함수를 알아보겠다.

Math.random( );

이라는 키워드로 사용되며, 보통 앞에 소수점 자리를 어떻게 처리할 것인가에 대한 함수와 같이 사용한다.

Math.floor( ) : 소수점 이하를 버림

Math.ceil( ) : 소수점 이하를 올림

Math.round( ) : 소수점 이하를 반올림

 

Math.random( ) 뒤에 붙은 * 100은 랜덤하게 나올 숫자의 범위를 지정해준다 (0~99)

+++++

배열 복사에는

1. 얕은 복사

2. 깊은 복사

이렇게 2가지 종류가 있다.

 

1) 얕은 복사(shallow Copy)

참조 복사 라고도 불리는 얕은 복사는 

객체를 복사할 때 원래값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다,

객체 안에 객체가 있을 때,

한 개의 객체라도 원본 객체를 참조하고 있을 때도 얕은 복사라고 한다.

 

얕은 복사를 하는 방법에 대해 알아보겠다.

다음과 같은 방법으로 얕은 복사를 수행할 수 있다. 

위에 적어놓은 설명이 뭘 뜯하는지 알아보도록 하겠다.

 

배열dst의 1번째 인덱스의 값을 바꿔,

배열src와 배열 dst를 출력시켜보겠다.

 

그러면 다음과 같이 

배열 src(원본)의 값은 그대로이며,

배열 dst(복사)의 첫번째 인덱스의 값이 바뀌어 있는걸 확인할 수 있다.

주의해야 한다. 이건 얕은 복사 내용을 설명하고 있는 글이다.

근데 지금 결과상으로는 깊은 복사밖에 안되고 있다.

추후에 다시 확인해봐야 할 것 같다.

 

즉, 얕은 복사는 객체의 참조값(주소값)을 복사하기에 

원본 배열의 값이 변하게 될 경우, 복사한 배열의 값도 바뀌게 된다. 

 

1) 깊은 복사(Deep Copy)

깊은 복사는 객체의 실제 값을 복사한다.

그렇다면 깊은 복사는 무엇일까.값 복사라고도 불리는 깊은 복사는객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다. 

 

깊은 복사 방법은 다음과 같다.

이 방법은

1. JSON.stringify()를 통해 객체를 문자열로 만들면서 

원본 객체와의 참조가 모두 끊어짐.

2. 객체를 문자열로 변환한 후, JSON.parse()를 이용해

다시 원래 객체로 만들어줌.

이란 과정을 거쳐 배열을 복사한다.

 

그렇다면 얕은 복사일때와 마찬가지로

복사된 배열에 값을 변경시키면 어떻게 될까?

똑같은 코드를 입력시켜 출력해보겠다.

 

출력시켜보면

값이 서로 다르게 나오는 것을 확인할 수 있다.

즉, 깊은 복사는 값만을 복사해오는 것이기에

복사된 배열을 변경했다고 하여 원본 배열에 영향이 가는것은 아니라는 소리이다.