자바스크립트 기본 문법

6 minute read


  • 참고자료: https://ko.javascript.info/first-steps
    이 포스팅은 처음 언어를 배운 사람들을 위함이 아니라 적어도 한 가지 언어에 대해 익숙한 개발자가 javascript를 새로 배울 때 기초 문법을 빠르게 학습하기 위해 작성된 글임을 명시합니다.


Hello world

  • How to print hello world 
          alert( "Hello world!" );
  • How to print hello world in html code 
          <script> alert( "Hello world!" ); </script>
  • With another source(file); 
      <script src="./helloworld.js"></script> //링크나 절대경로, 상대경로 삽입도 가능

엄격모드

"use strict"; //반드시 script 상단에 위치해야함. 아닐 경우 엄격모드가 활성화 되지 않음.
// use strict 하위 코드는 script 전체가 모던한 방식으로 실행됨.


변수 선언 let, var, const

  • let 
      let variable = 'test';
  let num = 1;
  let $ = 1; // 변수명에 $ 사용 가능
  let _ = 1; // 변수명에 _ 사용 가능
  let test-string = 'hi'; // 변수명에 - 사용 불가능
  • var: let보다 더 오래된 방식 
      var variable = 'test';
  var num = 1;
  • const 
      const size = 1000; //상수 선언, 값 변경 불가(에러).
  const COLOR_SIGNITURE_BLUE = '#272727'; //const 예시: 반복되는 색깔 저장.
  • use strict를 사용하지 않으면 let 없이도 변수 생성이 가능하지만 엄격 모드에서 에러를 발생시키기 때문에 좋지 않음. 
      num = 5;

      "use strict"
  num = 6; // error


자료형

  • 선언된 변수의 자료형을 바꿀 수 있음. 
      let variable = 'test';
  variable = 1;
  • Big int
    • (2^253-1)보다 큰 값이거나 -(2^253-1)보다 작은 경우, 정수 끝에 n 붙여서 길이에 관계 없이 정수 나타낼 수 있음. 
        cosnt bigInt = 567809145162093924921561835028563290n;
  • String
    • ''와 ""를 구분하지 않음
    • Backtick `을 사용하여 변수나 표현식을 문자열 사이에 삽입 가능. 
        let str = 'Hello';
  let str2 = "world";
  let sentence = `${str} ${str2}!`; 
  let sentence2 = `1+2 is ${1+2}`;
  • Boolean: true or false 
      let TRUE = true;
  let FALSE = false;
  • null and undefined 
      let NULL = null;
  let name; //선언이 되었으나 값이 할당되지 않은 경우 default로 undefined가 할당됨.
  • typeof: 변수의 자료형을 반환하는 연산자. 
      typeof true; //"boolean"
  typeof 1; //"number"
  typeof Symbol("id")// "symbol": 객체의 고유 식별자를 만들 때 사용
  typeof null // "object": 실제로 null은 object가 아님. 언어 자체의 오류임.
  typeof alert // "funciton"


alert, prompt, confirm

*alert 사용자가 ‘확인’ 버튼을 누를 때까지 창이 계속 떠있음. js alert("Hello world!");

  • prompt 두 개의 인수를 받음. 브라우저에서 제공.
    • 텍스트 메세지와 입력 필드, 확인, 취소 버튼이 있는 모달 창을 보여준다. 
        result = prompt(title, [default]);
    • title 사용자에게 보여줄 문자열
    • default 입력 필드의 초기값.
    • [] 필수 사항이 아니라 옵션임을 의미.

      인터넷 익스플로러에서는 [] 안에 매개변수가 없는 경우 undefiend를 넣기 때문에 ''을 넣어주어야 깔끔한 모달창이 된다.

  • confirm
    • question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여줌.
    • 사용자가 확인버튼를 누르면 true, 그 외의 경우는 false를 반환 
        result = confirm(question);

      예시

      let answer = confirm("Are you a student?");
alert( answer ); //returns 'true' or 'false' depending what user clicked.


형변환

  • To string: String() 
          value = String(value);
  • To number: Number() 
          let num = Number(str);
  • To boolean: Boolean()
    • 0, null, undefined, NaN, "": false를 리턴.
    • 그 외는 true를 리턴.

      단, "0"은 true를 리턴한다.

        alert( Boolean(1) ); // 숫자 1(true)
  alert( Boolean(0) ); // 숫자 0(false)
  alert( Boolean("0")); //true


연산자

  • ` ** ` 거듭제곱과 제곱근 연산 가능 
     alert( 2 ** 3 ); // 8 
 alert( 8 ** (1/3) ); // 2 (1/3 거듭제곱은 세제곱근)
  • 이항 연산자 + 
      let s = "my" + "string"; //mystring
  alert( '1' + 2 ); // "12" string
  alert( 2 + '1' ); // "21" string
  • 단항 연산자 +
    • 숫자형이랑 사용할 경우: 영향 없음. 
        let x = 1;
  alert( +x ); // 1
    • 숫자형이 아닌 피연산자와 사용할 경우: 숫자형으로 바뀜. 
        alert( +true ); // 1
  alert( +"" );   // 0
  • 전위형 후위형 ++
    • ++a 전위형은 증가 후의 값을 반환
    • a++ 후위형은 증가 전의 값을 반환
      let a = 1, b = 1;

  alert( ++a ); // 2 
  alert( b++ ); // 1

  alert( a ); // 2
  alert( b ); // 2
  • 일치 연산자 == 와 ===
    • ==은 0과 false를, ''과 false를 구분하지 못함. 
        alert( 0 == false ); // true
  alert( 0 == false ); // true
  alert( null == undefined ); // true
    • ===는 비교 가능. 
        alert( 0 === false ); // false
  alert( null === undefined ); // false

      비교 연산자 >, >=, <, <= 의 피연산자로 undefined나 null이 오지 않도록 주의.


if and else

 if(condition){
     //some codes...
 }else{
     //another codes...
 }

 (condition) ? {sth for true} : {sth for false} //format
 (max > 10) ? true : false //example

or, and, not

  • or ||
  • and &&
  • not !
  • not !! : 불린형으로 변환 가능. 내장함수 Boolean()과 동일.
alert( !!"non-empty string" ); // true
alert( !!null ); // false

alert( Boolean("non-empty string") ); // true
alert( Boolean(null) ); // false
  • a ?? b a가 null도 아니고 undefined도 아니면 a, 그 외에는 b. 아래 코드와 같은 의미
 x = (a !== null && a !== undefined) ? a : b;


반복문

  • while 
    while (condition) {
// 코드
// '반복문 본문(body)'이라 불림
}
  • do while 
    do {
// 반복문 본문
} while (condition);
  • for 
    for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력됩니다.
alert(i);
}
  • break 반복문 빠져나오기
  • continue 다음 반복으로 넘어가기


활용

  • 이중 for문에서 반복문 빠져나오고 싶을 때!
for (...) {
  for (...) {
    let input = prompt(`(${i},${j})의 값`, '');
    // 여기서 멈춰서 아래 alert(done)로 가고 싶으면?
  }
}
alert('done');
  • solution with label
outer: for (...) {
  for (...) {
    let input = prompt(`(${i},${j})의 값`, '');
    // 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나옵니다.

    if (!input) break outer; // (*)
    // 입력받은 값을 가지고 무언가를 함
  }
}
alert('done');


switch

* https://ko.javascript.info/switch <br>

함수

  • 함수 선언 
    function function_name(parameters){
  //codes...
}
  • 예시 - 함수 선언 
    function showMessage() {
  alert( 'Hello world!' );
}

  • 예시 - return

      function checkPassOrFail(score) {
      let PASS = true;
      let FAIL = false;

      if (score >= 90) {
          return PASS;
      } else {
          return FAIL;
      }
  }

  //여러 줄에 걸쳐서 리턴하고 싶은 경우
  return (
  some + long + expression
  + or +
  whatever * f(a) + f(b)
  )



함수 표현식

함수 선언 vs 함수 표현식

  • 함수 표현식을 통해 함수를 변수에 할당 가능.
  • 함수 선언에는 세미콜론이 없지만 함수 표현식에는 세미콜론이 있음. 
    function test() {
  alert( "test" );
} //세미콜론 없음.

    let test = function() {
  alert( "test" );
}; // 세미콜롬 있음

  • 예시

      // 함수 생성
  function Helloworld() {   
      alert( "Hello world!" );
      return "result";
  }

  // 함수 자체를 복사
  let func = Helloworld;
  // 함수의 반환 값을 저장 
  let result = Helloworld();

  // 결과 확인
  func(); // alert "Hello world!"
  sayHi(); // alert "Hello world!"
  alert(result); // "result"

콜백함수(call-back function)와 익명함수(anonymous function)

  • 콜백함수 함수를 값처럼 전달

  • 익명함수 이름 없이 선언한 함수

  • 콜백함수와 익명함수가 사용된 아래 두 코드를 비교해보자. 익명함수는 ask 함수 외부에서 접근 불가능하다.

question 질문
yes “Yes”라고 답한 경우 실행되는 함수
no “No”라고 답한 경우 실행되는 함수 

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

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

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

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);

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

//익명 함수 사용
ask(
    "동의하십니까?",
    function() { alert("동의했습니다."); },
    function() { alert("동의하지 않았습니다."); }
);


화살표 함수(arrow function) 기본

  • 함수 표현식보다 단순하고 간결하게 함수를 만들 수 있는 방법
  • 본문(function body, expression)이 한 줄인 함수를 작성할 때 유용 
    let func = (arg1, arg2, ...argN) => expression
  • 위의 코드는 아래 코드의 축약 버전으로 동일한 의미를 갖는다. 
    let func = function(arg1, arg2, ...argN) {
  return expression;
};

    예시1 - 매개변수가 a, b일 경우

    // 기존 방식
let sum = function(a, b) {
  return a + b;
};
// 축약 버전
let sum = (a, b) => a + b;

    예시2 - 매개 변수가 하나(n)일 경우

    // 기존 방식
let double = function(n) { 
 return n * 2; 
}
// 축약 버전
let double = n => n * 2;

    예시3 - 매개 변수가 없을 경우

    // 기존 방식
let sayHi = function(){
 alert("Hi!");
}
//축약 버전
let sayHi = () => alert("Hi!"); //괄호 생략 불가

    예시4 - expression이 여러 줄인 경우: {}을 사용하고 반드시 return 값이 존재해야 함.

     //기존 방식
 let sum = function(a,b){
     let result = a + b;
     return result;
 }

 //축약 버전
 let sum = (a, b) => {  
 let result = a + b;
 return result; //필수
 };

 // 결과 확인
 alert( sum(1, 2) ); // 3

Categories:

Updated: