자바스크립트 기본 2.1 ~ 2.18 정리 [모던 JavaScript 튜토리얼]

이 포스팅의 모든 내용은 

https://ko.javascript.info/

모던 JavaScript 튜토리얼

의 내용을 참고하였습니다 :)

 

🖤 Hello, world!

웹 페이지에 스크립트를 삽입하는 방법

1. <script> 태그를 이용하기 — 문서 (body 태그 내부) 내부에 삽입 가능
   1. 권장하지 않는 방식. 아주 간단할 때만 사용하라.
2. 외부 스크립트 — head 태그 내부에 <script src="경로"></script> 와 같은 형태로 삽입
   1. url 전체를 경로에 넣기도 가능
   2. 복수의 스크립트 삽입도 가능

src 속성이 있으면, 태그 내부의 코드는 무시된다.

🖤 코드 구조

한 줄 주석 : cmd + / 여러 줄 주석 : cmd + opt + /

→ 중첩 주석은 지원하지 않는다

🖤 엄격 모드

• use strict 라는 특별한 지시자로 변경사항이 활성화되게 한 것(ES5 등장 이슈로 인함)
• 스크립트 최상단에 "use strict" or 'use strict' 가 오면 스크립트 전체가 모던한 방식으로 동작.
• "use strict" 의 경우, 함수 본문 맨 앞에 올 수도 있음. (해당 함수만 엄격 모드로 실행한다)
• 일단 적용되면 돌이킬 수 없음

콘솔에서 엄격 모드 사용

‘use strict'

입력 후, shift + enter 이용하여 줄바꿈 -> 원하는 스크립트 입력

코드를 클래스/모듈을 사용해 구성하는 경우, 엄격모드가 자동 적용된다.

🖤 변수와 상수

let 키워드 사용하여 변수 생성

• 변수 선언
• let m;
• 변수에 데이터 저장
• m = 'Hi';
• 변수 값 접근
• alert(m); // Hi

한 줄에 여러 변수 선언도 가능

→ let user = 'John', age = 20, message = 'Why';

그러나, 가독성을 위해 한 줄에는 하나의 변수를 작성할 것을 권장함

• 변수는 변하는 값, 즉 변수 내 데이터는 계속해서 변경 가능하다
• 변수 두 개를 선언 후 → 한 변수의 데이터를 다른 변수에 복사할수도 있다.

그러나, 변수 선언은 딱 한 번만 해야 한다.

변수 명명 규칙

1. 변수명에는 문자/숫자 + 기호(only $ and _ ) 만 들어갈 수 있음
2. 첫 글자 ≠ 숫자
3. 예약어 사용 금지

• 카멜 표기법 권장
• 대소문자를 구별한다.
• 영어로 작성할 것을 권장

상수

• 변하지 않는 수

선언 → const 사용하여 선언

• 재할당할 수 없음 (에러)
• 하드 코딩한(코드 실행 전 미리 그 값을 알고 있는 상수) 값의 경우, 대문자로 상수 이름 만들면 여러 장점이 있음(기억하기 쉬움, 오타 가능성 낮음, 코드 가독성 증가 등)

기존 변수를 재사용하는 것 << 새로운 변수 선언하는 것

🖤 자료형

8가지 기본 자료형이 있음

• 자바스크립트의 변수는, 동적 타입 변수
  • 자료의 타입은 있지만, 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어

숫자형

정수 + 부동소수점 숫자

→ 연산 : 곱셈 / 나눗셈 / 덧셈 / 뺄셈

+) Infinity, -Infinity, NaN 같은 특수 숫자 포함

BigInt

자바스크립트에선 (2^53-1)(9007199254740991) 보다 큰 값 혹은 -(2^53-1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없음.

• 그러나 암호 등 아주 큰 숫자 / 아주 높은 정밀도 작업 시 이런 큰 숫자 필요
• 길이에 상관없이 정수 나타낼 수 있음
• 리터럴 : n

문자형

따옴표로 묶는게 기본

• 큰 따옴표
• 작은 따옴표

→ js에서는 큰/작은 따옴표에 차이를 두지 않음

• 역 따옴표(백틱, backtick)
  • 변수나 표현식 감싼 후 ${…} 내에 넣어주면 문자열 중간 중간에 삽입 가능하다. 잉

자바스크립트에는 글자형이 없다.

불린형

• true / false
  • let isGreater = 4 > 1;

null 값

어떤 자료형에도 속하지 않는 값.

다른 언어에선 존재하지 않는 객체에 대해 참조하거나, 널 포인터 나타낼 때 사용함

But

자바스크립트에선 존재하지 않는 값 / 비어 있는 값 / 알 수 없는 값 나타낼 때 사용..!

undefined 값

값이 할당되지 않은 상태를 나타냄

선언은 했으나 할당하지 않은 상태 → 자동으로 undefined 할당

• 명시적으로 할당하는 것도 가능하다
  • 권장하지 않는다

객체와 심볼

사실 자바스크립트의 자료형은 크게 보면 두 가지다.

• 원시 자료형
• 참조 자료형
  • 객체형은, 복잡한 데이터 구조를 표현할 때 사용함.
  • 심볼형은, 객체의 고유한 식별자를 만들 때 사용함.

typeof 연산자

인수의 자료형을 반환함

두 가지 형태의 문법 지원

1. 연산자 : typeof x
2. 함수 : typeof(x)

→ 둘 다, 괄호의 여부에 상관없이 인수의 자료형을 나타내는 문자열 반환

typeof null → “object”가 반환되는데, null은 객체가 아님. 그냥 하위 호환성을 유지하기 위해 오류를 남겨둔 상황!

🖤 alert, prompt, confirm 이용한 상호작용

alert

이 함수 실행되면, 확인 버튼 누를 때까지 메시지를 보여주는 창이 떠있게 됨

→ 이 때 뜨는 창을 모달 창(modal window)라고 함.

→→ 모달 : 페이지의 나머지 부분과 상호 작용 불가.

prompt

2개의 인수를 받음

result = prompt(title, [default]);

• 텍스트 메시지, 입력 필드(input), 확인 & 취소 버튼이 있는 모달 창을 띄워줌
• title → 사용자에게 보여줄 문자열
• default → 입력 필드의 초기값 (선택값)
  • 필수가 아닌 선택값이다.
• 사용자가 입력을 취소한 경우 → null 반환

브라우저 호환성을 위해,

let test = prompt("Test", ''); // <-- IE 사용자를 위한 매개변수 처리

와 같이 디폴트 값을 전달해주는 것이 권장됨

컨펌 대화 상자

result = confirm(question);

• 매개변수로 받은 question 과 확인, 취소 버튼이 있는 모달창을 보여줌
• 사용자가 확인 → true
• 그외 → false 반환

🖤 형 변환

함수, 연산자 전달되는 값 → 거의 적절한 자료형으로 자동 변환

문자형으로 변환

String(value)

let value = true;
value = String(value); //value = "true"

숫자형으로 변환

Number(value)

let str = "123"
let num = Number(str);

숫자 이외의 글자 들어간 문자열 → 숫자형 ? 결과 NaN이 됨

숫자형으로 변환 시 적용되는 규칙

전달받은 값 형 변환 후

undefined	NaN
null	0
true and false	1 과 0
string	문자열의 처음과 끝 공백이 제거됩니다. 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽습니다. 변환에 실패하면 NaN이 됩니다.

불린형으로 변환

Boolean(value)

• 숫자, 빈 문자열, null, undefined, NaN같이 직관적으로도 비어있다고 느껴지는 값 → false!
• 그 외 : true
• 문자열 “0” → true

🖤 기본 연산자와 수학

피연산자 == 인수

피연산자의 개수에 따라,

1. 단항 연산자
2. 이항 연산자
3. 삼항 연산자

로 나뉜다

거듭제곱 연산자 **은 정수가 아닌 숫자에 대해서도 동작함. 1/2 제곱 → 제곱근을 구할 수 있게 됨.

이항 연산자 ‘+’ 와 문자열 연결

이항 연산자 + 의 피연산자로 문자열이 전달되면 덧셈 연산자는 덧셈이 아닌, 문자열을 병합/연결함

** 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환됨

alert('1' + 2); // "12"
alert(2 + '1'); // "21"
alert(2 + 2 + '1'); // "41"

두 개의 숫자 뒤 문자열 → 숫자 먼저 더해지고, 그 후 더해진 숫자와 문자열 병합

• 뺄셈, 나눗셈 연산자와 문자형 피연산자
• alert(6 - '2'); // 6 - 2 = 4 alert('6' / '2'); // 6 / 2 = 3

단항 연산자 +와 숫자형으로의 변환

숫자에 단항 덧셈 연산자 → 아무 동작 없음

피연산자가 숫자가 아닌 경우 → 숫자형으로의 변환!

alert(+true); //1
alert(+""); //0

• 문자열 → 숫자로 변환해야 할 때 유용하다

let apples = "2";
let oranges = "3";
alert(apples + oranges); //23

→ 위와 같은 경우, 이항 덧셈 연산자는 문자열을 연결함. 즉 5가 아닌, 23이 출력된다.

alert(+apples + +oranges); //5

== alert(Number(apples) + Number(oranges));

이항 덧셈 연산자 적용 전, 단항 덧셈 연산자가 먼저 적용된다

연산자 우선순위

• 우선순위 🙂
  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_precedence 를 참고!

할당 연산자

= 도 연산자다. 할당 연산자라고 함.

값 반환하는 할당 연산자?

js에서 대부분의 연산자는 값을 반환한다.

+/- 뿐 아니라 = 역시 값을 반환함

let a = 1;
let b = 2;
let c = 3 - (a = b + 1);

alert(a); //3
alert(c); //0

→ 권장하지 않는 사용 방식이다.

할당 연산자 체이닝

let a,b,c;
a = b = c = 2 + 2;
alert(a); //4
alert(b); //4
alert(c); //4

가장 오른쪽의 2 + 2가 먼저 평가 → 그 후 c, b, a 에 순차적 할당

but, 권장하지 않는 사용방식이다..

복합 할당 연산자

+= , -= , *= 등..

할당 연산자와 우선순위가 동일하다.

증가/감소 연산자

++

--

→ 변수에만 쓸 수 있음. 5++ 는 에러.

• 후위형 (a++)
• 전위형 (++a)

✅ 반환 값을 사용하지 않는다면, 전위형/후위형에는 차이가 없다

✅ 다른 대부분의 산술 연산자보다 우선순위가 높다. (표현식 중간 사용 가능)

비트 연산자

인수를 32비트 정수로 변환하여 이진 연산을 수행함

• 비트 AND ( & )
• 비트 OR ( | )
• 비트 XOR ( ^ )
• 비트 NOT ( ~ )
• 왼쪽 시프트(LEFT SHIFT) ( << )
• 오른쪽 시프트(RIGHT SHIFT) ( >> )
• 부호 없는 오른쪽 시프트(ZERO-FILL RIGHT SHIFT) ( >>> )

쉼표 연산자

• 코드를 짧게 쓰려는 의도로 가끔 사용
• 여러 표현식 → 한 줄에서 평가 가능하게
  • 표현식 각각이 모두 평가되나, 마지막 표현식의 평가 결과만 반환됨!

let a = (1 + 2, 3 + 4);
alert(a); //7

✅ 쉼표의 우선순위는 매우 낮음

✅ 코드 가독성에 도움이 되지 않음. for 문의 초기문에 종종 쓰이는 편..

과제

1. 전위형과 후위형b = 2d = 1
2. c = 2
3. a = 2
4. 할당 후 결과 예측하기
5. a = 4, x = 5
6. 형 변환
7. 10 -1 1 2 6 9px $45 2 NaN Infinity -9 5 -14 1 NaN -2
8. 덧셈 고치기
9. +a + +b

🖤 비교 연산자

불린형 반환

• true / false
• alert(2 > 1); //true 와 같이 출력할수도 있고
• let result = 5 > 4; 와 같이 비교 결과를 변수에 할당할 수도 있다.

문자열 비교

사전순으로 비교함 (정확히는 유니코드 순으로 비교한다)

• 사전 뒤쪽의 문자열 > 사전 앞쪽의 문자열

alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true

다른 형을 가진 값 간 비교

→ 숫자형으로 바꾼다

alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행
alert( '01' == 1 ); // true, 문자열 '01'이 숫자 1로 변환된 후 비교가 진행

true == 1

false == 0 으로 변환됨

동등 비교(==) → true 반환하나 논리평가 → 하나는 true, 다른 하나 false 반환

(e.g.)

let a = 0;
alert(Boolean(a)); //false

let b = "0";
alert(Boolean(b)); //true

alert(a == b) //true!!!!

a, b의 논리 값은 다른데, 둘의 값을 동등 비교하면 true가 반환됨. 동등 비교 연산 → 피연산자를 모두 숫자형으로 바꿈 그러나 Boolean → 다른 규칙 적용됨.

일치 연산자

동등 연산자 ==

→ 0과 false를 구분하지 못 함

→ 빈 문자열일 때도.. (alert(’’ == false); // true)

• 동등 연산자 ==는 피연산자를 비교할 때 숫자형으로 바꾸기 때문이다..

아 그럼 결국 0과 false는 구분 못 하는 겨?

ㄴㄴ

→ ㄷㄱㄷㄱ 바로

일치 연산자를 써라! (===)

• 자료의 값 뿐 아니라,
• 자료형의 동등 여부까지 검사함

!== : 부동 연산자 != 의 엄격한 버전

null이나 undefined와 비교하기

• 일치 연산자 사용
• → 자료형이 다르므로 false
• 동등 연산자 사용→ true..
• → null, undefined를 각별한 커플 취급 함. 자기들끼리 잘 어울리는
• 산술/기타 비교 연산자 사용→ null = 0, undefined = NaN
• → 숫자형으로 변환됨

null vs 0

alert( null > 0 );  // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true

(1), (3) : null이 숫자형으로 변환되어 0이 됨

(2) : 형 변환을 하지 않음.

→ 동등 연산자는 undefined, null 을 비교하는 경우에만 true 를 반환함 그 외에는 false

비교가 불가한 undefined

alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)

(1), (2) : undefined가 숫자형 NaN으로 변환 → NaN이 피연산자일 때 비교 연산자는 항~상 false 반환

(3) : undefined 는 null or undefined와 같고, 그 외와는 같지 않기 때문

변수가 undefined 나 null이 될 가능성이 있으면 → 여부를 확인하는 코드를 추가할 것!

🖤 if와 '?'를 사용한 조건 처리

다중 ‘?’

물음표 연산자?를 여러 개 연결하면 복수의 조건을 처리할 수 있음

예시:

let age = prompt('나이를 입력해주세요.', 18);

let message = (age < 3) ? '아기야 안녕?' :
  (age < 18) ? '안녕!' :
  (age < 100) ? '환영합니다!' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

alert( message );

==

if (age < 3) {
  message = '아기야 안녕?';
} else if (age < 18) {
  message = '안녕!';
} else if (age < 100) {
  message = '환영합니다!';
} else {
  message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
}

부적절한 ‘?’

물음표를 if 대용으로 쓸 때가 많은데

이는 가독성이 안 좋아지므로 사용하는 걸 추천하지 않는다

let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');

(company == 'Netscape') ?
   alert('정답입니다!') : alert('오답입니다!');

보다,

let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');

if (company == 'Netscape') {
  alert('정답입니다!');
} else {
  alert('오답입니다!');
}

이게 훨씬 가독성이 좋으니까.

조건에 따라 반환값을 달리하려면 물음표 연산자를 사용!

과제

자바스크립트의 공식 이름

🖤 논리 연산자

첫번째 truthy를 찾는 OR 연산자 ‘||’

OR 연산자와 피연산자가 여러 개인 경우

result = value1 || value2 || value3;

왼쪽 → 오른쪽으로 나아가며 피연산자 평가함 (불린형으로 변환해가며)

• or 연산이기 때문에, 변환하다가 중간에 true 나오면 연산 멈추고 해당 피연산자 변환 전 원래 값 반환 (true 반환한다는 소리임)
• 모두 평가한 경우 (즉, 결국 false 로 평가되는 경우) → 마지막 피연산자 반환함

반환 값은 형 변환을 하지 않은 원래 값임

변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기

변수에 값이 없는 경우(””) : falsy

변수에 값이 있는 경우(”어쩌고”) : truthy

단락 평가

OR 연산자가 제공하는 또 다른 기능

• OR이 truthy를 만나면 나머지 건드리지 않고 평가를 멈추는 그런 프로세스를 단락 평가라고 한다

true || alert("not printed");
false || alert("printed");

→ printed 만 출력됨

왜겠음?

그치. true || 의 경우 true 만나자마자 끝!

false || 의 경우 뒤에 조건을 보고, truty이니까 → 출력!

&&(AND)

• OR 연산자와 마찬가지로 피연산자의 타입에 제약이 없음

첫 FALSY를 찾는 AND연산자

• AND 연산자가 여러 개인 경우
  • 하나만 falsy여도 falsy.
  • 따라서, 왼쪽부터 오른쪽으로 피연산자를 평가해 나가는데, 중간에 false 나오면 평가를 멈추고 해당 피연산자의 불린 변환 전 원래 값 반환함
  • 피연산자 모두가 평가되는 경우(즉, 모두 true로 평가되는 경우) → 마지막 피연산자가 반환됨
• result = value1 && value2 && value3;

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

!(NOT)

• 피연산자를 불린형으로 반환 → 그 역의 값 반환
• !! 이렇게, NOT을 두 번 쓰면 그냥 불린형 변환이 가능함
  • Boolean(피연산자) 과 같은 역할

NOT 연산자의 우선순위는 모든 논리 연산자 중 가장 높음

과제

1. 2
2. alert() 메서드는 값을 반환하지 않음. 즉 undefined를 반환함
3. 근데, 2가 truthy 이기 때문에 1 2 출력하고 땡
4. null
5. 1 undefined
6. 3
7. if(age >= 14 && age <= 90){ }

if(!(age >= 14 && age <= 90)
if(age < 14 && age < 90)

1. first third

let whoAreYou = prompt("Who's there?", '');
if(whoAreYou == 'Admin'){
    let pw = prompt('Password?', '');
    if(pw == 'TheMaster') alert('Welcome!');
    else if(pw == null || pw == '') alert('Canceled');
    else alert('Wrong password.');
} else if(whoAreYou == null || whoAreYou == ''){
    alert('Canceled.');
} else{
    alert("I don't know you.");
}

🖤 nullish 병합 연산자 ‘??’

짧은 문법으로 여러 피연산자 중 확정된 값이 있는 변수를 찾을 수 있음

(e.g.)

a ?? b

→ a가 null도 아니고, undefined 도 아님 : a

→ else : b

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

성, 이름, 닉네임 입력 받는데 사용자가 아무런 정보도 입력하지 않은 경우 → 익명의 사용자가 출력되도록!

let firstName = null;
let lastName = null;
let nickName = "바이올렛";
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자");

위의 경우, 닉네임이 입력되었다고 가정하였으므로 닉네임인 바이올렛이 출력된다. 만약 닉네임이 null → 익명의 사용자 출력

‘??’ 와 ‘||’ 의 차이

• || : 첫 truthy 값 반환
• ?? : 첫 정의된 값 반환

height = height ?? 100;

→ height 값이 정의되지 않은 경우, 100 할당

let height = 0;
alert(height || 100); // 100
alert(height ?? 100); // 0

|| : height == 0 을 falsy 한 값으로 취급, null/undefined와 동일 취급한다.

?? : height 가 정확히 null/undefined인 경우에만 100이 됨..

0이 할당될 수 있는 변수 이용 개발 → ?? 가 적합하다!

연산자 우선순위

?? : 5 정도.. (= 나 ? 보단 먼저, 대부분보단 나중에 평가)

→ 그냥 생각하기 쉽게 괄호를 적극 이용하라!

이걸 왜 이제 이야기 해주는지 모르겠다 (그치만 책보다 나은 무료 자료이므로 조용히 하기로 한다) 안정성 이슈로 ??는 && 나 || 와 같이 사용 불가^^

🖤 while과 for반복문

while문

조건이 truthy이면 반복문 본문의 코드 실행 → 본문이 한 번 실행되는 걸 반복(iteration) 이라고 함

do…while 반복문

알고 있음 → 생략

for 반복문

begin → 여기서 선언하려면, 다른 언어와 다르진 않고.. let i = 0; 이런 식으로 해주면 된다

반복문 내에서 카운터 변수를 선언할 때 그 변수는 → 인라인 변수 선언이라고 부른다.

• 초기문은 생략할수도 있다.
• step(증감문) 역시 생략할수도 있다

그러나 생략 시 주의할 점 : 무조건 두 개의 세미콜론을 넣어주어야 한다는 것!

‘?’ 오른쪽엔 break나 continue가 올 수 없다.

• js도 반복문에 label 붙이는 거 가능

과제

1. 3 2 1 → 0은 falsy이므로 출력되지 않는다
2. 다름 1 → 1 2 3 4
3. 2 → 1 2 3 4 5
4. 이건 같지.

```jsx
for(let i = 1; i <= 10; i++){
    if(i % 2 == 0) alert(i);
}
```

```jsx
let i = 0;
while(i < 3){
    alert(`number ${i}!`);
    i++;
}
```

```jsx
while(true){
    let num = prompt("100보다 큰 숫자를 입력하세요.", 0);
    if(num < 100) continue;
    else break;
}
```

(정답)

```jsx
let num;

do {
  num = prompt("100을 초과하는 숫자를 입력해주세요.", 0);
} while (num <= 100 && num);
```

1. 이걸.. 헷갈리네?

   let n = prompt('n을 입력해주세요. 2부터 n 사이의 소수를 알려드립니다~');
   n = parseInt(n);
   let result = [];
   let startNum = 2;
   while(startNum <= n){
       let isPrime = true;
       for(let i = 2; i < startNum; i++){
           if(startNum % i === 0){
               isPrime = false; 
               break;
           }
       }
   
       if(isPrime) result.push(startNum);
       startNum++;
   }
   
   for(let i = 0; i < result.length; i++){
       alert(result[i]);
   }
   

2. → 따로 게시글을 올리겠음..하ㅠㅠ 반성함

🖤 switch문

인수에 어떤 표현식이든 올 수 있음

let a = "1";
let b = 0;

switch (+a) {
  case b + 1:
    alert("표현식 +a는 1, 표현식 b+1는 1이므로 이 코드가 실행됩니다.");
    break;

이런 식도 가능..!

• case stacking도 가능
• 비교하려는 값, case문의 값의 형과 값이 같아야함

과제

'use strict'
let browser;
if(browser == 'Edge') alert("Edge를 사용하고 계시네요!");
else if(browser == 'Chrome' || browser == 'FireFox' || browser == 'Safari' || browser == 'Opera'){
    alert('저희 서비스가 지원하는 브라우저를 사용하고 계시네요.');
}else{
    alert('현재 페이지가 괜찮아 보이길 바랍니다!');
}

🖤 함수

함수 선언

function 함수이름() {
	함수 내용
}

• 매개변수가 있는 경우
• function nameOfFunction(parameter1, parameter2, ...){ 함수 내용 }

지역 변수

함수 내에서 선언한 변수. 함수 내에서만 접근 가능

외부 변수 → 전수

함수 내부에서 함수 외부 변수 접근 가능. 수정도 가능

• 외부변수는 지역변수가 없는(즉, 동일 이름으로 덮어쓰지 않은) 경우에만 사용 가

전역 변수 사용을 최소한으로!

• 함수는 언제나 복사된 값을 사용한다.

기본값

함수 호출 할 때 매개변수 ← 인수를 전달하지 않음 : 그 값은 undefined 가 됨

how to 방지?

함수 선언 시 매개변수의 기본값을 설정해줘라

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

기본값을 다른 함수의 반환값으로 설정할수도 있음. 자유로운? 자바스크립트

기본값의 경우 값이 전달되는 경우엔 xx → 전달되는 값으로 설정됨.

구식 js에서는 매개변수 기본값 설정을 undefined인지 확인 후, undefined로 일치하는 경우, 기본값을 설정하는 방식을 사용했다

매개변수 기본값 설정할 수 있는 또 다른 방법

→ 구식 사용법처럼 하면 됨. undefined 와 비교해서~

function showMessage(text) {
  // ...

  if (text === undefined) { // 매개변수가 생략되었다면
    text = '빈 문자열';
  }

  alert(text);
}

showMessage(); // 빈 문자열

→ 논리 연산자 ||를 사용할수도 있음

function showMessage(text){
	text = text || '빈 문자열';
}

→ nullish 병합 연산자 사용도 가능

function showCount(count){
	alert(count ?? 'unknown');
}
showCount(0); //0
showCount(null); //unknown
showCount(); //unknown

반환 값

return 은 함수 내 어디서든 사용 가능하다

→ 함수 실행 즉시 중단 → 함수 호출한 곳에 값 반환

• return 만 명시한 경우 → 함수 즉시 종료
• 반환값이 없거나 지시자만 있는 함수→ undefined 반환

return, 값 사이에 절대 줄 삽입불가

함수 이름짓기

• 함수의 이름은 대체로 동사
• 간결, 명확하게! 어떤 동작 하는지 설명할 수 있게

---

show : 무언가를 보여주는 함수

get : 반환하는 함수

calc : 값 계산하는 함수

create : 무언가를 생성하는 함수

check : 무언가를 확인하고 불린값 반환하는 함수

함수는 동작 하나만 담당해야 한다.

함수 == 주석

• 함수 길어지면 잘게 쪼개라. (분리해서 작성)
• 함수 그 자체로 주석의 역할

(e.g.)

function showPrimes(n){
    nextPrime: for(let i = 2; i < n; i++){
        for(let j = 2; j < i; j++){
            if(i % j == 0) continue nextPrime;
        }

        alert(i);
    }
}

Prime 인지 알아내는 기능, Prime 을 출력하는 두 기능을 1개의 함수에 넣은 위의 코드보다,

각 기능을 분리해 작성한 아래의 코드가 훨씬 가독성이 좋은 것을 확인할 수 있다.

function showPrimes(n){
    for(let i = 2; i < n; i++){
        if(!isPrime(i)) continue;

        alert(i);
    }
}

function isPrime(n){
    for(let i = 2; i < n; i++){
        if(n % i == 0) return false;
    }
    return true;
}

→ 이름만 보고도 어떤 동작하는지 알 수 있는 코드 == 자기 설명적 코드

과제

1. 같음
2. (1) 물음표 연산자를 이용한 풀이 (내가 푼 거)(2) OR 연산자를 이용한 풀이
3. function checkAge(age){ return (age > 18) || confirm('보호자의 동의를 받으셨나요?');
4. function checkAge(age){ let result = (age > 18) ? true : confirm('보호자의 동의를 받으셨나요?'); return result; }
5. (my sol)(물음표 연산자 사용한 해답)
6. function min(a, b){ return a < b ? a : b; }
7. function min(a, b){ if(a > b) return a; else return b; }
8. (my sol)
9. function pow(x , n){ let result = x; if(n < 1) alert('n은 1 이상의 자연수이어야 합니다. 다시 입력해주세요.'); else{ for(let i = 1; i < n; i++){ result *= x; } return result; } }

🖤 함수 표현식

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

이전 까지의 함수를 만들던 방식 : 함수 선언문 방식

이젠, 함수 표현식을 사용해 함수를 만들어 볼 거임

let 함수 이름 = function(){
	함수 내용
};

• 함수는 값, 변수에 할당 가능하다.

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

alert( sayHi ); // 함수 코드가 보임

→ 출력

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

• js는 괄호가 있어야만 함수가 호출됨. 따라서 함수는 실행되지 않는다.
• 위에서는 함수 소스 코드가 문자형으로 바뀌어 출력된 것!

함수는 함수이름() 이렇게 출력할 수 있다는 점 → 일반적 값과는 다른 것. 그러나, 본질은 값이다. 따라서,

변수 복사 → 다른 변수 할당 처럼, 함수를 복사해, 다른 함수에 할당할 수도 있다.

function sayHi(){
	alert('hello');
}
let func = sayHi;
func(); // Hello
sayHi(); //Hello

** func = sayHi() 가 아니라, func = sayHi 라는 걸 주의하라

콜백 함수

함수를 값처럼 전달하는 함수 표현식에 관한 예시를 더 보자

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 이 있음

→이런 상황에서 showOk, showCancel : 콜백 함수 또는 콜백이라 부름

위의 코드를 짧게 줄일 수도 있음

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

함수 표현식 vs 함수 선언문

함수 선언문 → 함수가 독자적 구문 형태로 존재 → 함수 선언문이 정의되기 전에도 호출 가능. 스크립트 어디에 있든 상관없이 사용 가능!!!!!

sayHi("John"); // Hello, John

function sayHi(name) {
  alert( `Hello, ${name}` );
}

엄격 모드 내 → 함수 선언문이 코드 블록 내에 위치 시 함수는 어디서든 접근 가능 (블록 밖에서는 함수에 접근 불가) → 함수가 선언된 코드 블록 내에서만 유효~~!!!!

let age = prompt("나이를 알려주세요.", 18);

// 조건에 따라 함수를 선언함
if (age < 18) {

  function welcome() {
    alert("안녕!");
  }

} else {

  function welcome() {
    alert("안녕하세요!");
  }

}

// 함수를 나중에 호출합니다.
welcome(); // Error: welcome is not defined

→ 이를 단순화하고, 에러가 안 나도록 고친 코드

let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  function() { alert("안녕!"); } :
  function() { alert("안녕하세요!"); };

welcome(); // 제대로 동작합니다.

함수 표현식 → 표현식 / 구문 구성 내부에 생성 → 실제 실행 흐름이 도달했을 때 함수 생성함. 도달했을 때부터 해당 함수 사용 가능

sayHi("John"); // error!

let sayHi = function(name) {  // (*) 마술은 일어나지 않습니다.
  alert( `Hello, ${name}` );
};

js : 스크립트 실행 전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성함. 즉, 스크립트 진짜 실행 전, 초기화 단계에서 함수 선언 방식으로 정의된 함수가 생성됨 함수 선언문 처리 → 스크립트 실행의 단계.

🖤 화살표 함수 기본

기본 문법

let funcName = (arg1, arg2, ...argN) => expression;

인자 arg…

함수 이름 : funcName

함수 표현식 : expression

(e.g.)

let sum = (a, b) => a + b;

• 인수가 하나면 → 괄호 생략 가능
• let double = n => n * 2;
• 인수가 없으면 → 괄호 비우기 (괄호는 생략 불가..!)
• let sayHi = () => alert("hihi");

화살표 함수 동적으로 만들기

let age = prompt('나이를 알려주쇼.', 18);

let welcome = (age < 18) ?
	() => alert('hi');
	() => alert('hello gentlemen.');

welcome();

본문이 여러 줄인 화살표 함수

• 중괄호를 사용한 경우, return 을 명시해주어야 함

(e.g.)

let sum = (a, b) => {
	let result = a + b;
	return result;
};

alert(sum(1, 2)); // 3

과제

let ask = (question, yes, no) => {
    if(confirm(question)) return yes();
    else return no();
}

ask(
    "동의하십니까?",
    () => alert('동의하셨습니다.'),
    () => alert('취소 버튼을 누르셨습니다.')
);

→ 헷.. 위에까지 바꿔버렸다~~