JavaScript 함수, 배열 기초 다루기

함수 선언문 vs 표현식

• 함수 선언문 : 괄호 안에 함수를 만드는 것 .
• 함수 표현식 : 함수를 하나의 ‘값’으로 취급하는 것. JS는 함수도 하나의 값으로 취급할 수 있다. 변수를 하나 만들어서 함수를 할당하는 것.
• 변수에 함수를 할당하는 점에서 다른 언어의 변수 활용 방식과 많이 다름
• 다른 변수에 할당도 될까? → YES

//함수 표현식!!! 
let byunsu = function hamsu(){
alert('유명함수')
};

let byunsu2 = function(){
	alert('무명함수');
}

//함수호출
byunsu(); -> 변수를 호출. 괄호 닫아주기 
//함수 내용 그대로 출력 
byunsu; //function hamsu(){~~~가 출력됨
//비정상함수호출
hamsu(); -> 할당한 함수명을 호출해도 안 나옴

//다른 변수에 할당
let byunsuClone = byunsu;
byunsClone(); //byunsu와 똑같은 함수 실행

함수 선언문 VS 함수 표현식

• 함수 만드는 방법이 다르다
• 함수 표현식은 할당 연산자를 통해서 하나의 값처럼 취급해 함수를 변수에 할당한다
• 함수를 호출하는 위치가 다르다. 전통적인 함수 선언문 방식은 위에서 호출하든, 아래에서 호출하든 상관없는데, 함수 표현식 방식은 반드시 함수 아래에서 호출해야 한다.
• → 왜? JS가 실행되기 전에, 함수를 먼저 생성하기 때문이다. 함수 선언문 (function) 처리가 된 것을 먼저 선언한다. 단, 함수표현식은 스크립트를 실행한 뒤에 생성되기 때문에, 위에서 아래로 실행하는 코드 특성상 표현식 아래에서만 함수를 호출할 수 있다.
• 함수선언문

helloWorld(); //호출가능

function helloWorld(){
	alert("helllloooo");
}

helloWorld(); // 호출가능

• 함수표현식

hello(); //error
let hello = function helloWordl(){
 alert('hello');
}
hello(); // 정상 

• 많은 JS 라이브러리에서 함수 표현식과 화살표 함수를 사용한다.

화살표함수

• 함수 표현식보다 더 간결하고 편리하게 사용하기 위한 표현식

let arrowFunc = function(a, b){
 return a*b;
};

alert(arrowFunc(10,20));

--> 함수표현식 전환 //function을 제거하고, =>로 대체하자. 코드가 짧으면, return과  중괄호도 빼
let arrowFunc = (a,b) => a*b; //a*b를  리턴한다

인자값이 하나라면 괄호 생략 가능
let arrowFunc = name => alert(`반갑습니다${name} 회원님`);

인자값이 없다면 괄호만
let arrowFunc = () => alert(`반갑습니다`);
let arrowFunc = () => 100; //100을 return 한다. return은 쓰지 말기 

리턴문이 있을 때 
let arrowFunc = function(a,b,c){
	let total_sum = a+b+c;
	return total_sum;
}
===>
let arrowFunc = (a,b,c) => a+b+c;

배열

• 문자, 숫자, 불리언, 객체, 함수 등등 담는다. 한 배열에 여러 타입의 원소를 넣을 수 있다.

let array = ["홍길동", 100, 3.14, false, {id:"iud1", age:20}, function(a){return a*2}];

//배열 안의 함수 호출하기
array[5](3); // 6 반환

• alert(array); //배열 전체가 출력됨. 자바는 주소만 나오는데 JS는 배열 원소 전체가 다 나옴
• 내가 하고 싶은 기능, 이미 JS에 있을 가능성 높다. 관련 메소드를 찾아보는 습관을 들이자!
• 배열 추가, 삭제
• push: 배열 맨 끝에 원소를 추가. 여러 개를 한꺼번에 추가할 수 있다.
• pop : 배열 맨 끝의 원소를 삭제

array.push(5); // array 배열 끝에 원소 추가 
array.pop(5); // array 배열 끝에 원소 삭제 
array.push("안녕", "나는", "스파이더맨이야"); //한꺼번에 3원소 추가 가능 

• shift : 배열 맨 앞의 원소 제거
• unshift : 배열 맨 앞에 원소 추가

array.shift(); //배열 맨 앞 원소 제거
array.unshift("what else can I do");//배열 맨 앞에 원소 추가 
array.unshift('under the surface', 'let it go'); 

• splice : 배열 중간에 원소 추가

array.splice(1,1,'b','c');
1번 인덱스부터, 1개 삭제한 뒤, 'b'와 'c'원소를 추가한다 

https://hianna.tistory.com/396