개발자 Lim

Destructuring

배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장할 수 있게 해준다.

스프레드 연산자는 모든 원소와 프로퍼티를 가져오는 반면 Destructuring은 하나의 요소만을 가지고 온다.

3번째 프로퍼티만 추출하는 방법

<화살표 함수와 표현 관계>

... 연산자 (스프레드 연산자)

아주 쉽게 배열을 복사하거나 안전하게 이전 객체를 복사하여 객체에 프로퍼티에 추가하는 것이 가능

... 연산자 (나머지 연산자)

매개변수들을 배열로 통합시켜준다.

1. == (동등 연산자):
   • 값만을 비교합니다.
   • 타입이 다르면 자바스크립트는 값을 형변환 한 후 비교합니다.
   • 예를 들어, 문자열 '5'와 숫자 5를 비교할 때, == 연산자는 두 값을 동등하다고 판단합니다.

     '5' == 5;  // true

2. === (일치 연산자):
   • 값 뿐만 아니라 타입까지도 비교합니다.
   • 형변환 없이 값과 타입이 정확히 일치하는 경우에만 true를 반환합니다.
   • 예를 들어, 문자열 '5'와 숫자 5를 비교할 때, === 연산자는 두 값을 일치하지 않는다고 판단합니다.

     '5' === 5;  // false

일반적으로 자바스크립트를 작성할 때는 의도하지 않은 형변환으로 인한 오류를 피하기 위해 === (일치 연산자)를 사용하는 것이 좋다.

<클래스>

ES6

생성자는 constructor()을 사용한다.

다음과 같이 상속도 가능하며 단 이때는 

• 상속받은 클래스 안에서 super();을 통해 부모 클래스의 생성자를 호출 하여야 한다.
• 부모 클래스가 자식 클래스 보다 먼저 선언 되어 있어야 한다.

ES7

생성자 constructor() 필요 없이 직접 변수명에 값을 할당해주는 것이 가능해졌다.

(물론 코드 뒤에서는 생성자를 만들어서 실행된다.)

또한 맴버함수의 프로퍼티 값을 화살표 함수로 표현 함으로써 this 키워드를 사용하지 않아도 된다.

export& import 모듈화

export default ~이름
import ~별칭 from ~경로

op1.js

const op1 = 50

export default op1

op2;.js

export const op2 = 20;

sumOperation.js

import operation from './op1.js'
import oper1 from './op1.js'
import { op2 } from './op2;.js';


console.log(oper1+op2);
console.log(operation+op2);

package.json (프로그래머가 직접 작성하는 것이 아닌 node js 명령어를 통해 생성 후 변경하고 사용해야 한다!)

{
  "name": "temp",
  "version": "1.0.0",
  "description": "",
  "main": "sumOperation.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "type": "module",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

+ npm install 이 안먹는다면
npm init -y 로 초기세팅 및 package.json 생성 후  "type": "module", 을 추가 해주면 된다.

export ~이름
import {~이름} from ~경로 물론 as 키워드를 통해 별칭을 지정하는 것이 가능하다 
import {~이름 as ~별칭} from ~ 경로
import * as ~별칭 from ~경로 를 통해 해당 경로의 모든 export 된 것들을 한번에 가지고 오는 것 또한 가능하다 

타입 선언

var: 권장 하지는 않지만 중복 된 이름으로 값을 변경 할 수 있는 변수 선언이 가능 (잘 사용 되지 않음)
var 변수의 영역은 블록 안으로 제한되지 않음 (함수 레벨 스코프)

var topic = "자바스크립트"

// JavaScript에서 빈 문자열 (""), null, undefined, 0, NaN, false 외의 모든 값은 truthy(참으로 간주)로 평가
if (topic){
  var topic = "리액트"
  console.log('블록',topic)
}
console.log('글로벌',topic)

<실행 결과>

블록 리액트
글로벌 리액트

함수 레벨 스코프

블록 안에서 선언되어도 블록 바깥에서 사용할 수 있는 모습

(기존 var에서 새로 추가 된 것)

let: 값을 변경 할 수 있는 변수 선언시 사용 (variable values) - 새로운 var이라 생각
var과 다른 점은 중복 선언이 불가능 하다는 것
let을 쓰면 구문적 변수 영역 규칙을 적용할 수 있음 
const: 값을 변경 할 수 없는 상수 선언시 사용 (constant values)

let과 const 는 재선언과 호이스팅을 허용하지 않음 (블록 레벨 스코프)

var topic = "자바스크립트"

// JavaScript에서 빈 문자열 (""), null, undefined, 0, NaN, false 외의 모든 값은 truthy(참으로 간주)로 평가
if (topic){
  let topic = "리액트"
  console.log('블록',topic)
}
console.log('글로벌',topic)

<실행 결과>

블록 리액트
글로벌 자바스크립트

블록 레벨 스코프

블록 레벨 스코프 이기 때문에 중첩된 내부 블록 에서는 사용가능하지만 외부 블록에서는 사용이 불가능한 모습