[JS] JavaScript 문법 정리

자바스크립트 연산자

• ==(!=) 와 ===(!==)의 차이
  - == 은 타입에 상관없이 값만 같은지 비교, ===은 타입까지 같은지 비교
  
  
• ?? (NULL 병합 연산자)
  - ??의 왼쪽 피연산자가 null이거나 undefine인 경우 오른쪽 연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환

// height가 null이나 undefined인 경우, 100을 할당
height = height ?? 100;

---

함수표현식

- 변수에 값을 할당하는 것처럼 함수 선언문이 변수에 할당하여 함수를 값처럼 사용하는 것

let sayHi = function() {
  alert( "Hello" );
};

sayHi();

---

호이스팅

- 호이스팅이란 코드를 실행하기 전 변수선언 / 함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상

- 일반 함수 선언문은 호이스팅의 대상이 되어 실행 구문보다 함수 선언문이 밑에 있어도 정상 동작하지만

- 함수표현식은 호이스팅의 대상이 되지 않아 실행 구문보다 함수 선언문이 밑에 있으면 오류가 발생한다.

foo1(); // 함수 선언문에서는 호이스팅 일어난다.
foo2(); // 함수 표현식이라서 호이스팅 안된다.

function foo1() {
  console.log('Hello');
}

var foo2 = function() {
  console.log('world');
}

 

var 키워드로 변수를 선언하는 경우도 마찬가지이다.

console.log(number);
var number = 2; //undefined -> 오류 발생 x

// why? 자바스크립트 엔진이 다음과 같이 해석하기 때문
var number;
console.log(number);
number = 2;

 

하지만 const와 let에서는 호이스팅이 발생하지 않고 에러가 발생하게 된다.

function fn() {
    console.log(a);
    let a = 2;
}
fn();

이는 초기화하기 전에는 a에 접근할 수 없다는 에러이다. 호이스팅은 자바스크립트 엔진이 갖고 있는 성질일 뿐, 호이스팅을 일부러 발생시킬 필요는 없으며 오히려 이를 방지하는 것이 좋다. 왜냐면 호이스팅이 이루어지는 코드는 이해하기도 어렵고 의도치 않은 결과를 일으키기 쉽기 때문이다.

---

 

콜백함수

- 파라미터로 함수를 전달받아 함수의 내부에서 실행하는 함수를 말한다.

function checkMood(mood, goodFunction, sadFunction) {
  if (mood === "good") {
    goodFunction();
  } else {
    sadFunction();
  }
}

function cry() {
  console.log("ㅜㅜ");
}

function sing() {
  console.log("룰루랄라");
}

checkMood("good", sing, cry);

---

객체

- 객체 생성 및 접근

let person = {
  name: "이선호",
  age: 22
}; // 객체 리터럴 방식

console.log(person.name); // 점 표기법
console.log(person["age"]); // 괄호 표기법

 

- 괄호 표기법 이용하면 좋은 경우

let person = {
  name: "이선호",
  age: 22
}; // 객체 리터럴 방식

console.log(getPropertyValue("name"));

function getPropertyValue(key) {
  return person[key];
}

---

정렬

Javascript에서 배열을 정렬하기 위해서는 sort() 함수를 사용합니다.

arr.sort([compareFunction])

 

※ compareFunction

• 정렬 순서를 정의하는 함수
• 이 값이 생략되면 배열의 요소들은 기본적으로 문자열로 취급되어, 유니코드 값 순서대로 정렬
• 두 개의 요소를 파라미터로 입력받음
• a, b 두 개의 요소를 파라미터로 입력받는 경우, 함수의 리턴 값이 0보다 작은 경우 a가 b보다 앞에 오도록 정렬하고, 0보다 클 경우, b가 a보다 앞에 오도록 정렬한다. 0을 리턴하면, a와 b의 순서를 변경하지 않는다.

 

※ 리턴값

• compareFunction의 규칙에 따라 정렬된 배열을 리턴한다.
• 이때, 원본 배열이 정렬되며, 리턴하는 배열 또한 원본 배열을 가리키게 된다 (포인터 개념인듯).
  즉, 둘 중 하나의 내용을 변경하면 나머지 배열의 내용도 변경된다.

 

- sort 메소드는 배열의 원소들을 기본적으로 문자열로 생각하여 정렬한다.

const arr = [1, 10, 2, 3, 20, 30, 5];
arr.sort();
console.log(arr); // [1, 10, 2, 20, 3, 30, 5]

- 따라서 숫자들을 정렬할 때는 따로 비교함수를 만들어서 sort 메소드의 인자로 넣어주어야한다.

const arr = [1, 10, 2, 3, 20, 30, 5];

// 오름차순 정렬 코드
const compare = (a, b) => {
  if (a < b) {
    return -1;
  }

  if (a > b) {
    return 1;
  }

  return 0;
};

arr.sort(compare);
console.log(arr); // [1, 2, 3, 5, 10, 20, 30]

---