Basic of JS 2

2021.04.08

let = 변수 저장용
const = 상수 저장용, 한번 선언하면 값을 바꿀 수 없다.

다른 코드블록{} 에서는 같은 이름으로 사용될 수 있다.

const a = 1;
if (true) {
  const a = 2;
  console.log('if문 안의 a 값은 ' + a);
}
console.log('if문 밖의 a 값은 ' + a);

결과는 다음과 같다.

"if문의 안의 a 값은 2"
"if문 밖의 a 값은 1"

null 과 undefined

null: 이 값이 아예 "없다".
undefined: 값이 아직 "정해지지 않았다."

let criminal;
console.log(criminal);

이렇게 변수를 선언하고 값은 넣어주지 않았다면 콘솔에는 'undefined' 라는 값이 뜨게 된다.

비교 연산자 ==와 ===

==와 === 모두 두 값이 같은지 비교하는 비교 연산자이다. 다만 세부적인 기능이 차이가 있다. ==는 세부적인 타입 검사까지는 하지 않는다.

예를 들어서 == 를 사용하면 숫자 1과 문자 '1' 이 동일한 값으로 간주된다.

const a = 1;
const b = '1';
const equals = a == b;
console.log(equals);
결과: true

그리고, 0 과 false 도 같은 값으로 간주된다.

const a = 0;
const b = false;
const equals = a == b;
console.log(equals);
결과: true

그리고 undefined 와 null 도 같은 값으로 간주된다.

const a = null;
const b = undefined;
const equals = a == b;
console.log(equals);
결과: true

앞으로 두 값이 일치하는지 비교 할 때에는 == 대신 === 를 사용하자. == 를 사용하다보면 실수를 할 확률이 높아진다.

화살표 함수

function 키워드 대신에 => 문자를 사용해서 함수를 만들 수 있다. 화살표의 좌측에는 파라미터, 우측에는 코드블록이 들어온다.

const add = (a, b) => {
  return a + b;
};
console.log(add(1, 2));

만약 코드블록 내부에서 바로 return을 하는 경우에는 다음과 같이 줄여서 쓸 수 있다.

const add = (a, b) => a + b;
console.log(add(1, 2));

화살표 함수와 일반 함수의 가장 큰 차이점은 두 함수가 가리키는 this의 스코프가 다르다는 것인데, 이는 https://poiemaweb.com/es6-arrow-function 여기를 참고하도록 하자.

짧게 정리하자면, 함수 내부의 this가 메소드를 호출한 객체(생성자 함수의 인스턴스)를 가리키게 하려면 let that = this; 처럼 변수로 선언하거나, 함수가 끝난 직후 .bind(this)를 사용하거나 하는 방법들이 있다.

반면 화살표 함수의 this 바인딩 객체 결정 방식은 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프와 유사하다. 쉽게 이야기해서, 일반 함수처럼 처리과정을 주지 않아도 간편하게 사용 할 수 있다는 것. 다만 그렇다고해서 아무대나 쓸 수 있는 것은 아님을 알아두자. 자세한 것은 링크 참고!!

객체

객체는 우리가 변수(JS-let) 혹은 상수(JS-const)를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다. like JSON Object.

const dog = {
  name: '멍멍이',
  age: 2
};

console.log(dog.name);
console.log(dog.age);

결과물은 다음과 같다.

멍멍이
2

만약 키에 공백이 포함되어야 한다면 다음과 같이 사용한다.

const sample = {
  'key with space': true
};

기본적으로 함수에서 파라미터를 받아 사용하고자 한다면 다음과 같이 사용한다.

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {
  const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${
    hero.actor
  } 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

이때 print 함수를 보면 파라미터로 받아온 hero 내부의 값을 조회 할 때 마다 hero. 를 입력하고 있는데, 객체 비구조화 할당이라는 문법을 사용하면 코드를 더욱 짧고 보기 좋게 작성 할 수 있다. 이 문법은 "객체 구조 분해"라고도 한다.

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {
  const { alias, name, actor } = hero;
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

const { alias, name, actor } = hero;

이 코드가 객체에서 값들을 추출해서 새로운 상수로 선언해주는 것이다.

여기서 더 나아가면, 파라미터 단계에서 객체 비구조화 할당을 할 수 있다.

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print({ alias, name, actor }) {
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

다음과 같이 깔끔하게 할 수 있다.

const dog = {
  name: '멍멍이',
  sound: '멍멍!',
  say: function() {
    console.log(this.sound);
  }
};
dog.say();

이렇게 함수가 객체 안에 들어가게 되면, this는 자신이 속해있는 객체를 가리킨다. 이때 함수는 이름이 없는 익명 함수로 사용할 수 있다. 위에서 언급했듯이, 객체 안에 함수를 넣을 때 화살표 함수를 넣으면 제대로 작동하지 않는다. 그 이유는, function 으로 선언한 함수는 this 가 제대로 자신이 속한 객체를 가르키게 되는데, 화살표 함수는 그렇지 않기 때문이다.

배열

const objects = [{ name: '멍멍이' }, { name: '야옹이' }];

console.log(objects);
console.log(objects[0]);
console.log(objects[1]);

다음과 같이, 배열에 객체 또한 넣을 수 있다.

반복문 - break 와 continue

for (let i = 0; i < 10; i++) {
  if (i === 2) continue; // 다음 루프를 실행
  console.log(i);
  if (i === 5) break; // 반복문을 끝내기
}

i 가 2 일땐 continue 를 하여 원래 console.log 를 해야 하지만 그 코드를 수행하지 않고 바로 3으로 넘어간다. 즉, 해당 위치에서 정지하고 다음 루프로 넘어간다는 것.

i 가 5 일땐 break 를하여 반복문을 종료하고 빠져나온다.

기본적이지만, 사용법을 숙지해두자.

배열 - 내장 함수

https://learnjs.vlpt.us/basics/09-array-functions.html

Java Script의 Scope에 대한 이해

Scope란, 우리가 변수 혹은 함수를 선언하게 될 때 해당 변수 또는 함수가 유효한 범위를 의미한다. Scope 는 총 3가지 종류가 있다.

1. Global (전역) Scope: 코드의 모든 범위에서 사용이 가능합니다.
2. Function (함수) Scope: 함수 안에서만 사용이 가능합니다.
3. Block (블록) Scope: if, for, switch 등 특정 블록 내부에서만 사용이 가능합니다.

const value = 'hello!';

function myFunction() {
  console.log('myFunction: ');
  console.log(value);
}

function otherFunction() {
  console.log('otherFunction: ');
  const value = 'bye!';
  console.log(value);
}

myFunction();
otherFunction();

console.log('global scope: ');
console.log(value);

위 코드의 결과는 다음과 같다.

코드의 맨 윗줄에서 선언된 value 값은 Global Scope 로 선언된 값이다. Global Scope 로 선언된 값은 어디서든지 사용이 가능하다. 따라서, myFunction 에서 바로 사용이 가능했다.

otherFunction 에서는 함수 내부에서 value 값을 'bye!' 로 새로 선언 했다. 이렇게 되면, value 라는 값은 Function Scope 로 재지정이 되서 해당 값은 otherFunction 내부에서만 유효한 값이 된다. 이렇게 값을 설정한다고 해서 기존에 Global Scope 로 선언된 value 값이 바뀌지 않고, otherFunction 내에서 새로운 value라는 값이 생겼다라고 이해하면 될 것이다.

Java Script의 Scope에 대한 이해 - Hoisting이란?

Hoisting 이란, 자바스크립트에서 아직 선언되지 않은 함수/변수를 "끌어올려서" 사용 할 수 있는 자바스크립트의 작동 방식을 의미한다.

myFunction();

function myFunction() {
  console.log('hello world!');
}

위 코드에서, myFunction 함수를 생성하기 전에 호출했다. 하지만 아직 함수가 선언 되지 않았음에도 불구하고 코드는 정상적으로 작동한다. 그 이유는 자바스크립트 엔진이 코드를 해석하는 과정에서 생성을 먼저 하는 것으로 받아들이기 때문이다.

이를 일부러 유발할 필요도 없고, 방지하는 것이 좋은 방법이다.

Modal, 모달

모달이란, 다음 이미지와 같이 기존의 내용을 가리고 나타나는 메시지박스 같은 형태의 UI이다. 기본적으로 존재하면 기존의 내용을 가리고 있기 때문에, style의 display:none, flex를 통해 제어한다. 미리 깔아놓고 보이지 않게 한 후에 필요할 때 보여주는 형식으로 사용한다.