변수 (Variable)

• 저장소에서 어떤 값(데이터)을 담는 저장소(메모리)의 이름을 변수라고 한다.
• 변수는 상황에 따라 변할 수 있는 값
• 변수는 이름(Label)이 붙은 값
• 변수명에는 띄어쓰기 불가능, 변수는 CamelCase로 써야한다.

선언과 할당

• 선언과 할당 (let 으로 선언하고 = 으로 할당한다.)

  ex) let myname = 'Steve';

• 한줄에 여러번 선언할 수 있다

  ex) let myname, weight, height;

• 한줄에 여러번 할당할 수 있다

  ex) let myname = 'park', weight = 68, height = 173;

기타

• 코드의 각 한줄한줄을 표현식(Expression) 이라고 한다.

• 할당되지 않은 변수는 undefined 라고 나온다.

  ex) let myName

        myName;   //   undefined;

타입 (Type)

원시 자료형

• 고정된 저장공간을 차지하는 데이터를 모두 원시타입(primitive type) 라고 한다.
• 객체가 아니면서 method를 가지지 않는 6가지 타입
• string, number, boolean, undefined, bigint, symbol, (null)
• 원시 자료형은 모두 하나의 데이터만을 담고있다.

참조 자료형

• 자바스크립트에서 원시 자료형이 아닌 모든 것들은 참조 자료형이다.
• 대표적으로 배열과 객체, 함수가 있다.
• 이러한 자료형을 자바스크립트에서는 참조 자료형(reference data type)라고 부른다.
• 원시 자료형은 하나의 변수에는 하나의 데이터만을 담을 수 있는데, 참조 자료형은 여러 데이터를 담을 수 있다.
• 참조 자료형의 데이터는 heap 이라고 부르는 별도의 데이터 보관함에 저장되고, 변수에는 데이터가 저장된 메로리 상의 주소가 저장된다.
• 원시 자료형과는 다르게 heap 안에 저장된 데이터는 원하는 대로 데이터 사이즈를 조정할 수 있다.

typeof

• typeof 메소드를 활용해서 특정값의 타입을 확인할 수 있다.

  ex) console.log(typeof 42);
         // expe cted output: "number"
  
         console.log(typeof 'blubber');
         // expected output: "string"
  
         console.log(typeof true);
         // expected output: "boolean"
  
         console.log(typeof undeclaredVariable);
         // expected output: "undefined"

=== VS !== (엄격한 비교)

• === : 양쪽의 값이 같다는 뜻
• !== : 양쪽의 값이 같지 않다는 뜻

변수의 타입까지 고려하여 비교함

== VS !=

• == : 양쪽의 값이 같다는 뜻
• != : 양쪽의 값이 같지 않다는 뜻

변수의 타입까지는 고려하지 않는다

ex) 1 == "1" /// true

  숫자 1과 문자열 1은 값이 같다.

함수 (Function)

• 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록
• 함수는 항상 출력값을 반환한다.
• 지시사항들의 묶음
• 함수는 코드의 묶음이다.
• 함수는 기능의 단위이다.
• 함수는 구체적인 입력값과 출력값을 가진다.
• 함수는 반드시 돌아온다.
• 함수는 특별한 공간에 저장된다.
• 함수의 선언과 호출
• ketword : function
• name : getTriangheArea
• paremeter : base, height
• body : let triahgneArea = (base * height) / 2; return triangleArea;

함수 선언 방법

함수 선언식

function getTryangleArae(base, height) {
  let triangleArea = (base * height) / 2;
	return triangleArea;
}

함수 표현식

• 변수를 선언하고 익명함수를 할당한다.

const getTriangheArea = function (base, height) {
  let triangleArea = (base * height) / 2;
  return triangheArea
}

화살표 함수

• ES6 문법으로 새로 도입된 함수
• 화살표로 축약한 익명함수 추가

const getTriangleArea = (base, height) => {
  let triangheArea = (base * height) / 2;
	return triangleArea;
}

• 만약 함수의 본문(body) 에 return 문만 있는 경우, return 과 {} 중괄호(curly bracket) 를 생랼할 수 있다.
• return 문에서 소괄호를 사용할 수 있다

const getTriangleArea = (base, height) => base * height / 2; // 정상작동
const getTriangleArea = (base, height) => { base * height / 2 }; // undefined 리턴

✯ 함수 내의 표현식이 2줄 이상인 경우에는 return 과 {} 중괄호를 명시적으로 쓰는 것이 좋다.

매개변수 / 전달인자

• 매개변수 (parameter) : 함수를 선언할 때 소괄호 안에 변수로 넣어주는 값을 말한다.

  • 함수를 실행할 때 입력에 따라서 바뀔 수 있는 변수. let 과 같은 키워드 없이 사용 가능

• 전달인자 (argument) : 함수를 호출할 때 전달해주는 값을 말한다.

  • 함수를 호출할 때 매개변수에 할당되는 값을 만한다.

조건문 (Conditional expression)

• 조건문은 어떠한 조건을 판별하는 기준을 만드는 것이다
• 조건문에는 반드시 비교연산자(comparison operator)가 필요하다

if (조건1) {          // 조건1이 통과할 경우
} else if (조건2) {   // 조건 1이 통과하지 않고, 조건 2가 통과한 경우
} else {             // 모든 조건이 통과하지 않은 경우
}

비교연산자

• <, > : 초과, 미만

• <=, >= : 이상, 이하

• ===, !== : 같다, 다르다 (엄격한 비교, 타입까지 비교)

• ==, != : 같다, 다르다 (타입까지 비교하지 않음)

  ex ) 1 == '1' // true; (숫자 1과 문자열 1이 같다고 출력됨)

논리연산자

• && : and 연산자

• || : or 연산자

• ! : not 연산자, truthy, falsy 여부를 반전시킴

  ex) !undefined // true; (undefined는 falsy 값이다 그러므로 ! 로 반전시키면 true가 된다)

      !'Hello'  // false; (모든 문자열은 기본적으로 true 값을 갖는다 그러므로 ! 로 반전시키면 false가 된다)

• 기억해야 할 7가지 falsy 값 : false, null, undefined, 0, NaN, ' '(빈문자열), document.all

새로운 정보

• Number(string) : 문자열을 숫자로 바꿔주는 함수 (입렵값을 숫자로 변환할 수 없는 경우 NaN을 리턴)

  ex) Number('100'); // 100
  
         Number('안녕'); // NaN

• String(number) : 숫자를 문자열로 바꿔주는 함수

백틱 (``)

• ES6부터 새로 도입된 문자열 표기법

• 문자열 생성시 따옴표 대신, 백틱을 사용한다

• ${ } 사이에 변수나 연산 등을 삽입 할 수 있다

• 기존의 따옴표 방식에서는, + 연산자로 문자열을 여러번 이어 붙여야 했지만 백틱을 사용하면 아래처럼 가능

  ex)  let name = 'John';
  
         console.log('나는' + ' ' +  name + ' ' + '입니다') // '나는 John 입니다'
  
         console.log(`나는 ${name} 입니다`) // '나는 John 입니다'