Javascript 기본 (1)

01. Javascript 기초 문법 (1)

 

1. 변수 선언, 대입 연산자

•  변수 선언 키워드 var, let, const

 

• 키워드 우측에 변수의 이름을 작성합니다.

 ex) let  a   

• var 키워드는 존재한다는것만 이해하고 사용하지않도록한다

            var 키워드를 사용하면 호이스팅이 일어나서 안좋다.

• let 키워드는 한번 선언한 변수를 여러번 변경할수 있다!
• const 키워드는 한번 선언한 변수의 값을 변경 할수 없다!
• 선언되지 않은 변수 이름을 사용하려고 하면 참조 에러가 발생하므로 주의

대입 연산자 키워드   = 

 

• 키워드 좌측에는  대입할 변수를 ,  키워드 우측에는 대입할 값을 작성합니다

 

ex)   let i = 0    좌측에 변수 / 우측에 대입할 값

 

+=  -=  variable++  variable-- 와 같은 구문 설탕도 있습니다!

 

variable 은 한국어로 변수

 

 

var age;
// Print: undefined 

//undefiend : 변수는 존재하나, 어떠한 값으로도 할당되지 않아 자료형이 정해지지(undefined) 않은 상태

//null 와 다르다 

//null : 변수는 존재하나, null 로 (값이) 할당된 상태. 즉 null은 자료형이 정해진(defined) 상태

age = 10;
// Print: 10

let age2 = 999;
// Print: undefined

age;
// Print: 10

age2;
// Print: 999

const name = 'Tim Kang';
// Print: undefined

name;
// Print: 'Tim Kang'

name = 'Gildong Hong';
// Print: Uncaught TypeError: Assignment to constant variable. 

//위에 const 키워드를 사용하여 값을 넣었기때문에 변경할수없다  

age = 12;
// Print: 12

age = age2 = 25
// Print: 25

//age 와  age2는 같아  그리고 25를 넣어줘

age;
// Print: 25

age2;
// Print: 25

 

2.비교 연산자

 

• ===
  • 양쪽에 위치한 값이 같은 경우 true로 평가되며, 다른 경우 false로 평가됩니다.
• !==
  • 양쪽에 위치한 값이 다른 경우 true로 평가되며, 다른 경우 true로 평가됩니다.
  • ! 가 값을 부정하는 Not의 의미로서 사용됩니다.
• > , <
  • 수학에서의 비교 기호와 똑같습니다.
  • > 는 좌측에 위치한 값이 더 클 때에만 true로 평가되며, 양쪽의 값이 같거나 우측에 위치한 값이 더 큰 경우 false로 평가됩니다.
  • < 는 반대로 우측에 위치한 값이 더 클 때에만 true로 평가되며, 양쪽의 값이 같거나 좌측에 위치한 값이 더 큰 경우 false로 평가됩니다.
• >= , <=
  • = 기호가 붙어 양 쪽의 값이 같은 경우에 true로 평가된다는 점이 위와 다릅니다.
  • >= 는 좌측에 위치한 값이 더 크거나 우측에 위치한 값과 같을 때에만 true로 평가되며, 우측에 위치한 값이 더 큰 경우 false로 평가됩니다.
  • <= 는 우측에 위치한 값이 더 크거나 좌측에 위치한 값과 같을 때에만 true로 평가되며, 좌측에 위치한 값이 더 큰 경우 false로 평가됩니다.
• == , !=
  • ==는 === 와 같은 기능을 하는 연산자이나, 사용하지 않는것을 권장합니다.
  • !=는 !== 와 같은 기능을 하는 연산자이나, 사용하지 않는것을 권장합니다.
  • 자바스크립트는 자동 형변환 기능을 가졌는데, 가볍게 보면 매우 편리한 기능이지만 알고보면 버그를 만들기 매우 쉬운 위험한 문법으로 받아들여야 합니다.
    • 자동 형변환이 적용되는 경우, 예시로 '10' == 10 의 결과가 true 로 평가됩니다. 숫자 자료형을 가진 값에 자동 형변환이 적용되는 경우, 문자열로 변환이 가능하다고 여겨 '10' === '10' 처럼 동작한다고 이해하면 된다.

자동 형변환(Promotion)이란?

자동 형변환(Promotion)은 프로그램 실행 도중에 자동적으로 형변환(타입변환)이 일어나는 것을 말합니다.

자동 형변환(Promotion)은 작은 메모리 크기의 데이터 타입을 큰 메모리 크기의 데이터 타입으로 변환하는 행위

 

 

byte a = 10;    --> 정수 10을 byte 데이터 타입의 변수인 a에 저장

int b = a;        --> byte 데이터 타입의 변수인 a를 int 데이터 타입의 변수인 b에저장

 

• == != 두가지 모두 위와 같은 동작을 포함하며, 버그를 유발하기 쉬운 문법이므로 === !== 를 사용하도록 버릇들이는게 좋습니다!!

 

10 === 10
// Print: true

10 === 100
// Print: false

10 !== 100
// Print: true

10 !== 10
// Print: false

10 > 10
// Print: false

11 > 10
// Print: true

99999 > 10
// Print: true

99999 < 10
// Print: false

10 < 99999
// Print: true

10 < 10
// Print: false

10 < 11
// Print: true

10 >= 10
// Print: true

10 <= 10
// Print: true

11 >= 10
// Print: true

11 <= 10
// Print: false

9 >= 10
// Print: false

9 <= 10
// Print: true

'10' === 10
// Print: false

'10' == 10
// Print: true

/* Print: true

자동 형변환이 적용된경우 문자열로 변환이 가능하다고 여겨   '10'==='10' 처럼 동작함 */

'10' !== 10
// Print: true

'10' != 10
// Print: false

// Print: false

// 자동 형변환이 적용된경우 문자열로 변환이 가능하다고 여겨   '10'!=='10' 처럼 동작함 */

 

3. 자료형

 

Boolean (불리언)

 

• Boolean (불리언)
  • 원시 자료형 중 하나
  • true(참) 혹은 false(거짓) 값으로만 표현할 수 있습니다.

• String (문자열)
  • 원시 자료형 중 하나
  • '값' 또는 "값" 와 같이 외따옴표, 쌍따옴표나 외따옴표를 쌍으로 값을 묶어 표현합니다.
• Number (숫자)
  • 원시 자료형 중 하나
  • 10 처럼 어떠한 따옴표나 콤마 등을 넣지 않고 숫자 값으로 표현합니다.
  • 10 !== '10' 두 값은 다른 자료형을 가지고 있기 때문에 같다고 볼 수 없습니다.
• undefined

• • 값이 할당되지 않은 변수는 기본적으로 undefined 값을 가집니다. 원시 자료형중 하나
  • 변수는 존재하나, 어떠한 값으로도 할당되지 않아 자료형이 정해지지(undefined) 않은 상태

• null
• 어떤 값이 비어있음을 의도적으로 표현할 때 사용됩니다. 원시 자료 형중 하나
•  변수는 존재하나 null 로 (값이) 할당된 상태 . 자료형이 정해진 (defined) 상태 

⭐typeof null 의 결과가 object 로 나오는 이유는?⭐자바스크립트의 typeof 키워드에서 null 에 대한

예외처리가 되어있지 않은 버그가 있었지만, typeof를 사용하는 모든 웹 사이트에 영향을 끼칠수 있기 때문에 수정되지 않고 있습니다. https://2ality.com/2013/10/typeof-null.html

The history of “typeof 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

 

 

const person = {

    name: '강승현',

    age: 52,

    'raising dog': '푸들',

}

 

만약 객체의 key에 여백(스페이스), 대쉬(-), 특수문자(*) 등 일반적인 변수명을 선언할 때 허용되지 않는 문자열을 사용할 경우 반드시 ⭐obj['key'] 와 같은 표현식을 사용해야 합니다.

 

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

 

 

여백(스페이스), 대쉬(-) 등 허용되지 않은 문자열이 포함된 경우 변수를 만들 수 없는것처럼 object의

키로 사용하기 위해서는 따옴표로 감싸야 합니다.

person.'raising dog'는 참조가 불가능하지만, person['raising dog']로 하는 경우 참조가 가능합니다.

 

• ⭐객체 구조 분해 할당⭐ 객체를 분해할 때에는 반드시 변수명과 객체의 프로퍼티 이름이 일치해야 합니다.
• 프로퍼티의 이름이 유효한 식별자인 프로퍼티만 분해 후 할당됩니다.
• ES6에서 새롭게 도입한 문법이며 객체(Object) 나 배열(List)을 변수로 ‘분해'할 수 있습니다.

 

const obj = { name: "이용우", age: 28, tech: "Node.js" };

const { name, age, tech, hair } = obj;

console.log(name); // 이용우

console.log(age); // 28

console.log(tech); // Node.js

console.log(hair); // undefined: obj에는 "hair" 프로퍼티가 존재하지 않습니다.

 

 

• Array (배열)  
  • [value, value2, value3] 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있습니다.
  • 다른 언어에서는 이와 같은 자료형을 **List(리스트)**로 부르기도 하지만 JS에서의 공식 명칭은 Array입니다.
  • 배열에는 Index라고 하는 개념이 존재하며, value에 접근 가능하게 해주는 식별자입니다.
    • 비유하자면 책의 목차(Index)에 있는 페이지 수와 같으며, 목차를 보고 해당 페이지를 펼치면

                       원하는 내용(value) 을 볼 수 있는것과 같습니다.

• • • Index의 최소 값은 0입니다.

const names = ['강승현', '홍길동', '김아무개'];

names[0];

// Print: '강승현'

names[2];

// Print: '김아무개'

names[3];

// Print: undefined

 

• ⭐ 배열 구조 분해 할당 ⭐배열을 분해할 때에는 변수 이름을 마음대로 선언할 수 있고, 배열의 순서대로 할당됩니다.
• 배열 구조 분해 할당으로 선언한 변수를 제외한 나머지 배열의 요소는 할당되지 않습니다
• ES6에서 새롭게 도입한 문법이며 객체(Object) 나 배열(List)을 변수로 ‘분해'할 수 있습니다.

const arr = ["Node.js", "React", "Spring"];

// 변수 이름을 마음대로 선언  배열의 순서대로 할당

const [backEnd, frontEnd] = arr;

console.log(backEnd); // Node.js

console.log(frontEnd); // React