#2 JavaScript 코어 기본 정리.

자바스크립트 코어 기본 정리

1. 엄격 모드 (use strict)

자바스크립트의 기존 기능이 변경되면서 호환성 문제를 해결하기 위해 사용한다.

최상단에 작성하여야 하며 클래스와 모듈을 사용한다면 생략해도 된다. (자동 적용)

하지만, "use strict"은 일반적으로 사용하는 것이 좋다.

"use strict";

2. 변수와 상수

변수

변수(variable)는 데이터를 저장할 때 쓰이는 이름이 있는 '저장소'이다. 자바스크립트에서는 let을 사용한다.

let message='Hello!'; // message라는 변수에 'Hello' 값 할당

var는 요즘에 사용하지 않는다. 오래된 코드임.

let , const를 사용하도록 한다.

 

변수명을 만들 때 '카멜표기법'을 흔히 사용한다. 첫 단어는 소문자로 하고 각 단어의 첫 글자를 대문자로 작성한다. (ex . myName)

 

변수명 처음에는 숫자로 시작할 순 없고 중간에 하이픈 '-'이 들어갈 수 없다.

 

예약어도 변수명으로 사용할 수 없다.(let,class,return,function..)

 

선언하지 않고 바로 할당해서 사용할 수 있지만 이는 안좋은 습관으로 에러를 발생시킨다. 따라서 꼭 선언해서 사용하도록 한다.

 

'use strict'를 사용하면 이는 에러가 난다.

num=5; // 선언하지 않고 바로 할당.

 

상수

변하지 않는 값을 선언할 때 const 를 사용한다.

const myBirthday='95.12.13'
const COLOR_RED = '#F00'; // 기억하기 힘든 값은 대문자로 할당이 관습임.

 

클린코드 예시 1

const BIRTHDAY='95.12.13';
const age=calculate(BIRTHDAY);

여기서 BIRTHDAY는 하드 코딩한 값으로 실행 전에 이미 값을 알고 있기에 대문자로 사용한다.

하지만 age는 런타임에 따라 재평가 되기 때문에 소문자로 사용한다.

 

클린코드 예시 2

현재 살고있는 행성, 현재 사용자를 변수로 표현할 때

let planet; // X
let ourPlanetName; // O

let user; // X
let currentUserName; // O

 

3. 자료형

자바스크립트는 자료형에 관계없이 사용 가능하며 중간에 바꿔도 에러가 나지 않는다.

let message="hello";
message=1;

⇒ 동적 타입 언어이기에 위험하다.

⇒ 타입스크립트를 사용해야 하는 이유.

Bigint

맨 뒤에 n을 붙여주면 BigInt로 사용 가능.

(보통 암호 작업에 사용되며 IE,사파리에서 적용X)

const bigInt=1212318937459174957198749198n;

null

비어있는 값이나 알 수 없는 값, 존재하지 않는 값을 표현할 때 사용.

let age=null;

• 숫자형 – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용합니다. 정수의 한계는 ±2 입니다.

  53

• bigint – 길이 제약 없이 정수를 나타낼 수 있습니다.

• 문자형 – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용합니다. 단일 문자를 나타내는 별도의 자료형은 없습니다.

• 불린형 – true, false를 나타낼 때 사용합니다.

• null – null 값만을 위한 독립 자료형입니다. null은 알 수 없는 값을 나타냅니다.

• undefined – undefined 값만을 위한 독립 자료형입니다. undefined는 할당되지 않은 값을 나타냅니다.

• 객체형 – 복잡한 데이터 구조를 표현할 때 사용합니다.

• 심볼형 – 객체의 고유 식별자를 만들 때 사용합니다.

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

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

 

4. 모달 창(modal window) 상호작용 3가지

alert

alert('hello')

prompt

let age = prompt('나이는?',24); // 뒤에는 defalut값
alert(`나이는 ${age} 입니다.`);

IE에서는 default값을 반드시 넣어주어야 한다.

confirm

true, false 반환

let isBoss = confirm("당신이 보스인가?");
//확인 , 취소가 나옴.

 

5. 연산자

일치 연산자 (===)

일반 ==는 0과 false를 구별하지 못한다.

''와 false도 구별하지 못한다. 따라서 정확히 구별하기 위해서 === (일치 연산자)를 사용하여 형 변환 없이 값을 비교한다. 엄격하게 검사함.

비교 연산자 요약

• 비교 연산자는 불린값을 반환합니다.
• 문자열은 문자 단위로 비교되는데, 이때 비교 기준은 '사전’순입니다.
• 서로 다른 타입의 값을 비교할 땐 숫자형으로 형 변환이 이뤄지고 난 후 비교가 진행됩니다(일치 연산자는 제외).
• null과 undefined는 동등 비교(==) 시 서로 같지만 다른 값과는 같지 않습니다.
• null이나 undefined가 될 확률이 있는 변수가 > 또는 <의 피연산자로 올 때는 주의를 기울이시기 바랍니다. null/undefined 여부를 확인하는 코드를 따로 추가하는 습관을 들이길 권유합니다.

 

6. null 병합 연산자 '??'

a ?? b
// x = (a !== null && a !== undefined) ? a : b;
// 위의랑 같은 뜻

a가 null도 아니고 undefined도 아니면 a. 그 외의 경우는 b

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "Anonymous");

⇒ Supercoder가 출력됨.

|| 과 ?? 의 차이점.

let height = 0;

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

height가 0으로 했을때 ||는 true,false값으로 처리해서 100이 되지만 ??는 정확히 null이나 undefined일 경우에만 100이 된다.

따라서 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 정확히 하기 위해 ||보다는 ??를 사용한다.

우선순위

??의 우선순위는 낮기 때문에 대부분 연산자보다 나중에 평가된다. 따라서 ??를 사용할때는 괄호를 추가하는게 좋다.

let height = null;
let width = null;

// 괄호를 추가!
let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

괄호 없이 ??를 ||나 &&와 함께 사용하는 것은 금지되어있다.

let x = (1 && 2) ?? 3; // 제대로 동작합니다.

alert(x); // 2

 

7. While과 for 반복문

let i = 0;
while (i < 3) { // 0, 1, 2가 출력됩니다.
  alert( i );
  i++;
}
for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력됩니다.
  alert(i);
}

삼항 연산자에 break나 continue 사용 불가

(i > 5) ? alert(i) : continue; // 여기에 continue를 사용하면 안 됩니다.

if문을 사용해야 한다.

label과 break/continue

중첩 반복문을 한번에 빠져나오고 싶을 경우 label 사용한다.

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('완료!');

outer 라는 이름을 가진 label 바로 탈출 가능.

 

8. 콜백 함수

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와 showCancle을 콜백 함수 또는 콜백이라고 불른다.

함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 나중에 호출한다는 뜻이다.

 

9. 함수 표현식 vs 함수 선언문

// 함수 선언문
function sum(a, b) {
  return a + b;
}

// 함수 표현식
let sum = function(a, b) {
  return a + b;
};

둘의 차이점은 자바스크립트 엔진이 언제 함수를 생성하는지에 달렸다.

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

하지만, 함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있다.

이는 자바스크립트가 스크립트가 실행되기 전에 초기화 단계에서 이미 함수 선언 방식으로 정의한 함수가 생성되기 때문이다.

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

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

이거는 실행이 된다.

하지만 아래 코드에서 함수는 실행되지 않는다.

sayHi("John"); // error!

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

• 함수는 값입니다. 따라서 함수도 값처럼 할당, 복사, 선언할 수 있습니다.
• “함수 선언(문)” 방식으로 함수를 생성하면, 함수가 독립된 구문 형태로 존재하게 됩니다.
• “함수 표현식” 방식으로 함수를 생성하면, 함수가 표현식의 일부로 존재하게 됩니다.
• 함수 선언문은 코드 블록이 실행되기도 전에 처리됩니다. 따라서 블록 내 어디서든 활용 가능합니다.
• 함수 표현식은 실행 흐름이 표현식에 다다랐을 때 만들어집니다.

 

JS 기본 요약 참고

ko.javascript.info/javascript-specials

기본 문법 요약