[웹 프론트엔드] 1분 코딩 자바스크립트 기초 Part 1, 2

1분 코딩 자바스크립트 기초 Part 1, 2

• 개발자 도구 단축키: Ctrl + Shift + i

• html css 주석 단축키:
  주석 지정: Ctrl + K + C
  주석 해제: Ctrl + K + U

• 대부분 에디터에서의 주석 단축키: Ctrl + /

• var 변수: function-level scop
  let 변수, const 상수: block-level scope

📌참고자료

• 1분 코딩 자바스크립트 기초 Part 1
  https://www.youtube.com/watch?v=6v8oVnR6npM&list=PLe9WXHRkq9p0k7eF0TrIHgL5Cy9khHWnX&index=1

• 1분 코딩 자바스크립트 기초 Part 2
  https://www.youtube.com/watch?v=vlyHEQSqkl8&list=PLe9WXHRkq9p0k7eF0TrIHgL5Cy9khHWnX&index=2

• 자바스크립트 객체(Object)
  https://poiemaweb.com/js-object

자바스크립트의 객체(object)

• 자바스크립트 = 객체 기반의 스크립트 언어
  -> 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다
• 자바스크립트의 객체 = 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합
  -> 프로퍼티의 값: 자바스크립트에서 사용할 수 있는 모든 값 사용 가능
  -> 프로퍼티의 값 함수(일급 객체)일 경우, 일반 함수와 구분하기 위해 메소드라 부른다
• ⚡자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입(prototype)”이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다

자바스크립트의 객체 생성 방법

• 클래스 기반 객체 지향 언어:
  클래스를 사전에 정의 -> 필요한 시점에 new 연산자를 사용하여 인스턴스를 생성
• 자바스크립트:
  ⚡프로토타입 기반 언어로, 클래스라는 개념이 없고 별도의 객체 생성 방법이 존재

객체 생성 방법 1. 객체 리터럴

• 가장 일반적인 자바스크립트의 객체 생성 방식
• 중괄호를 사용하여 객체를 생성
  -> 중괄호 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체를 생성
  -> 중괄호 내에 아무것도 기술하지 않으면 빈 객체가 생성

var emptyObject = {};
console.log(typeof emptyObject); // object

var person = {
  name: 'Lee',
  gender: 'male',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};
console.log(typeof person); // object
console.log(person); // {name: "Lee", gender: "male", sayHello: ƒ}
person.sayHello(); // Hi! My name is Lee

객체 생성 방법 2. Object 생성자 함수

• new 연산자와 Object 생성자 함수를 호출 -> 빈 객체를 생성 -> 이후 프로퍼티 또는 메소드를 추가하여 객체 완성
• 객체 리터럴 방식: Object 생성자 함수로 객체를 생성하는 것을 단순화시킨 축약 표현(short-hand)이다
  -> 자바스크립트 엔진은 객체 리터럴로 객체를 생성하는 코드를 만나면 내부적으로 Object 생성자 함수를 사용하여 객체를 생성한다
  -> 따라서 개발자가 일부러 Object 생성자 함수를 사용해 객체를 생성해야 할 일은 거의 없다
• 자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Array, Date, RegExp 등의 빌트인(Built-in) 생성자 함수를 제공한다

// 빈 객체의 생성
var person = new Object();
// 프로퍼티 추가
person.name = 'Lee';
person.gender = 'male';
person.sayHello = function () {
  console.log('Hi! My name is ' + this.name);
};
console.log(typeof person); // object
console.log(person); // {name: "Lee", gender: "male", sayHello: ƒ}
person.sayHello(); // Hi! My name is Lee

객체 생성 방법 3. 생성자 함수

• 클래스 기반 객체지향 언어의 생성자: 생성자 함수의 형식이 정해져 있다
• 자바스크립트의 생성자: 기존 함수와 동일한 방법으로 생성자 함수를 선언하고 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다
  -> 생성자 함수가 아닌 일반 함수에 new 연산자를 붙여 호출하면 생성자 함수처럼 동작할 수 있다
  -> 따라서 일반적으로 생성자 함수명은 첫문자를 대문자로 기술하여 혼란을 방지한다
• this에 연결되어 있는 프로퍼티와 메소드: public(외부에서 참조 가능)
  생성자 함수 내에서 선언된 일반 변수: private(외부에서 참조 불가능)

function Person(name, gender) {
  var married = true;         // private
  this.name = name;           // public
  this.gender = gender;       // public
  this.sayHello = function(){ // public
    console.log('Hi! My name is ' + this.name);
  };
}
var person = new Person('Lee', 'male');
console.log(typeof person); // object
console.log(person); // Person { name: 'Lee', gender: 'male', sayHello: [Function] }
console.log(person.gender);  // 'male'
console.log(person.married); // undefined