코어 자바스크립트 | 자바스크립트 기본 2

※본 포스팅은 개인 학습을 목적으로 작성된 것이므로 정확하지 않은 정보가 포함되어 있을 수 있음을 참고 부탁드립니다.

---

2. 자바스크립트 기본 2

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

- if(...)문은 괄호 안에 들어가는 조건을 평가하며, 그 결과가 true일 경우 코드 블록 실행

- 불린형으로의 변환

if (0) { // 0은 falsy로 해당 코드 블록은 절대 실행되지 않음
...
}

if (1) { // 1은 truthy로 해당 코드 블록은 항상 실행됨
...
}

- if문에는 else절을 붙일 수 있음. else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행

- 조건부 연산자 '?': 물음표 연산자라고도 불리는 조건부 연산자를 사용하면, 짧고 간결한 표현이 가능. 피연산자가 세 개이기 때문에 삼항연산자라고 부르는 사람도 있음. 자바스크립트에서 피연산자가 3개나 받는 연산자는 조건부 연산자가 유일함.

let result = condition ? value1 : value2; // condition이 truthy라면 value1이 그렇지 않으면 value2가 반환

let accessAllowed = (age > 18) ? true: false;
// 연산자 우선순위 규칙에 따라 비교 연산이 먼저 실행되기 때문에 조건문을 괄호로 감쌀 필요 없음 (괄호는 가독성을 위해 사용)
let accessAllowed = age > 18 ? true : false;

 

 

11. 논리 연산자

- 자바스크립트에는 세 종류의 논리 연산자가 있음

1) OR을 뜻하는 ||

2) AND를 뜻하는 &&

3) NOT을 뜻하는 ! : NOT 연산자 우선순위는 모든 논리 연산자 중에 가장 높아서 &&, || 보다 먼저 실행됨

result = !value;

console.log(!true); // false
console.log(!0) // true

// NOT을 두 개 연달아 사용하면 값을 불린형으로 변환 가능
console.log(!!'non-empty string'); // true
console.log(!!null); // false

// !! 대신 내장함수 Boolean을 사용해도 같은 결과 반환
console.log(Boolean('non-empty string')); // true
console.log(Boolean(null)); // false

 

 

12. nullish 병합 연산자 '??'

// a ?? b 의 평가 결과
// a 가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b

// nulish 병합 연산자 ?? 없이 동일하게 동작하는 코드는 아래와 같음
x = (a !== null && a !== undefined) ? a: b; // a가 null이 아니고 a가 undefined가 아닐 때

* '??'과 '||'의 차이에서 height 예시 헷갈림..!

- 안전성 관련 이슈 때문에 ??는 &&, || 와 함께 사용하지 못함

- 위의 제약을 피하기 위한 방법으로 괄호를 사용하면됨

// 제약
let x = 1 && 2 ?? 3; // SyntaxError: Unexpected token '??'

// 괄호 사용하여 제약 피함
let x = (1 && 2) ?? 3;
console.lg(x); // 2

 

 

13. while과 for 반복문

- soon...

 

 

14. switch문

- soon...

 

 

15. 함수

- 함수가 필요한 이유: 유사한 동작을 구현해야하는 경우 함수를 이용하면 중복을 줄일 수 있음

- 내장함수로는 alert(), prompt(), confirm() 등이 있음

- 함수선언

// 함수 선언 방식은 아래와 같음
function showMessage() {
	alert('hello');
}

// function 키워드, 함수이름, 괄호로 둘러싼 매개변수를 차례로 써주면 선언 가능
function getKeyword(keyword, page) {
	.. 함수 본문..
}

// 위에서 정의한 함수를 사용할 경우 아래와 같이 함수 이름 옆에 괄호를 붙여 호출

showMessage();
showMessage();

- 함수 이름: 함수는 어떤 '동작'을 수행하기 위한 코드를 모아둔 것. 따라서 함수 이름은 보통 동사이고, 간결하고 명확해야함. 코드를 읽는 사람이 함수 이름만 보고도 어떤 기능을 하는지 힌트를 얻을 수 있어야함.

- 함수는 동작 하나만 담당해야함: 함수는 이름에 언급된 동작을 정확히 수행해야하며, 그 외 동작은 수행해선 안됨 -> 이 경우 독립적인 함수 두 개에 나눠서 수행할 수 있게 수정해야함.

 

 

16. 함수 표현식

- 함수는 값이고 변수에 할당 가능함. 아래 예시와 같이 실행할 경우 괄호가 없기 때문에 실행되지 않지만 해당 함수의 코드가 출력됨.

function sayHi() { // (1) 함수 생성
	alert('hello'); 
}

let func = sayHi; // (2) 함수 복사

func(); // hello // (3) 복사한 함수를 실행(정상 실행됨)
sayHi(); // hello // 원래 함수도 정상 실행

// 함수 sayHi를 아래와 같이 함수 표현식을 사용해 정의 가능 (위와 아래의 결과는 같음)
let sayHi = function() {
	alert('hello');
}; // 코드 블록이 아니고 값처럼 취급되어 변수에 할당되기 때문에 구문 끝에 세미콜론 붙이는게 좋음(함수 표현식이라 사용된 것 아님)

let func = sayHi;

 

- 콜백 함수: 함수를 함수의 인수로 전달, 필요 시 인수로 전달한 함수를 나중에 호출(called back)

ex) 사용자가 'yes'라고 대답한 경우 showOk가 콜백이 되고, 'no'라고 대답한 경우 showCancel이 콜백이 됨

// 아래 함수는 반드시 질문을 해야하고, 사용자의 답변에 따라 yes()나 no()를 호출해야한다.
function ask(question, yes, no) {
	if(confirm(question)) yes()
    else no();
}

function showOk() {
	alert('동의하셨습니다.');
}

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

ask('동의하십니까?', showOk, showCancel); // 함수 showOk, showCancel이 ask 함수의 인수로 전달됨
// -> 함수 ask의 인수 showOk와 showCancel를 콜백 함수 또는 콜백이라고 부름

위 코드를 아래와 같이 짧게 변경할 수 있음

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

ask(
	'동의하십니까?'
    function() { alert('동의하셨습니다.'); }, // 이름 없이 선언한 함수를 익명함수라고 부른다.
    function() { alert('취소 버튼을 누르셨습니다.'); }
);

* 익명함수의 경우 변수에 할당된 것이 아니라서 ask 바깥에서 접근 불가하다.

 

- 함수 표현식 vs 함수 선언문

1) 문법차이

// 함수 선언문: 주요 코드 흐름 중간에 독자적 구문 형태로 존재
function sum(a, b) {
	return a + b;
}

// 함수 표현식: 표현식이나 구문 구성(syntax construct) 내부에 생성되며, 아래에서는 할당 표현식(= 를 이용해서 만든) 우측에 생성
let sum = function(a, b) {
	return a + b;
}; // 변수에 값으로 할당되었기 때문에 세미콜론 사용

2) 생성 시점 차이

* 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성함. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수 사용 가능

* 함수 선언문은 함수 선언문이 정의되기 전에도 호출 가능. 전역 함수 선언문은 스크립트 어디에 있느냐에 관계 없이 사용 가능한데, 그 이유는 자바스크립트 내부 알고리즘 때문임. 자바스크립트는 스크립트 실행 전, 전역에 선언된 함수 선언문을 찾고 해당 함수를 생성함(스크립트는 함수 선언문이 모두 처리된 이후 실행!)

 

3) 스코프

엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근 가능. 하지만 블록 밖에서는 접근 불가

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

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

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

} else {

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

}

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

위의 에러를 해결하기 위해서 if 문 밖에 함수 표현식으로 필요한 함수를 변수에 담아 선언하고 할당하면 된다.

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

let welcome;

if (age < 18) {

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

} else {

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

}

welcome(); // 제대로 동작

위의 코드를 줄이기 위해 아래와 같이 ? 연산자 사용 가능

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

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

welcome(); // 제대로 동작

 

 

17. 화살표 함수 기본

- 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법: 화살표 함수(arrow function)

let func = (arg1, arg2, ...argN) => expression
// 위 코드를 설명하면 인자 arg1..argN을 받는 함수 func이 만들어지고, 함수 func는 화살표 우측의 표현식을 평가하고 결과를 반환함

// 위 코드를 아래와 같이 길게 쓸 수 있음
let func = function(arg1, arg2, ...argN) {
	return expression;
};

// 좀 더 구체적인 예시
let sum = (a, b) => a + b;
alert(sum(1,2)); // 3

// 인수가 하나일 때, 괄호 생략 가능
let double = n => n * 2;
alert(double(3)); // 6

// 인수가 없을 때, 괄호 비워 놓으면 안됨. 생략 불가능
let sayHi = () => alert('hi');
sayHi();

 

- 본문이 여러 줄일 경우(중괄호 사용) return 지시자로 결과값 반환 필요

let sum = (a, b) => {
	let result = a + b;
    return result; // return 지시자로 결과값 반환 필요
};

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

 

 

18. 기본 문법 요약

- 앞에서 배운 내용 정리이므로 생략

 

---

👉개인적인 질문/메모

1) 화살표 함수와 일반 함수를 사용했을 때의 차이가 있었던 것 같은데, 이 부분에 대해서 찾아보기

 

 

👉공유하면 좋은 내용

1) 표현식과 선언문에 따라 함수 활용법이 다른 점

2) 언제 표현식 사용하고, 선언문을 사용할지 생각해 보기