Javascript 기초 문법 (1)

변수 선언, 대입연산자

• 변수 선언 키워드
  • var: 잘 사용하지 않음
  • let: 선언 후 변경 가능
  • const: 선언 후 변경 불가
• 대입 연산자 키워드
  • =

---

비교연산자

• ===
  • 값과 데이터 타입 모두 비교
  • 타입 변환을 시도하지 않으며, 값이 동일하고 데이터 타입도 동일할 때만 true를 반환

console.log(5 === '5'); // false, 숫자 5와 문자열 '5'는 데이터 타입이 다름
console.log(null === undefined); // false, null과 undefined는 데이터 타입이 다름

• ==
  • 값만 비교
  • 두 값의 데이터 타입이 다를 경우, 타입 변환(Type Coercion)을 시도한 후 비교 (자바스크립트는 자동 형변환 기능을 가지고 있음)

console.log(5 == '5'); // true, 숫자 5와 문자열 '5'가 타입 변환 후 같다고 간주됨
console.log(null == undefined); // true, 둘 다 비어있다고 간주됨

 

• !==
  
  • 값과 데이터 타입 모두 비교
  • 타입 변환을 시도하지 않으며, 값이 동일하지 않거나 데이터 타입이 다를 때 true를 반환

console.log(5 !== '5'); // true, 숫자 5와 문자열 '5'는 데이터 타입이 다름
console.log(null !== undefined); // true, null과 undefined는 데이터 타입이 다름

• !=
  • 값만 비교하며, 필요시 타입 변환을 시도한 후 비교
  • 두 값이 동일하지 않다고 간주될 때 true를 반환

console.log(5 != '5'); // false, 숫자 5와 문자열 '5'가 타입 변환 후 같다고 간주됨
console.log(null != undefined); // false, 둘 다 비어있다고 간주됨

• >, <
  • > 는 좌측에 위치한 값이 더 클 때 true, 양쪽의 값이 같거나 우측에 위치한 값이 더 큰 경우 false
  • < 는 우측에 위치한 값이 더 클 때 true, 양쪽의 값이 같거나 좌측에 위치한 값이 더 큰 경우 false
• >=, =<
  • >= 는 좌측에 위치한 값이 더 크거나 같을 때 true, 우측에 위치한 값이 더 큰 경우 false
  • =< 는 우측에 위치한 값이 더 크거나 같을 때 true, 좌측에 위치한 값이 더 큰 경우 false

---

자료형

• Boolean (불리언)
  • 원시 자료형 중 하나(변경되지 않는 고유한 원시자료형)
  • 조건문에서 많이 사용
  • true 혹은 false 으로만 값을 표현할 수 있음
• String (문자열)
  • 원시 자료형 중 하나
  • '값' 또는 "값"처럼 ''나, ""로 묶어서 표현
• Number (숫자)
  • 원시 자료형 중 하나
  • 10 처럼 어떠한 따옴표나 콤마 등을 넣지 않고 숫자 값으로 표현
  • 10 !== '10' 두 값은 다른 자료형(숫자와 문자열)을 가지고 있기 때문에 같다고 볼 수 없음
• undefined
  • 원시 자료형 중 하나
  • 값이 할당되지 않은 변수는 기본적으로 undefined 값을 가짐
• null
  • 원시 자료형 중 하나
  • 어떤 값이 비어있음을 의도적으로 표현할 때 사용
• Object (객체)
  • { key1: value, key2: value } 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있음
  • 다른 언어에서는 이와 같은 자료형을 **Dictionary(딕셔너리)**로 부르기도 하지만 JS에서의 공식 명칭은 Object
  • key를 기준으로 객체에 있는 value(값)에 접근할 수 있음
  • 객체의 key에 접근하는 방법 두가지
    • obj.key
    • obj['key']

    const person = {
    	name: '강승현',
    	age: 52
    };
    
    person.name;
    // Print: '강승현'
    
    person['name'];
    // Print: '강승현'
    
    person.hobby;
    // Print: undefined
    

  • 만약 객체의 key에 여백(스페이스), 대쉬(-), 특수문자(*) 등을 사용할 경우, 반드시 obj['key'] 와 같은 표현식을 사용
    

    const person = {
        name: "강승현",
        age: 52,
        'raising dog': '푸들',
    }

  • object의 키로 사용하기 위해서는 따옴표로 감싸야 함
  • person.'raising dog'는 참조가 불가능하지만, person['raising dog']로 하는 경우 참조가 가능
• Array (배열)
  • [value, value2, value3] 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있음
  • 다른 언어에서는 이와 같은 자료형을 **List(리스트)**로 부르기도 하지만 JS에서의 공식 명칭은 Array
  • 배열에는 Index라고 하는 개념이 존재하며, value에 접근 가능하게 해주는 식별자
    • Index의 최소 값은 0

    const names = ['강승현', '홍길동', '김아무개'];
    
    names[0];
    // Print: '강승현'
    
    names[2];
    // Print: '김아무개'
    
    names[3];
    // Print: undefined
    

• NaN
  • Not a Number의 줄임말이며, Number 자료형에 속함
  • 숫자가 아닌 값을 숫자로 변환하는 경우 NaN으로 반환됩니다.
  • ❓ 그렇다면 NaN는 어떻게 판별할까요?
    • NaN은 다른 모든 값과 비교했을 때 같지 않으며, 다른 NaN과도 같지 않음
    • NaN의 판별은 Number.isNaN() 또는 isNaN()을 이용하면 제일 분명하게 판별할 수 있음
    • isNaN()은 현재 값이 NaN이거나, 숫자로 변환했을 때 NaN이 될 경우 true를 반환
    • Number.isNaN()은 현재 값이 NaN이어야만 true를 반환

    NaN === NaN;        // false
    Number.NaN === NaN; // false
    isNaN(NaN);         // true
    isNaN(Number.NaN);  // true
    

• Function (함수)
  • 함수는 기능의 단위를 묶거나 반복되는 코드를 줄이기 위해 사용
  • 아래와 같은 형태로 표현할 수 있으며, 위의 예시에서는 getMyName이 함수의 이름이 됩니다.

  function getMyName() {
      return '함수가 반환할 값';
  }
  
  getMyName(); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.
  // Print: '함수가 반환할 값'

  • 아래와 같은 형태로 변수에 할당이 가능

  const variable = function() {
  	return '함수가 반환할 값';
  }
  
  variable(); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.
  // Print: '함수가 반환할 값'

  • Argument(인수 또는 인자)를 입력 받을 수 있음

  function getMyName(myName) {
  	return myName;
  }
  
  getMyName('인자를 넣습니다.'); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.
  // Print: '인자를 넣습니다.'