Day 31

함수 (function)

: 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문
: 한번 작성해두면 정의한 함수 계속 호출

함수 정의하는 방법

1. 함수 선언문
2. 함수 표현식 (네이밍, 익명)
3. 화살표 함수

ex. 구구단을 출력하는 함수
1. 함수 선언문

function gugudan3() {
    for (let i = 1; i <= 9; i++) {
        console.log(`3 * ${i} = ${3 * i}`);
    }
}

2. 함수 표현식

2-1. 네이밍
const funcGuGu4 = function gugudan4() {
    for (let i = 1; i <= 9; i++) {
        console.log(`4 * ${i} = ${4 * i}`);
    }
}

2-2. 익명
const funcGuGu5 = function () {
    for (let i = 1; i <= 9; i++) {
        console.log(`5 * ${i} = ${5 * i}`);
    }
}

3. 화살표 함수

const funcGuGu6 = () => {
    for (let i = 1; i <= 9; i++) {
        console.log(`6 * ${i} = ${6 * i}`);
    }
}

매개변수와 인수

• 매개변수 : 함수가 호출될 때 전달받은 데이터를 할당하기 위해 함수에서 선언하는 변수
• 인수 : 정의한 함수를 호출할 때 전달하는 데이터
• 함수가 값을 받기 위해 선언하는 것은 매개변수, 그 함수에 넣어준 값은 인자값
• 함수를 호출할 때 데이터를 전달해도 매개변수 정의하지 않으면 값을 받아올 수 없음 (오류가 발생하지는 않음, 매개변수의 기본값 => undefined)

return

• 함수 내부에서 함수를 호출한 곳으로 데이터를 전달할 때
• 화살표 함수에서 {}를 생략하면 화살표 다음에 오는 코드는 return 문으로 처리

호이스팅

: 코드를 선언과 할당으로 나누었을 때, 선언부를 스코프 최상위로 끌어올리는 것

적용 대상

• 함수 선언문
• var 키워드를 사용한 함수 표현식
• 화살표 함수 방식

+) let이나 const는 호이스팅X

즉시 실행 함수

: 함수를 정의하면서 동시에 실행까지 하는 함수 (한 번 실행하면 메모리에 데이터X), 해당 식별자를 한 번도 사용되지 않은 것처럼 인식

형식 (function() {}) ();

: 예시

(function init() {
    console.log("initialized!");
})();
// init(); ReferenceError: init is not defined

결과 
initialized!

객체 속성의 접근, 변경, 추가, 삭제

• 대괄호 연산자 or 마침표 연산자로 접근

대괄호 연산자
객체['속성']

마침표 연산자
객체.속성

• 변경, 추가

객체['속성'] = 변경(추가)하려는 값
객체.속성 = 변경(추가)하려는 값

• 삭제

delete 객체['속성']
delete 객체.속성

깊은 복사와 얕은 복사

• 깊은 복사 (deep copy) : 기본 자료형의 데이터 관리 방법 / 원래의 값을 변경해도 복사본의 값이 변경되지 않음

• 얕은 복사 (swallow copy) : 참조 자료형의 데이터 관리 방법 / 원래의 값 변경하면 같은 주소를 바라보고 있는 복사본의 값도 변경

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1;

arr3[0] = 7; // -> 원본에 변화O
console.log(arr1, arr3) // [7,2,3] [7,2,3]

let arr4 = [...arr2]; // 원본 배열 복사해서 얕은 복사 되지 않도록
arr4[0] = 9;// -> 원본에 변화 X
console.log(arr2, arr4); // [ 4,5,6 ] [ 9,5,6 ]

파괴적 메서드와 비파괴적

• 파괴적 메서드 : 메서드를 사용했을 때 원본 데이터를 변경
• 비파괴적 메서드 : 원본 변경 X

push, pop, shift, unshift

구분	위치	설명
push	배열 뒤	추가
pop	배열 뒤	삭제
unshift	배열 앞	추가
shift	배열 앞	삭제

+++ pop과 shift같은 경우 변수에 담으면 어떤 요소가 제거 되는지 알 수 있음

let arr1 = [1, 2, 3];
let test = arr1.shift();
console.log(arr1, test);

결과
[ 2, 3 ] 1

splice

형식 : 배열.splice(인덱스, 삭제개수, (추가할 값))

let arr = [4,5,6,1];

console.log(arr);
arr.splice(2, 1); // 인덱스 2부터 하나 삭제
console.log(arr);
arr.splice(1, 0, 6); // 6을 추가
console.log(arr);

결과
[ 4, 5, 6, 1 ]
[ 4, 5, 1 ]
[ 4, 6, 5, 1 ]

sort

: 오름차순 정렬 (원본 변경)

let arr10 = [2, 0, 5, 8];
let sortedArr = [...arr10];
sortedArr.sort();
console.log(arr10, sortedArr);

결과
[ 2, 0, 5, 8 ] [ 0, 2, 5, 8 ]

---

includes, indexOf, substring

• includes : 해당 문자열에 어떤 값이 포함이 되어 있는지
• indexOf : 해당 문자열에 어떤 값의 첫번째 인덱스 위치 (없는 경우 -1 리턴)
• substring : 해당 문자열에서 원하는 인덱스 위치만큼 문자 추출

let str2 = "acbde@naver.com";

// 1. includes 
console.log(str2.includes("@")); // true

// 2. indexOf
console.log(str2.indexOf("@")); // 5 

// 3. substring
console.log(str2.substring(0, 5)) // 인덱스로 0부터 5-1까지 => acbde

split

• 해당 문자열을 기준으로 string을 잘라서 배열로 만들어줌 (해당 문자열이 여러개여도 ok)

let str5 = "abcc@naver.com";
let strSplit = str5.split("@");
console.log(strSplit);

let phoneNum = "010-4321-3453";
let splitted = phoneNum.split("-");
console.log(splitted);


결과
[ 'abcc', 'naver.com' ]
[ '010', '4321', '3453' ]

charAt, trim, toUpperCase, toLowerCase

• charAt : 해당 인덱스의 문자 뽑기
• toUpperCase, toLowerCase : 대문자로, 소문자로 변환

let testStr = "abcde";
testStr = testStr.toUpperCase();
console.log(testStr);
testStr = testStr.toLowerCase();
console.log(testStr);
for (let i = 0; i < testStr.length; i++) {
    console.log(testStr.charAt(i));
}

결과
ABCD
abcd
a
b
c
d

• trim : 앞뒤 공백 제거

let str6 = " abcgd23    ";
console.log(str6.trim());

결과 
abcgd23