[JavaScript] 1주차 발제

자료형

자바스크립트에는 여덟 가지 기본 자료형이 있다.

• 숫자형 – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용한다. 정수의 한계는 ±253 이다.
• bigint – 길이 제약 없이 정수를 나타낼 수 있다.
• 문자형 – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용한다. 단일 문자를 나타내는 별도의 자료형은 없다.
• 불린형 – true, false를 나타낼 때 사용한다.
• null – null 값만을 위한 독립 자료형이다. null은 알 수 없는 값을 나타낸다.
• undefined – undefined 값만을 위한 독립 자료형이다. undefined는 할당되지 않은 값을 나타낸다.
• 객체형 – 복잡한 데이터 구조를 표현할 때 사용한다.
• 심볼형 – 객체의 고유 식별자를 만들 때 사용한다.

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

• typeof x 또는 typeof(x) 형태로 사용한다.
• 피연산자의 자료형을 문자열 형태로 반환한다.
• null의 typeof 연산은 "object"인데, 이는 언어상 오류이다. null은 객체가 아니다.

 

단항, 이항, 피연산자

• 피연산자 : 연산자가 연산을 수행하는 대상, 인수라고 불리기도 한다.
• 단항 연산자 : 피연산자를 하나만 받는 연산자
• 이항 연산자 : 피연산자를 두개 받는 연산자

 

자바스크립트 수학 연산자

• 덧셈 연산자 : +
• 뺄셈 연산자 : -
• 곱셈 연산자 : *
• 나눗셈 연산자 : /
• 나머지 연산자 : %
• 거듭제곱 연산자 : **

거듭제곱 연산자

// 제곱
alert( 2 ** 2 ); // 4  (2 * 2)
alert( 2 ** 3 ); // 8  (2 * 2 * 2)
alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)

// 제곱근
alert( 4 ** (1/2) ); // 2 (1/2 거듭제곱은 제곱근)
alert( 8 ** (1/3) ); // 2 (1/3 거듭제곱은 세제곱근)

 

비교 연산자

문자열 비교 : 자바스크립트는 '사전'순으로 문자열을 비교한다.

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

 

다른 형을 가진 값 간의 비교

문자열로 된 숫자 (ex. "123") 같은 값은 비교 시 숫자형으로 변환된다.

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

 

불린값의 경우 true 는 1 false 는 0으로 변환된다.

alert( true == 1 ); // true
alert( false == 0 ); // true

 

일치 연산자 

동등 연산자( == )은 0과 false, ''과 false를 구분하지 못한다.

alert( 0 == false ); // true
alert( '' == false ); // true

 

일치 연산자( === )로 비교 가능. 자료형의 동등 여부까지 검사한다.

 

alert( 0 === false ); // false, 숫자형과 불리언 비교
alert( '' === false ); // false, 빈 문자열과 불리언 비교

 

null과 undefined 비교

일치 연산자 비교

 

alert( null === undefined ); // false

 

두 값의 자료형이 다르기 때문에 false 를 반환한다.

 

동등 연산자 비교

 

alert( null == undefined ); // true

 

산술 연산자나 기타 비교 연산자 (<, >, <=, >=)와 비교시 null 은 0 undefined는 NaN으로 변환된다.

 

null 과 0 비교

 

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

(1), (3)은 null이 0으로 변환 되기 때문에 반환값이 이해가 되는데 (2)의 경우는 왜 false를 반환할까?

동등 연산자는 피연산자가 null이나 undefined일 때 형변환을 하지 않기 때문인다. null과 undefined를 비교할 때는 true 나머지의 경우 전부 false를 반환한다.

 

undefined를 비교하면 어떨까?

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

 

모두 false이다. null의 경우 0으로 변환 되지만 undefined 는 NaN(Not a Number)로 변환 되기 때문에 어찌 보면 당연한 결과다.

 

if문 조건부 연산자 ( ? )

조건부 연산자 혹은 삼항 연산자라고 불린다. if문을 좀 더 간결하게 표현한 문법이다.

let result = condition ? value1 : value2;

 

condition이 true인 경우 value1을 false인 경우 value2를 result에 할당한다.

 

다중 조건부 연산자

다중 조건부 연산자 보다는 else-if문을 사용하는게 가독성이 더 좋아보인다.

 

반복문

while문

while (condition) {
  // 코드
  // '반복문 본문(body)'이라 불림
}

 

do-while문

do {
  // 반복문 본문
} while (condition);

 

for문

 

for (begin; condition; step) {
  // ... 반복문 본문 ...
}

 

break, continue

 

let sum = 0;

while (true) {

  let value = +prompt("숫자를 입력하세요.", '');

  if (!value) break; // (*)

  sum += value;

}
alert( '합계: ' + sum );

for (let i = 0; i < 10; i++) {

  // 조건이 참이라면 남아있는 본문은 실행되지 않습니다.
  if (i % 2 == 0) continue;

  alert(i); // 1, 3, 5, 7, 9가 차례대로 출력됨
}

 

switch문

if문 대신 switch문을 활용할 수 있다.

let a = 2 + 2;

switch (a) {
  case 3:
    alert( '비교하려는 값보다 작습니다.' );
    break;
  case 4:
    alert( '비교하려는 값과 일치합니다.' );
    break;
  case 5:
    alert( '비교하려는 값보다 큽니다.' );
    break;
  default:
    alert( "어떤 값인지 파악이 되지 않습니다." );
}

switch문 괄호안에 조건문을 넣어준다. 각 case마다 break를 넣어줘야하는데 break를 넣지 않는 경우 case 내부의 로직이 수행 되었슴에도 다음 라인으로 넘어가 코드를 실행하게 된다. 

 

let a = 2 + 2;

switch (a) {
  case 3:
    alert( '비교하려는 값보다 작습니다.' );
  case 4:
    alert( '비교하려는 값과 일치합니다.' );
  case 5:
    alert( '비교하려는 값보다 큽니다.' );
  default:
    alert( "어떤 값인지 파악이 되지 않습니다." );
}

alert( '비교하려는 값과 일치합니다.' );
alert( '비교하려는 값보다 큽니다.' );
alert( "어떤 값인지 파악이 되지 않습니다." );

 

case문을 여러개 묶을 수 있다. 다른 조건이지마 같은 로직을 수행할 필요가 있는 경우 활용하면 유용하다.

let a = 3;

switch (a) {
  case 4:
    alert('계산이 맞습니다!');
    break;

  case 3: // (*) 두 case문을 묶음
  case 5:
    alert('계산이 틀립니다!');
    alert("수학 수업을 다시 들어보는걸 권유 드립니다.");
    break;

  default:
    alert('계산 결과가 이상하네요.');
}

 

함수

함수 선언문

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

 

함수 표현식

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

 

함수는 sayHi()처럼 호출할 수 있다는 점 때문에 일반적인 값과는 조금 다흔 특별한 종류의 값이다. 하지만 그 본질은 값이기 때문에 값에 할 수 있는 일을 함수에도 할 수 있다.

변수를 복사해 다른 변수에 할당하는 것처럼 함수를 복사해 다른 변수에 할당할 수도 있다.

function sayHi() {   // (1) 함수 생성
  alert( "Hello" );
}

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

func(); // Hello     // (3) 복사한 함수를 실행(정상적으로 실행됩니다)!
sayHi(); // Hello    //     본래 함수도 정상적으로 실행됩니다.

 

콜백 함수

 

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은 콜백 함수 또는 콜백이라고 불린다.

함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이 콜백 함수의 개념이다. 위 예시에선 사용자가 "yes"라고 대답한 경우 showOk가 콜백이 되고, "no"라고 대답한 경우 showCancel가 콜백이 된다.

 

함수 선언문 VS 함수 표현식

가장 큰 차이는 언제 생성되었느냐 이다. 함수 표현식의 경우 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다. 함수 선언문의 경우 함수 선언문이 정의 되기 전에 호출할 수 있다.

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

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

sayHi("John"); // error!

let sayHi = function(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 = 16; // 16을 저장했다 가정합시다.

if (age < 18) {
  welcome();               // \   (실행)
                           //  |
  function welcome() {     //  |
    alert("안녕!");        //  |  함수 선언문은 함수가 선언된 블록 내
  }                        //  |  어디에서든 유효합니다
                           //  |
  welcome();               // /   (실행)

} else {

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

// 여기는 중괄호 밖이기 때문에
// 중괄호 안에서 선언한 함수 선언문은 호출할 수 없습니다.

welcome(); // Error: welcome is not defined

 

블록 내부에서는 welcome함수가 제대로 호출되지만 여전히 외부에서 welcome()을 호출이 안된다. 이를 해결할 수 있는 방법이 함수 표현식을 활용하는 방법이다. 아래처럼 welcome변수를 외부에 선언을 하고 함수를 블록 내부에서 값으로 할당하면 외부에서도 사용할 수 있다.

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

let welcome;

if (age < 18) {

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

} else {

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

}

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

 

화살표 함수

let func = (arg1, arg2, ...argN) => expression

결과만 반환하는 단순한 경우 return을 생량할 수 있다.

let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

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

본문이 여러 줄로 구성되어 있는 경우 {중괄호}와 return 필요