모던 JS 튜토리얼 정리 1

자료형

// 일반적인 문자열은 "",'' 둘 중 하나로 감싼다.
let name = "John";

// 변수를 문자열 중간에 삽입(백틱 ``사용)
alert( `Hello, ${name}!` ); // Hello, John!

// 표현식을 문자열 중간에 삽입
alert( `the result is ${1 + 2}` ); // the result is 3

typeof 연산자 : 피연산자의 자료형을 알려준다.

typeof 0 // "number"
typeof "hi" // "string"
typeof null // "object"
typeof alert // "function"
typeof Math // "object"

---

prompt 함수 : 사용자로부터 입력받는다.

confirm 함수 : 확인/취소 창 보여준다.

result = prompt(title,[default]) // title: 사용자에게 보여줄 문자열 , default: 입력 필드의 초깃값
// 사용자가 입력한 문자열 반환

result = confirm(question) // 매개변수로 받은 질문과 확인/취소 버튼이 있는 창을 보여준다.
// 확인/취소 => true/false 반환

---

break <labelName>문

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    let input = prompt(`(${i},${j})의 값`, '');
    // 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나온다.
    if (!input) break outer; // (*)
    // 입력받은 값을 가지고 무언가를 함
  }
}
alert('완료!');

---

* return문이 없거나 return 지시자만 있는 함수는 undefined를 반환한다.

* 접두어 추천

- get...값을 반환함.

- calc...무언가를 계산함.

- create...무언가를 생성함.

- check...무언가를 확인하고 불린값을 반환함.

---

함수표현식

// 1. 함수 선언문 방식으로 함수 만들기
function sayHi() {
  alert( "Hello" );
}

alert(sayHi); // 함수 코드가 보임.(괄호가 있어야 함수가 실행됨)

// 2. 함수 표현식을 사용해서 함수 만들기
let sayHi = function() {
  alert( "Hello" );
};

---

콜백(나중에 호출) 함수(실무에서 유용)

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

function showOK(){
	alert("동의하셨습니다");
}
function showCancel(){
	alert("취소하셨습니다");
}

// 사용법: 함수 showOK와 showCancel가 ask함수의 인자로 전달된다.
aks("동의하십니까?",showOK,showCancel);

(위의 코드를 함수표현식을 사용하면...) => 익명함수 사용!!

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

// 아래처럼 이름 없이 선언한 함수를 "익명함수"라고 한다.
// ask바깥에선 접근 불가능
ask(
	"동의하십니까?",
    function() {alert("동의");},
    function() {alert("취소");}
);

---

함수선언문 vs 함수표현식

// 함수선언문은 함수 선언문이 정의되기 전에도 호출가능.
// 함수표현식은 불가능.
sayHi("John"); // Hello, John

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

---

화살표 함수

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

/* 위 화살표 함수는 아래 함수의 축약 버전이다.
+ 인수가 하나라면 인수 감싸는 괄호 생략 가능
let sum = function(a, b) {
  return a + b;
};
*/

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

// 화살표(=>) 우측엔 표현식이 있음
let sum = (a, b) => a + b;

// 대괄호{ ... }를 사용하면 본문에 여러 줄의 코드를 작성할 수 있음. return문이 꼭 있어야 함.
let sum = (a, b) => {
  // ...
  return a + b;
}

// 인수가 없는 경우
let sayHi = () => alert("Hello");

// 인수가 하나인 경우
let double = n => n * 2;

 

cf. Ko.javascript.info

모던 JavaScript 튜토리얼