자바스크립트란?

프로그래밍 언어로 ECMA script를 준수하면서 브라우저가 별도로 지원하는 Web API 등을 포함한 개념

---

1. JS 개발환경

1. 브라우저 => 렌더링 목적
2. Node.js => 실행환경 제공 목적

• 공통점 : ECMA script를 따른다.
• 차이점 : 브라우저는 Web API를 Node.js는 파일 시스템을 제공

---

2. 변수

1. 하나의 값을 저장하기 위한 메모리 공간
2. 메모리 공간을 식별하기 위한 이름 (식별자의 이름)

변수 선언

• var a

1. 선언 단계
2. 초기화 단계

변수 선언부분은 JS 동작에 있어서 런타임 실행 전인 소스코드 평가 과정에서 실행되어 한줄씩 해석하는 런타임과 다르게 한번에 위에 선언된다.

---

변수 할당

• a = 10

---

식별자란?

어떤 값을 구별해서 식별할 수 있는 고유한 이름

3. 컴파일러 언어 / 인터프리터 언어

컴파일러	인터프리터
코드 실행 전 소스코드 전체를 변환 후 실행	런타임에 한줄 씩 코드 변환 후 실행
실행 파일 생성	실행 파일 생성X
컴파일 단계 / 실행 단계 분리	분리되지않아 한줄씩 변환 후 실행
분리로 인한 코드 실행속도 빠르다	왔다갔다 반복 수행으로 코드 실행 속도가 느리다

---

4. 자바스크립트 실행 단계

1 단계: 실행 컨텍스트 생성하고, 변수 등을 등록하는 단계
(소스코드 평가 과정)
2 단계: 소스 코드를 한 줄씩 실행하는 단계
(런타임 환경)

---

5. 메모리 할당과 해제

원시타입의 경우 재할당한 메모리 값은 이전 메모리 주소를 가진곳이 바뀌지않고 새로운 주소의 위치에 생긴다.

---

가비지 콜렉터

할당한 메모리 공간을 주기적으로 검사하여 사용하지않는(어떤 식별자도 참조하지않는) 메모리를 해제하는 기능이다.

• 매니지드 언어에 존재한다.

---

매니지드 언어 / 언매니지드 언어

1. 매니지드 언어 : 메모리의 할당 및 해제를 개발자가 직접 제어하지않음 => JS
2. 언매니지드 언어 : 개발자가 명시적으로 메모리를 할당 / 해제 => C언어

• 매니지드 언어는 따로 값을 해제할 필요가 없어서 비교적 편하다
• 언매니지드 언어는 성능면에서 필요없는 부분을 개발자가 바로 해제가 가능하므로 비교적 성능면에서 매니지드 언어보다 좋다

---

6. 객체

1. 프로퍼티 : 객체의 상태를 나타내는 값
   1) 프로퍼티 키
   2) 프로퍼티 값
2. 메서드 : 프로퍼티를 참조하고 조작하는 동작

객체 생성 방법

1. 객체 리터럴
2. Object 생성자 함수
3. 생성자 함수
4. Object.create 메서드
5. 클래스

const user1 = {
  name: "보라",
  isAdmin: false,
};

function User2(name) {
  this.name = name;
  this.isAdmin = false;
}

let user2 = new User2("보라");

let user3 = new Object();
user3.name = "보라";
user3.isAdmin = false;

let user4 = Object.create(null);
user4.name = "보라";
user4.isAdmin = false;

class User5 {
  constructor(name, isAdmin) {
    this.name = name;
    this.isAdmin = isAdmin;
  }
}

const user5 = new User5("보라", false);

console.log(user1);
console.log(user2);
console.log(user3);
console.log(user4);
console.log(user5);

모두 같은 name과 isAdmin을 포함한 객체로 만들어진다.

프로퍼티 키의 특징

식별자 네이밍 규칙을 따르면은 따옴표가 필요없으나
이를 따르지않으면 따옴표가 필요하다 ex)last-name

프로퍼티 접근

1. 마침표 표기법 (person.name)
2. 대괄호 표기법 (person['name'])

브라우저 환경에 따르는 결과

• person.last-name

1. Node.js : name이 어디에도 없어서 ReferenceError
2. 브라우저 환경 : name이라는 전역변수가 암묵적으로 존재하여 NaN

ES6 확장기능

let x = 1,  y = 2;

const obj = { x, y }	// {x:x,y:y} => {x:1,y:2}

console.log(obj); // {x:1,y:2}

• 메서드는 화살표함수 사용을 하지 않길 바람

let obj = {
  name: "Lee",
  sayHi: function () {
    console.log(this, "hi");
  },
  sayHi1: () => {
    console.log(this, "hi1");
  },
  sayHi2() {
    console.log(this, "hi2");
  },
};

obj.sayHi();
obj.sayHi1();
obj.sayHi2();

화살표함수를 사용한 sayHi1()만 정상적인 obj this를 가르키지 않는다

7. 원시 값 / 객체 값

차이점

1. 불변성 ( 불변성 O / 불변성 X )
2. 변수의 저장 ( 실제값 / 참조 값 )
3. 복사 ( 원시 값의 복사 / 참조 값의 복사 )

의미해석

원시값은 변경 불가능하다
=> 변수 값은 변경 가능하다 ( = 변수값은 재할당이 가능하다 )

유사배열 객체

문자열은 배열형태 접근은 가능하다
문자열은 배열형태로 문자변경은 불가능하다
문자 변경 시에는 새로운 문자(열)로 재할당 필요하다

값에 의한 전달 / 참조에 의한 전달

사실은 정확히 말하면 자바스크립트에는 값에 의한 전달 밖에 없다
단지, (원시) 값에 의한 전달인지 (참조) 값에 의한 전달인지가 중요할 뿐이다.
즉, 정리하자면 우리가 평소에 쓰던 값의 전달과 참조의 전달은
사실 원시값의 전달과 참조값의 전달로 이해하고
실제 자바스크립트에서는 값에 의한 전달만이 존재한다고 생각하자

=== 비교연산

1. 객체를 할당한 변수 비교 : 참조 값을 비교
2. 원시 값을 할당한 변수 : 원시 값을 비교

let p = { name : 'L'}
let q = { name : 'L'}
console.log(p === q);		// 1. false
console.log(p.name === q.name);	// 2. true

출처

JS실행단계