자바 스크립트 - 2 (연산자, 함수, 객체)

증감 연산자

- 전위연산은 줄이 끝나기 전에 연산을 마침

-후위연산은 줄이 다 끝난 후에 연산을 마치므로 콘솔을 보면 연산 후 값이 적용되지 않음

 

비교 연산자

- ==를 사용하여 비교 연산을 하면 자바스크립트의 묵시적 형 변환으로 인해

1 == "1" 이 true로 나온다. 이를 방지하기 위해 ===를 사용하는 걸 권장하고 있다. (==는 엄격한 비교)

 

Null 병합 연산자

- null이 아닌 수를 찾아내므로 var4의 값은 10(var2)가 된다

- 모든 값이 null이 아니라면 첫번째 값을 선택한다 (var3와 var2 중에서 var3의 값이 var6이 됨)

- userName이 없는 경우라면 Winterlood를 반환하도록 하는 경우에 사용할 수 있다

 

typeof 연산자

 

삼항 연산자

---

 

호이스팅(끌어올리다)

- 자바스크립트는 호이스팅이라는 기능이 있다. 

함수의 호출을 먼저 해도 자체적으로 함수를 끌어올려주기 때문에 오류가 발생하지 않는다.

---

함수 표현식

- 함수 자체가 콘솔에 출력된다. (함수 자체를 변수에 저장하기 때문이다)

 

익명함수

- varB는 콘솔에 함수가 출력되지 않고, 호이스팅도 불가하다.

 

화살표 함수

- 화살표(=>)를 사용하면 일반 함수와 똑같이 사용할 수 있다

이와 같이 사용할 수도 있다

 

콜백 함수 (callback function)

같은 기능을 하는 코드지만 가독성 차이가 있다

- 왼쪽의 코드를 콜백함수를 쓰면서 오른쪽과 같이 더 간단하게 만들 수 있다

---

스코프

- 전체 스코프: 전체 영역에서 접근 가능

- 지역 스코프: 특정 영역에서 접근 가능

>> 중괄호 안에서 선언된 변수는 중괄호 밖에서 접근 불가

---

객체(Object)

- 객체를 사용하면 현실에 존재하는 개념이나 사물을 표현하기 용이함

// 1. 객체 생성
let obj1 = new Object();    // 객체 생성자
let obj2 = {}   // 객체 리터럴 (간단해서 더 많이 사용)

// 2. 객체 프로퍼티 (객체 속성)
let person = {      // key : value
    name: "이정환",
    age: 27,
    hobby: "테니스",
    extra: {},
    10: 20,
    "like cat": true,
};

// 3. 객체 프로퍼티를 다루는 방법
// 3.1 특정 프로퍼티에 접근 (점 표기법, 괄호 표기법)
let name = person.name;     
// 존재하지 않는 프로퍼티 접근 시 undefined 부여
console.log(name);  // 이정환

let age = person["age"];    // 꼭 쌍따옴표 안에 속성을 작성, 문자열로 표시

let property = "hobby";
let hobby = person[property];

// 동적으로 속성에 접근하고 싶다면 괄호, 평소엔 간결한 점 표기 사용


// 3.2 새로운 프로퍼티를 추가하는 방법 
person.job = "fe developer";
person["favoriteFood"] = "떡볶이";

// 3.3 프로퍼티를 수정하는 방법
person.job = "educator";
person["favoriteFood"] = "초콜릿";

// 3.4 프로퍼티를 삭제하는 방법
delete person.job;
delete person["favoriteFood"];

// 3.5 프로퍼티의 존재유무를 확인하는 방법 (in 연산자)
let result1 = "name" in person;     // person 객체 안에 name 속성이 있는가?
console.log(result1);   // true

// 1. 상수 객체 (상수에 저장된 객체)
const animal = {
    type: "고양이",
    name: "나비",
    color: "black",
};

animal.age = 2; // 속성 추가
animal.name = "까망이" // 속성 수정
delete animal.color // 속성 삭제

// 객체값의 속성을 건드리는 것은 가능함


// 2. 메서드
// -> 값이 함수인 프로퍼티

const person = {
    name: "이정환",
    // 메서드 선언
    sayhi() {
        console.log("안녕");
    },
};

// 함수 호출
person.sayhi();
person["sayhi"]();