[Web] JavaScript 기본 문법 정리

🎈 var / let / const

1. var

• 재할당 가능
• 함수 레벨 스코프

2. let

• 재할당 가능
• 블록 레벨 스코프

3. const

• 재할당 불가능
• 블록 레벨 스코프

🎈 함수 레벨 스코프 / 블록 레벨 스코프

1. 함수 레벨 스코프

• 함수 내에서 선언된 변수는 함수 내에서만 유효
• var

2. 블록 레벨 스코프

• 블록 {} 내에서 선언된 변수는 코드 블록 내부에서만 유효
• let, const

🎈 자바스크립트 자료형

원시 자료형 타입

• Number : 정수, 실수 전부 Number 타입으로 통일
• string
• Boolean : true/false로 나누는 진리값
• null : 값이 비어있음을 명시
• undefined
  • 아무 값도 할당받지 않은 상태.
  • 개발자가 할당한 것이 아니라 자바스크립트 엔진이 변수를 초기화 할 때 사용

참조 자료형 타입 (모두 객체로 취급)

• Array : []로 표기
• Object
  • const result = {a:5, b:10}
  • 객체 값에 접근하기 위한 방법 : result['a'], result.a
• Function
  • 함수 선언식 : 기본적으로 C언어와 비슷

    <script>
    	function kfc() {
    		alert("#");
    	}
    	kfc();
    </script>

  • 함수 표현식 : 함수를 변수에 저장 (변수를 호출하면 해당 함수가 호출)

    <script>
    	let go = function() { alert("#"); };
      go();
    </script>

🎈 원시 자료형의 메모리 할당 과정

var ssafy; ➡️ 변수 선언 : 기존값을 undifined로 초기화 (변수 호이스팅)
ssafy = 19; ➡️ 변수 할당 : 초기화 후 메모리에 할당

🎈 변수 호이스팅

런타임 이전에 변수의 선언문들만 먼저 끌어져 맨 위로 올라오는 행위 (가장 먼저 실행되는 것)

• var ssafy; let ssafy; const ssafy;
• let과 const에서는 호이스팅이 동작하는 것을 막음 (호이스팅이 초반에는 동작하지만 내부적으로 막아둔 것)

🎈 함수 호이스팅

함수 호이스팅은 두 가지 방법에 따라 다름

• 함수 선언식

함수 호이스팅이 발생한다.

hello();
funtion hello(){
	console.log("hello world");
}
// hello world

1. hello 함수가 최상단으로 올라감
2. hello 함수 실행
3. console.log("hello world") 출력

• 함수 표현식

변수 호이스팅이 발생한다.

hello();
const hello = function(){
	console.log("hello world");
}
// 에러 발생

1. const hello가 최상단으로 올라감
2. console.log(hello)를 출력 ➡️ undefined 출력
3. hello = function(){}을 실행함

🎈 참조 자료형의 메모리 할당 과정

const obj = {a:1};

• 변수(obj) : call stack 메모리에 저장(원시값)
• 객체({a:1}) : heap 메모리에 저장
  ※ const는 기본적으로 call stack에 대한 변경을 막아두었다. 그러나 객체 값은 heap에 저장되기 때문에 변경 가능하다.

🎈 자바스크립트 입출력

• 입력 : prompt()
• 출력 : alert()

🎈 ECMAScript

• ECMA 국제기구에서 만든 Script 언어(ES라고도 부름)
• 자바스크립트 언어는 ES 표준을 따르며 제작됨
• ES6가 등장함으로, 기존에 없던 자바스크립트 문법과 권장사항이 추가

🎈 Type 변환

Number과 String (형변환이 자유롭다)

• Number(변수)
• String(변수)

세미콜론

• 세미콜론이 있는 것이 기본이지만 없어도 에러는 안남

🎈 if 문

• C언어와 대부분 동일
• 같다와 다르다 주의
  • ==와 != : type이 달라도 True
  • ===와 !== : type이 다르면 False (type도 같아야지만 True)