Javascript 자바스크립트 기본 [2]

 

함수 표현식

- 자바스크립트는 함수를 특별한 종류의 값으로 취급합니다.

- 다른 언어에서처럼 "특별한 동작을 하는 구조"로 취급되지 않습니다.

 

1. 함수 선언문

function sayHi() {

alert( "Hello" );

}

2. 함수 표현식(Function Expression)

let sayHi = function() {

alert( "Hello" );

};

- 함수가 어떤 방식으로 만들어졌는지에 관계없이 함수는 값이고, 따라서 변수에 할당할 수 있습니다. 

- 함수는 값이기 때문에 alert를 이용하여 함수 코드를 출력할 수도 있습니다.

 

함수 복사

function sayHi() {  alert( "Hello" ); }

let func = sayHi; // 함수 복사

func(); // Hello // 복사한 함수를 실행(정상적으로 실행됩니다)!

 

끝에 세미 콜론

function sayHi() {

// ...

}

let sayHi = function() {

// ...

};

- 함수 표현식에 쓰인 세미 콜론은 함수 표현식 때문에 붙여진 게 아니라, 구문의 끝이기 때문에 붙여졌습니다.

 

콜백함수

function ask(question, yes, no) {

if (confirm(question)) yes()

else no();

}

function showOk() {

alert( "동의하셨습니다." );

}

function showCancel() {

alert( "취소 버튼을 누르셨습니다." );

}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨

ask("동의하십니까?", showOk, showCancel);

 

- 함수 ask의 인수, showOk와 showCancel은 콜백 함수 또는 콜백이라고 불립니다.

- "yes"라고 대답한 경우 showOk가 콜백이 되고, "no"라고 대답한 경우 showCancel가 콜백

 

function ask(question, yes, no) {

if (confirm(question)) yes()

else no();

}

ask(

     "동의하십니까?",

     function() { alert("동의하셨습니다."); },

     function() { alert("취소 버튼을 누르셨습니다."); }

);

- ask(...) 안에 함수가 선언되어있는데 이렇게 이름 없이 선언한 함수는 익명 함수(anonymous function)라고 부른다. 

 

함수는 "동작"을 나타내는 값입니다.

- 문자열이나 숫자 등의 일반적인 값들은 데이터를 나타냅니다.

- 함수는 하나의 *동작(action)*을 나타냅니다.

- 동작을 대변하는 값인 함수를 변수 간 전달하고, 동작이 필요할 때 이 값을 실행할 수 있습니다.

 

함수 표현식과 함수 선언문

 

1. 첫 번째 차이는 문법이다.

함수 선언문: 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재합니다.

// 함수 선언문

function sum(a, b) {

return a + b;

}

함수 표현식: 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성됩니다. 아래 예시에선 함수가 할당 연산자 =를 이용해 만든 “할당 표현식” 우측에 생성되었습니다.

// 함수 표현식

let sum = function(a, b) {

return a + b;

};

 

2.두 번째 차이는 자바스크립트 엔진이 언제 함수를 생성하는지에 있습니다. 

 

- 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다.

- 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있습니다.

- 함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있습니다.

 

따라서 전역 함수 선언문은 스크립트 어디에 있느냐에 상관없이 어디에서든 사용할 수 있습니다.이게 가능한 이유는 자바스크립트의 내부 알고리즘 때문입니다. 자바스크립트는 스크립트를 실행하기 전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성합니다. 스크립트가 진짜 실행되기 전 "초기화 단계"에서 함수 선언 방식으로 정의한 함수가 생성되는 것이죠. 스크립트는 함수 선언문이 모두 처리된 이후에서야 실행됩니다. 따라서 스크립트 어디서든 함수 선언문으로 선언한 함수에 접근할 수 있는 것입니다. 

 

3. 세 번째 차이점은, 스코프입니다. 

 

- 엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록내 어디서든 접근할 수 있습니다. 하지만 블록 밖에서는 함수에 접근하지 못합니다.

 

함수 선언문과 함수 표현식 중 무엇을 선택해야 하나요?

제 경험에 따르면 함수 선언문을 이용해 함수를 선언하는 걸 먼저 고려하는 게 좋습니다. 함수 선언문으로 함수를 정의하면, 함수가 선언되기 전에 호출할 수 있어서 코드 구성을 좀 더 자유롭게 할 수 있습니다. 함수 선언문을 사용하면 가독성도 좋아집니다. 코드에서 let f = function(…) {…}보다 function f(…) {…} 을 찾는 게 더 쉽죠. 함수 선언 방식이 더 “눈길을 사로잡습니다”. 그러나 어떤 이유로 함수 선언 방식이 적합하지 않거나, (위 예제와 같이) 조건에 따라 함수를 선언해야 한다면 함수 표현식을 사용해야 합니다.

 

요약

• 함수는 값입니다. 따라서 함수도 값처럼 할당, 복사, 선언할 수 있습니다.
• “함수 선언(문)” 방식으로 함수를 생성하면, 함수가 독립된 구문 형태로 존재하게 됩니다.
• “함수 표현식” 방식으로 함수를 생성하면, 함수가 표현식의 일부로 존재하게 됩니다.
• 함수 선언문은 코드 블록이 실행되기도 전에 처리됩니다. 따라서 블록 내 어디서든 활용 가능합니다.
• 함수 표현식은 실행 흐름이 표현식에 다다랐을 때 만들어집니다.

함수를 선언해야 한다면 함수가 선언되기 이전에도 함수를 활용할 수 있기 때문에, 함수 선언문 방식을 따르는 게 좋습니다. 함수 선언 방식은 코드를 유연하게 구성할 수 있도록 해주고, 가독성도 좋습니다.

함수 표현식은 함수 선언문을 사용하는게 부적절할 때에 사용하는 것이 좋습니다. 

---

|| (OR)

- ‘OR’ 연산자는 두 개의 수직선 기호로 만들 수 있습니다.

- 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다. result = value1 || value2 || value3;

 

OR "||" 연산자를 여러 개 체이닝(chaining) 하면 첫 번째 truthy를 반환합니다.

피연산자에 truthy가 하나도 없다면 마지막 피연산자를 반환합니다.

alert( 1 || 0 ); // 1 (1은 truthy임)

alert( null || 1 ); // 1 (1은 truthy임)

alert( null || 0 || 1 ); // 1 (1은 truthy임)

alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)

-핵심은 반환 값이 형 변환을 하지 않은 원래 값이라는 것입니다.

 

&& (AND)

- 두 개의 앰퍼샌드를 연달아 쓰면 AND 연산자 &&를 만들 수 있습니다. result = a && b;

 

// 첫 번째 피연산자가 truthy이면,

// AND는 두 번째 피연산자를 반환합니다.

alert( 1 && 0 ); // 0

alert( 1 && 5 ); // 5

// 첫 번째 피연산자가 falsy이면,

// AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시합니다.

alert( null && 5 ); // null

alert( 0 && "아무거나 와도 상관없습니다." ); // 0

 

&&의 우선순위가 ||보다 높습니다

 

! (NOT)

- NOT 연산자는 인수를 하나만 받고 피연산자를 불린형(true / false)으로 변환합니다.

- 1에서 변환된 값의 역을 반환합니다.

 

NOT을 두 개 연달아 사용(!!)하면 값을 불린형으로 변환할 수 있습니다.

alert( !!"non-empty string" ); // true

alert( !!null ); // false

내장 함수 Boolean을 사용하면 !!을 사용한 것과 같은 결과를 도출할 수 있습니다.

alert( Boolean(null) ); // false

 

NOT 연산자의 우선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 &&나 || 보다 먼저 실행됩니다.

 

nullish 병합 연산자 '??'

- nullish 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있습니다.

 

- a ?? b의 평가 결과는 다음과 같습니다.

• a가 null도 아니고 undefined도 아니면 a
• 그 외의 경우는 b

x = a ?? b

x = (a !== null && a !== undefined) ? a : b;

두 개의 코드는 같은 코드

 

'??'와 '||'의 차이

- nullish 병합 연산자는 OR 연산자 ||와 상당히 유사

- ??를 ||로 바꿔도 그 결과는 동일

 

두 연산자 사이에는 중요한 차이점이 있습니다.

• ||는 첫 번째 truthy 값을 반환합니다.
• ??는 첫 번째 정의된(defined) 값을 반환합니다.

height = height ?? 100;

- height에 값이 정의되지 않은경우 height엔 100이 할당됩니다.

Ex)

let height = 0;

alert(height || 100); // 100

alert(height ?? 100); // 0

연산자 우선순위