프로그래밍에서 함수(function)는 일정한 동작을 수행하는 코드를 의미한다.

이를 미리 만들어 두고 원할 때 실행하여 정해진 동작을 수행할 수 있다.

함수를 만들 때, ‘function’ 예약어를 사용하거나 ‘=>(화살표)’ 기호를 사용하며 화살표 기호를 사용한 함수를

화살표 함수(arrow function)이라 한다.

이는

function() {}

() => {}

와 같이 나타낼 수 있으며, 함수에 이름을 붙이면 다른 곳에서 사용할 수 있다.

예를 들어,

function a() {}

const b = function() {}

const c = () => {}

와 같이 사용할 수 있으며

함수 a 처럼, 함수를 상수에 대입하는 대신 function 키워드 뒤에 함수 이름을 넣어주는 방식을 함수 선언문(function declaration statment)이라 한다.

그리고, 두 번째와 세 번째 함수에는 각각 b와 c의 상수를 대입했는데, 이처럼 함수에 상수나 변수를 대입하는 방식을 함수 표현식(function expression)이라 한다.

이러한 함수를 만드는 행위도 선언한다(declare)고 표현한다.

만든 함수를 사용하는 행위를 호출한다(call)고 표현하며

예를 들면,

function a () {

console.log('Hello');

console.log('Function!');

};

a ();

Hello

Function!

undefined

와 같이 나타난다.

위의 부분은 함수선언문을 선언한 것 이며,

아래의 a(); 부분은 선언한 함수를 호출한 부분이고 출력이 된다.

undefined 부분은 반환값을 나타내는데, 이는 반환값이 없음을undefined 라는 반환값으로 나타내 주었다.

이는 함수선언문 안에서 return undefined;

가 생략된 모습이다. 따라서, undefined와 return undefined는 생략 가능하다.

return 함수를 사용한다면 그 부분을 마지막으로 함수는 종료된다.

그러므로, if문을 사용하여 함수의 실행부분과 종료부분을 설정할 수 있다.

함수와 배열은 객체이며 배열이나 함수가 아닌 것이 특정 모양을 가지면 ‘객체 렉터럴’ 이라 부른다.

예를 들면,

const kanghyun = {
name : '김강현',

date : 13,

month : 'January',

year : 1996,

gender : 'Male',

};

로 나타낼 수 있으며, 이렇게 중괄호에 묶인 것을 말하고 배열과 비슷하지만 다른 점을 나타내는데 이는 속성의 값 마다 이름을 부여 받는다는 점 이다.

또한 속성명에 숫자, 공백, 특수문자가 들어갈 경우에 따옴표를 붙여주어야 하며 후에 이를 다시 입력할 때, 따옴표와 함께 대괄호로 감싸주어야 한다.

예를 들면,

const object = {

a : 'b',

'1a' : 'c',

'a b' : 'd',

'a+b' : 'e',

};

위의 경우에서

object.a

object[a]

object[’1a’]

object[’a b’]

object[’a+b’]

등으로 표현할 수 있다.

만약, 여기서 대괄호와 따옴표를 함께 입력하지 않는다면 찾고자하는 문자는 객체 레터럴 안의 문자열이 아닌 변수로 인식된다. 또한 객체 레터럴 안에 새로 추가하거나 변경하고 싶을 때에는

object.a = f;

object.b = f;

등의 방법으로 객체 레터럴 안에 있는 값을 바꾸거나 새로운 속성을 추가할 수 있다.

만약, 객체 레터럴 안의 속성을 제거하고 싶다면 ‘delete’를 사용할 수 있으며 이는

delete object.b;

등의 방법으로 객체 레터럴 안에 있는 속성을 제거할 수 있다.

배열이 너무 많아 갯수를 셀 수 없다면 ‘.length’를 이용할 수 있는데,

이는

const manythings = [1, 2, 3, 4, 5, 'a' ,'b' ,'c' ,'d' ,'e' ,'eyes' ,'nose' ,'mouth', null, NaN, undefined]; console.log(manythings.length);

16 의 반환값이 표시된다. 즉, 배열은 16개가 있으며 마지막 인덱스는 0부터 시작하므로 15의 번호를 갖게 된다.

이는 배열의 요소 개수에서 1을 빼면 마지막 요소의 인덱스가 되므로 이를 활용해 마지막 요소의 값을 찾을 수 있다.

예를 들면,

const whatIsLastElement = ['a', 'b', 'c', 'd', 'e'];

console.log(whatIsLastElement [whatIsLastElement.length - 1]);

e

로 표현할 수 있다.

 이를 응용한 예시는

const array = ['1', 'a', '2', 'b', '3', 'c', 100, 'f'];

console.log(array[array.length - 3]);

c

이며 마지막 배열에서 3번째 값을 출력해준다.

이러한 배열에 새로운 요소를 더하거나 뺄 수도 있으며

예를 들면,

const target = [1, 2, 3, 4, 5];

target[5] = 6;

console.log(target);

(6) [1, 2, 3, 4, 5, 6]

이는 인덱스 5번 자리에 6의 값을 입력한 것이며, 입력한 콘솔로그에 6까지 나타나게 된다.

앞의 (6)의 경우에는 6개의 값이 있다는 것을 알려준다.

하지만, 숫자의 위치를 모르는 배열의 마지막에 새로운 값을 넣고 싶을 때는

const target = ['가', '나', '다', '라', '마'];

target[target.length] = '바';

console.log(target);

(6) ['가', '나', '다', '라', '마', '바']

처럼 입력할 수 있으며, 넣고 싶은 위치를 바꾸고 싶은 경우에는 ‘length’ 대신에 ‘length - 1’, ‘length - 2’등을 입력하여 위치변경이 가능하다.

배열의 맨 앞에 값을 추가하고 싶은 경우에는 ‘unshift’를 이용하며

예를 들면,

const target = ['나', '다', '라', '마', '바'];

target.unshift('가');

console.log(target);

6) ['가', '나', '다', '라', '마', ']

const target = ['가', '나', '다', '라'];

target[0] = 'a';

console.log(target);

(4) ['a', '나', '다', '라']

의 반환값으로 나타난다. 이는, 인덱스 0에 위치해있던 ‘가’ 값이 ‘a’로 변한 것이다.

마지막에 위치한 요소를 제거하고 싶다면 ‘pop’을 사용할 수 있으며

예를 들면,

const target = ['가', '나', '다', '라', '마'];

target.pop(); console.log(target);

(4) ['가', '나', '다', '라']

로 나타낼 수 있다.

처음에 위치한 요소를 제거하고 싶다면 ‘shift’를 사용하여

예를 들면,

const target = ['가', '나', '다', '라'];

target.shift();

console.log(target);

(3) ['나', '다', '라']

와 같이 나타날 수 있다.

중간의 요소를 제거하고 싶다면 ‘splice’ 기능을 사용할 수 있으며

예를 들면,

const target = ['가', '나', '다', '라', '마'];

target.splice(1, 1); [

'나'] target

(4) ['가', '다', '라', '마']

와 같이 나타날 수 있는데, (1, 1)의 첫번째 1 부분은 인덱스 넘버 1을 말하며 뒤의 1은 인덱스 넘버 위치로부터 1개 만을 뜻한다.

예를 들어, (4) ['가', '다', '라', '마']의 ‘다’와 ‘라’ 요소를 제거하고 싶다면

target.splice(2, 2);

console.log(target);

(2) ['가', '다']

와 같이 나타날 수 있다.

만약, 뒷부분에 숫자를 적지 않는다면 해당 위치로부터의 요소들은 전부 제거된다.

예를 들어,

const target = ['가', '나', '다', '라', '마'];

target.splice(1);

console.log(target);

['가']

와 같이 나타난다.

또한 배열의 요소를 변경할 수 있으며

예를 들어,

const target = ['가', '나', '다', '라', '마'];

target.splice(1, 2, 'B' ,'C');

console.log(target);

(5) ['가', 'B', 'C', '라', '마']

와 같이 나타낼 수 있다. 이는 인덱스 넘버의 1 뒤의 요소를 2개 제거하고 2개의 요소를 새로 추가한 모습이다.

또한 배열을 제거하지 않고 중간에 요소만 추가하고 싶을 때는

const target = ['가', 'B', 'C', '라', '마'];

target.splice(1, 0, 'A');

console.log(target);

(6) ['가', 'A', 'B', 'C', '라', '마']

와 같이 표현할 수 있으며, 이는 인덱스 넘버 1번 뒤에 아무 요소도 제거하지 않고 새로운 요소를 추가한 모습이다.

[’가’, ‘나’, ‘가’, ‘마’, ‘가’, ‘라’]

위의 배열에서 indexOf와 splice를 사용하여 ‘가’를 제거할 때

const arr = ['가', '나', '가', '마', '가', '라'];

while (arr.indexOf('가') > - 1) {
    arr.splice(arr.indexOf('가'), 1); }

['가'] arr

(3) ['나', '마', '라']

와 같이 나타낼 수 있으며, 반복하는 구간을 찾아서 함수를 사용한다.

여기서 나아가자면 코드를 더 클린하게 만들기 위해서

let index = arr.indexOf('가') 등을 사용하여 줄일 수 있다.

배열은 값들을 나열한 것 이므로 반복문과 같이 사용하는 경우가 많다.

while 문과 for 문을 이용하여 모든 배열을 console.log 할 경우

const target = ['가', '나', '다', '라', '마']; let i = 0; while (i < target.length) { console.log(target[i]); i++; } 가 나 다 라 마 4

와 같이 나타나며

const target = ['가', '나', '다', '라', '마']; for(let i = 0; i < target.length; i++) { console.log(target[i]); } 가 나 다 라 마

와 같이 나타낼 수 있다.