JavaScript 04 함수

함수 정의하기

함수정의하는 법
1. 함수선언문으로 정의
2. 함수 리터럴로 정의
3. Function 생성자로 정의
4. 화살표 함수 표현식으로 정의

호이스팅

• 등록되어있는 함수, 함수 중 선언문으로 만든 함수를 가장 먼저 끌어올려 읽어놓음.
• 자바스크립트가 실행할 때 실행 직전에 먼저 이런 변수를 사용할거라고 선언되어 있어 하면서 자기들이 먼저 읽어놓음
• 호이스팅 = 끌어올림
• 런타임시에 한줄씩 읽는게 아니라 미리 끌어올림
• var 나 선언문으로 정의한 함수

변수선언

자바스크립트의 변수 선언은 var, let, const 라는 키워드를 이용해서 할 수 있다. 자바스크립트의 변수는 선언 후 초기화된다.

선언 : 변수명을 등록하고 자바스크립트엔진이 변수의 존재를 인식한다.

초기화 : 값을 저장하기 위한 메모리공간을 확보하고 초기화 한다. 이 단계에서 암묵적으로 undefined가 할당된다.

var

var 라는 키워드를 이용하면 선언과 초기화 단계가 동시에 일어난다.

var a ; 
console.log(a) // undefined  

console.log(a) // undefined  
var a ; 

이 코드의 위아래를 바꾸어도 에러가 나지 않고 undefined 가 출력된다


자바스크립트엔진을 코드를 실행하기 전 변수선언 , 함수선언문 등을 찾아서 먼저 읽어 들인다. 이것을 자바스크립트의 호이스팅 이라고 한다.

var, let, const의 차이점

var

1. 중복선언이 가능
2. 변수 선언문보다 위에서 변수를 사용하면 undefined를 반환한다.
3. 함수 외부에서 선언한 변수는 모두 전역 변수가 된다.
   함수 내부에서 선언한 변수는 지역변수, 외부에서 선언한 변수는 전역변수

let

1. 재선언 불가능
2. 재할당 가능
3. 블록 레벨 스코프를 따른다.
4. 선언단계와 초기화 단계가 분리되어 진행됨(선언과 초기화 같이 일어나지 않는다.) let a; 하면 var처럼 암묵적으로 undefined가 출력되지 않는다.

const

1. 재선언 불가능
2. 재할당 불가능 , but 객체를 할당할 때는 가능(객체 안의 속성이나 프로퍼티를 생성한다거나 변경을 하는 것이 가능하다는 뜻~!)
3. 블록 레벨 스코프
4. 반드시 선언을 할 때 초기화를 시켜주어야 해 선언만 하면 에러떠 반드시 선언과 초기화가 같이 일어나야함 런타임시에만 코드가 실행되기 때문에 런타임 이전에는 초기화 되지 않는다

• 변수 만들때는 불변이냐 아니냐에 따라 let 이나 const 맞춰서 써주면 될 듯. 불변은 const, 재할당 되어야 하는 것은 let

함수선언문

function 함수이름() { }

예시)

function hello(){
    console.log('hello world')
}
hello(); // hello라는 함수를 실행한 것이므로 'hello world'출력

매개변수 사용하기

function 함수이름 (a(매개변수),b(매개변수)) { return a + b }
여기서 사용하는 변수는 지역변수(이 함수 안에서만 사용되는 함수
return 은 반환하는 함수

예시)

function num(a,b){
    return a + b;  
}
const result = num(10,20)
console.log(result)

즉시 실행 함수

크게 ()로 감싸주고 마지막에 () 붙이고 ; 붙여주기
(function(){ console.log('즉시 실행') })();

• 즉시실행 함수 쓸 때는 세미콜론 주의하기!
  • 선언적 함수나 화살표 함수는 상관없이 세미콜론 붙여주기 때문에 상관 없지만, 참조타입이나 즉시실행함수 사이에는 자동으로 세미콜론이 찍히지 않기 때문에 세미콜론을 일일이 붙여줘야 한다.

콜백함수

매개변수로 다른 함수가 전달되는 것(not 값)
전달되는 매개변수의 부모함수는 고차함수가 된다.

고차함수

함수를 매개변수로 전달받거나, 함수를 반환(return)하는 함수

함수는 일급객체 (First Class Object)

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다.

const plus = (num) => {
    return num +2;
}
const minus = (num) => {
    return num -2;
}
const multi = (num) => {
    return num *2;
}
const devide = (num) => {
    return num /2;
}
const cal = (func , numValue) => {
    return func(numValue)
}
cal(plus, 10)

console.log(cal(plus,10)) //12
console.log(cal(minus,10)) //8
console.log(cal(multi,10)) //20
console.log(cal(devide,10)) //5

논리합, 논리곱, 부정연산

• 논리합 or || 논리곱 and && 연산자를 이용한 단축평가
• 좌항 우항 평가가 된다. 2개의 피연산자 중 어느 하나의 값으로 평가된다.
• 평가된 값은 형변환 하지 않고 현재 값을 반환한다.

논리합 ||

console.log(true || true) // true
console.log(false || true) // true
console.log(false || false) // false
console.log(60 || 50) // 60  --> 평가는 좌항부터 하니까 좌항이 true면 거기서 평가 끝 true나 false로 return하는게 아닌, 그 값을 출력 true true 면 좌항 나와~!~!
console.log(0 || 100) //100 0이면 false로 침
console.log('' || 100) //100 빈문자열 false로 침
console.log('' || 0) // false false 면 뒤에 있는 false가 나온다 (우항)
console.log(0 || null) //false false 면 뒤에 있는 false가 나온다 (우항)
console.log(0 || '') //false false 면 뒤에 있는 false가 나온다 (우항)

논리곱 &&

console.log(true&&true) // true
console.log(true&&false) // false
console.log(300&&500) // true true 면 &&는 뒤에 있는 항까지 평가를 해야 판단할 수 있으므로 뒤에 있는 값 출력
console.log(0&&500) // 이미 0에서 false이기 때문에 평가 끝, 그냥 0 출력
console.log(undefined&&0) // 이미 undefined에서 false이기 때문에 평가 끝, 그냥 undefined 출력
console.log(1&&null) // null
console.log(''&&null) // ''(빈문자열)

부정연산

console.log(!10)//false (!true) => false  (값이 있기만 하면 true여 그 true의 부정이니까 false)
console.log(!!10)//true (!!true) => true
console.log(!'hello')//false
console.log(!!'hello')//true