🌱 ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [자바스크립트 완벽 가이드] 3장 - 타입, 값, 변수
    Reading/Tech 2022. 8. 11. 22:43
    🍀 목차
    3.1 개요와 정의
    3.2 숫자
    3.3 텍스트
    3.4 불 값
    3.5 null과 undefined
    3.6 심벌
    3.7 전역 객체
    3.8 불변인 기본 값과 가변인 객체 참조
    3.9 타입 변환
    3.10 변수 선언과 할당

    3.1 개요와 정의

    • 기본 타입(불변) : 숫자, 문자열, 불(boolean), null, undefined, 심벌(Symbol)
    • 객체 타입(가변) : 기본 객체, 배열, Set 객체, Map 객체, RegExp 타입, Date 타입, 함수와 클래스 등.

     

     자바스크립트 인터프리터는 자동으로 가비지 컬렉션을 수행해 메모리를 관리한다. 일반적으로 객체나 다른 값을 직접 파괴하거나 할당을 해제해줄 필요는 없다. 프로그램에서 어떤 값을 더 이상 참조하지 않으면 인터프리터는 그 값을 다시 사용하지 않음을 인식하고 그 값이 차지한 메모리를 자동으로 다시 확보한다. 물론 가끔 필요 이상으로 값이 참조 가능한 상태로 남아 있어, 프로그래머가 신경 쓰기도 해야 한다.

     

     자바스크립트는 객체 지향 프로그래밍 스타일을 지원하고, 함수가 다양한 타입의 값을 다루는 것이 아닌 객체(타입 자체)에 그 값을 다루는 메서드를 정의한다. 

    a.sort(); // sort(a)의 객체 지향 버전

      자바스크립트에서는 오직 객체만 메서드를 가질 수 있다. 하지만 숫자, 문자열, 불, 심벌도 마치 메서드가 있는 것처럼 동작한다. 자바스크립트에서 메서드를 호출할 수 없는 값은 nullundefined 뿐이다.

     

     자바스크립트는 값의 타입을 자유롭게 변환한다. 일치 여부를 판단할 때는 일치 연산자(===)를 사용하는 것이 좋다.

    상수는 const, 변수는 let으로 선언하고 이 둘은 타입이 없다.


    3.2 숫자

     숫자 타입 Number은 정수와 함께 실수를 대략적으로 표현한다. -2^53 이상 ~ 2^53 이하 범위의 정수를 정확히 표현할 수 있다. 이보다 큰 정수 값은 정확도가 떨어질 수 있다. 

     

     직접 기입한 숫자를 숫자 리터럴이라 부르며, 다양한 숫자 리터럴 형식을 지원한다. 숫자 리터럴 앞에 마이너스 기호로 음수로 만들 수 있다.

     

    3.2.1 정수 리터럴

     자바스크립트는 10진 정수 리터럴과 16진수 값도 인식한다(0x로 시작). ES6 이후 버전에서는 0b(0B)를 붙여 2진수, 0o(0O)를 붙여 8진수로 정수를 표현할 수도 있다.

     

    0
    3
    0xff // => 255
    0b10101 // => 21
    0o377 // => 255

     

    3.2.2 부동 소수점 리터럴

     소수점이 포함될 수 있다. 정수 부분, 소수점, 소수점 아래 부분을 순서대로 쓴다.

    3.14
    .333333
    6.02e23

     리터럴을 읽기 쉽도록 밑줄로 구분하는 경우가 있는데(정식 표준화는 아니지만 주요 브라우저와 노드 모두 지원), 소수점 아래 부분에도 쓸 수 있다.

    let billion  = 1_000_000_000;
    let fraction = 0.123_456_789;

     

    3.2.3 자바스크립트의 산술 연산

    • 덧셈 +
    • 뺄셈 -
    • 곱셈 *
    • 나눗셈 /
    • 나머지 %
    • 지수 ** (ES2016)

     이러한 산술 연산자 외에도 자바스크립트는Math 객체의 프로퍼티로 정의된 함수와 상수로 더 복잡한 수학 계산을 지원한다. 

    Math.pow(2,53) // 2의 53승
    Math.round(.6) // 1.0 , 가장 가까운 정수로 반올림
    Math.ceil(.6) // 1.0 , 정수로 반올림
    Math.floor(.6) // 0.0 , 정수로 내림
    Math.abs(-5) // 5, 절댓값
    Math.max(1,2,3) // 3
    Math.min(1,2,3) // 1
    Math.random() // 0이상 1.0 미만의 랜덤 숫자 x
    ...

     

     자바스크립트는 산술 연산 과정에서 0으로 나누거나 오버플로, 언더플로가 발생해도 에러를 일으키지 않는다. 오버플로는 특별한 값인 Infinity를 반환한다(음의 무한은 -Infinity). 

     

     언더플로는 계산 결과가 자바스크립트가 표현할 수 있는 가장 작은 숫자보다도 0에 가까울 때 일어나고, 이는 0으로 반환된다. 음수의 언더플로는 특별한 값인 -0이 반환됨. 일반적인 0과 거의 완전히 같다.

     0으로 나눠도 무한대 혹은 음의 무한대를 반환하나, 0을 0으로 나누면 특별한 값 NaN(숫자가 아님)이 반환된다.

     

     

     Number 객체의 프로퍼티로 존재하며 판단 가능하다.

    Number.isNaN(x) // x는 NaN인가?
    Number.isFinite(x) // x는 유한한 숫자인가?
    Number.MAX_SAFE_INTEGER // 2^53-1

     

     NaN 값은 자기 자신을 포함해 어떤 값과도 같지 않다.

    x === NaN // 사용 불가. 아래 두개를 대신 사용.
    x != x 
    Number.isNaN(x)

     

    3.2.4 이진 부동 소수점 숫자와 반올림 오류

     자바스크립트의 부동 소수점 형식으로 정확히 표현할 수 있는 숫자는 유한하다. 자바스크립트로 실수를 다루면 숫자의 근삿값으로 표현될 때가 자주 발생한다. 자바스크립트의 숫자는 대단히 정밀하나 완전히 정확하진 않다. 이 특징은 이진 부동 소수점 숫자를 사용하는 프로그래밍 언어에서 모두 발생한다.

     

    3.2.5 BigInt로 임의 정확도를 부여한 정수

     값이 정수인 숫자 타입 BigInt는 매우 큰 숫자도 다룰 수 있다. BigInt 리터럴은 연속된 숫자 다음에 n이 붙은 형식이다. 

    BigInt() 함수로 일반 숫자나 문자열을 BigInt로 변환할 수 있다.

    1234n
    BigInt(Number.MAX_SAFE_INTEGER)
    1000n + 2000n // 3000n
    3000n % 997n // 9n
    0 === 0n // false

     

    3.2.6 날짜와 시간

     Date 클래스는 날짜와 시간에 대응하는 숫자를 표현하고 조작한다. 

    let timestamp = Date.now(); //현재 시간을 타임스탬프(숫자) 형식으로.
    let now = new Date(); //현재 시간을 Date 객체로.
    let iso = now.toISOString(); //표준 형식의 문자열로.


    3.3 텍스트

     문자열과 배열 형태의 위치는 0에서 시작한다. 빈 문자열은 길이가 0인 문자열이다.

     

    3.3.1 문자열 리터럴

     앞뒤가 맞는 작은따옴표('), 큰따옴표("), 백틱(`) 쌍으로 묶는다. 따옴표 사용 시에는 can't 같은 단축 표현을 주의한다. 역슬래시(\)로 이스케이프 해준다.

    3.3.2 문자열 리터럴 안의 이스케이프 시퀀스

     역슬래시(\)는 그다음 문자와 조합하여 일반적인 방법으로는 문자열에 표시할 수 없는 문자를 표현한다. \n은 뉴라인 문자를 표현하는 이스케이프 시퀀스이다.

    시퀀스 표현하는 문자
    \0 NUL
    \b 백스페이스
    \t
    \r 캐리지 리턴
    \" 큰따옴표
    \\ 역슬래시

     

    3.3.3 문자열 다루기

     문자열은 병합(연결)하는 기능이 내장되어 있다. + 연산자를 숫자와 함께 쓰면 이 연산자는 숫자를 더하고, 문자열에 쓰면 두 번째 문자열을 첫 번째 문자열 뒤에 이어 붙인다.

    let msg = "Hello" + "world" ; //"Helloworld"

     

     문자열의 길이는 내장 프로퍼티 length로 알 수 있다. 그 외에도 다양한 문자열 API가 있다.

    let s = "Hello, world";
    s.length // 12
    s.substring(1,4) // ell, 인덱스 1부터 4까지.
    s.slice(1,4) // ell
    s.slice(-3) // rld, 마지막 3문자
    s.indexOf("l") // 2, l이 처음 나타나는 위치
    s.startsWith("Hell") // true. Hell로 시작한다.
    s.includes("or") // true. or이 들어있다.
    s.toLowerCase() // HELLO, WORLD

     

    3.3.4 템플릿 리터럴

    백틱으로 감싼 템플릿 리터럴은 그 안에 포함된 표현식을 평가하여 그 값을 문자열로 반환한 다음, 반환된 문자열을 백틱 안에 들어 있는 리터럴 문자와 결합하여 저장한다.

    let name = "Bill";
    let greeting = `Hello ${name}`; // Hello Bill

     

     템플릿 리터럴에는 강력하나 잘 사용되지 않는 기능이 있다. 여는 백틱 바로 앞에 함수 이름(태그)이 있으면 템플릿 리터럴의 텍스트와 표현식 값이 함수에 전달된다. 

    String.raw`\n`.length // 2 , 역슬래시 문자와 n

     

    3.3.5 패턴 매칭

     문자열 내부의 패턴을 정의하고 매칭 하는 정규 표현식(RegExp)이라는 데이터 타입이 있다. 리터럴은 슬래시 한 쌍 사이에 텍스트를 쓰는 형태이다. 

    /^HTML/; //문자열 시작에 HTML이 일치
    /[1-9][0-9]*/; //0이 아닌 숫자가 하나 있어야 하고 그 뒤 숫자는 제한 없음
    
    //유용한 메서드
    
    let text = "testing: 1, 2, 3"
    let pattern = /\d+/g; // 연속된 숫자 전체에 일치
    pattern.test(text) // true. 패턴에 맞는 것이 있다.
    text.search(pattern) // 9, 첫번째로 일치하는 부분
    text.match(pattern) // ["1","2","3"] 일치하는 부분이 모두 포함된 배열
    text.replace(pattern, '#') // testing: #, #, #
    text.split(/\D+/) // ["","1","2","3"] 숫자 아닌 것에서 나눔


    3.4 불 값

     참 또는 거짓을 표현한다. 단 두 가지 값 true, false가 존재한다. 자바스크립트의 값은 모두 불 값으로 변환될 수 있고 아래의 값들은 모두 false다. 이 여섯 값들은 묶어 false 같은(falsy) 값이라고 한다. 나머지 값은 true 같은(truthy) 값이라 부른다.

    undefined
    null
    0
    -0
    NaN
    "" // 빈 문자열
    • && 연산자불 AND 연산을 수행한다. 두 피연산자가 모두 true 값일 때만 true로 평가된다.
    • || 연산자불 OR 연산을 수행한다. 두 피연산자 중 하나 또는 모두가 true 같은 값이면 true로 평가된다.
    • ! 연산자불 NOT 연산을 수행한다. 피연산자가 false 같은 값이면 true, 그 반대면 반대로 평가된다.


    3.5 null과 undefined

    출처 : https://javascript.plainenglish.io/null-and-es2020-optional-chaining-and-null-coalescing-e62e31fb0240

     null은 값이 없음을 나타낸다. 객체가 없다는 것을 나타내는 특별한 객체 값이라 볼 수 있다. (숫자나 문자열에도 값이 없다는 의미로 사용될 수 있다.)

    +) 여담이지만, typeof null이 object가 뜨는 것은 많은 의문을 준다. 기본 타입이라면서 왜 object라고 판단하는 것인지... 결과적으로는 언어적인 오류이다. 모던 자바스크립트 사이트에서 자세한 이유를 확인할 수 있다.

     

     

    typeof를 "완전히" 신뢰하지는 말자.

     

     

     

      undefined는 다른 의미에서 값이 없다. 초기화되지 않는 변수의 값이며 존재하지 않는 객체 프로퍼티나 배열 요소에 접근 시 반환된다. 이 또한 특별한 타입이며 멤버는 자기 자신뿐이다.

     두 값은 비슷해 보이지만 다르다.

     


    3.6 심벌

     심벌(Symbol)은 문자열이 아닌 프로퍼티 이름으로 ES6에 추가되었다. 자바스크립트의 객체 타입은 프로퍼티의 순서 없는 집합이며 각 프로퍼티에 이름과 값이 있다. 프로퍼티 이름은 일반적으로 문자열이다. ES6 이후에는 심벌 역시 문자열과 같은 목적으로 사용할 수 있다. 

    let strname = "string name";
    let symname = Symbol("propname");

     

     Symbol()을 호출해 심벌 값을 가져온다. 같은 인자로 호출하더라도 다른 값을 반환한다.

    Symbol
    cf, string

     

     Symbol은 자바스크립트 언어를 확장하는 구조이다. Symbol.iterator는 객체를 이터러블로 만드는 메서드 이름으로 쓸 수 있는 심벌 값이다. 

     

     Symbol() 함수는 선택 사항인 인자로 문자열을 받고 고유한 심벌 값을 반환한다. 

    • Symbol.for() : Symbol.for() 함수는 문자열 인자를 받아 그 문자열과 연관된 심벌 값을 반환하게 함. (Symbol()은 고유한 값을 반환한다면 Symbol.for()은 같은 문자열로 호출했을 때 항상 같은 값을 반환한다.)
    let s = Symbol.for("shared");
    let t = Symbol.for("shared");
    
    s === t // true
    s.toString() // "Symbol(shared)"
    Symbol.keyFor(t) // "shared"

     

    3.7 전역 객체

     전역 객체의 프로퍼티는 전역으로 정의된 식별자이고 모든 자바스크립트 프로그램에서 사용할 수 있다. 자바스크립트 인터프리터를 시작할 때마다(브라우저가 새 페이지를 로드할 때마다) 다음과 같은 프로퍼티를 가진 새 전역 객체를 생성한다.

     

    • undefined, Infinity, NaN 같은 전역 상수
    • isNaN(), parseInt(), eval() 같은 전역 함수
    • Date(), RegExp(), String(), Object(), Array() 같은 생성자 함수
    • Math와 JSON 같은 전역 객체

     

     노드의 전역 객체로는 이름이 global인 프로퍼티가 있고 이 값은 전역 객체 자체이다. 웹 브라우저는 Window 객체가 전역 객체이다.

    globalThis로 현재 환경의 전역 객체를 확인할 수 있다.

     

    3.8 불변인 기본 값과 가변인 객체 참조

     앞서 자바스크립트의 기본 값은 불변, 객체는 가변이다. 기본 값을 변경하는 방법은 없다. 문자열은 문자의 배열이므로 특정 인덱스의 문자를 바꿀 수 있다 생각하지만 자바스크립트는 이를 허용하지 않는다.

     몇몇 메소드는 수정된 문자열을 반환하는 것처럼 보이지만 사실 새 문자열 값을 반환하는 것이다.

    let s = "hello";
    s.toUpperCase();
    s // hello

     

     객체는 기본 값과 다르다. 가변이므로 값을 바꿀 수 있다.

    let o = { x: 1 };
    o.x = 2;
    o.y = 3;
    
    let a = [1,2,3];
    a[0] = 0;
    a[3] = 4;

    객체는 값으로 비교하지 않는다.

     

     객체를 기본 타입과 구별하기 위해 참조 타입이라고 부를 때도 있다. 이 용어는 객체 값은 참조이며, 객체를 참조로 비교한다는 뜻이다. 두 객체 값이 같다는 말은 오직 두 값이 같은 객체를 참조할 때만 성립한다.

     

     

     객체나 배열의 사본을 만들기 위해서는 반드시 객체 프로퍼티나 배열 요소를 직접 복사해야 한다. 


    3.9 타입 변환

     자바스크립트는 값의 타입을 강제하지 않는다. 필요에 맞게 값을 변환한다. ture 같은 값은 true로, false 같은 값은 false로 변환한다. 자바스크립트가 문자열을 예상한다면, 그 자리에 있는 값은 무엇이든 문자열로 변환된다. 숫자를 예상한다면 그 값을 숫자로 변환하려 시도하고, 성공적이지 않다면 NaN으로 바꾼다. 

     

    10 + " objects" // "10 objects"
    "7" * "4" // 28
    let n = 1 - "x"; // NaN

     

    3.9.1 변환과 일치 

    • == : 동등 연산자. 상대적으로 관대한 기준을 갖고 두 값을 비교한다.
    • === : 일치 연산자. 값과 타입을 모두 비교한다. 
    null == undefined //true
    "0" == 0 // true : 비교 전, 문자열을 숫자로 변환한다. 
    0 == false // true : 비교 전, 불 값을 숫자로 변환한다.
    "0" == false // true : 비교 전, 두 피연산자를 모두 0으로 변환한다.

     

    3.9.2 명시적 변환

     때때로 값을 직접 변환해야 할 때도 있다. 가장 단순한 방법은 Boolean(), Number(), String() 함수이다.

    Number("3"); // 3
    String(false) // "false"

     Boolean(), Number(), String() 함수는 모두 new와 함께 호출하여 생성자로 사용할 수 있다. 이런 식으로 사용하면 기본 불, 숫자, 문자열 값과 똑같이 동작하는 래퍼 객체를 얻는다.

     

     

     하위 호환성을 위해 남겨 두었지만, 래퍼 객체를 만드는 것은 추천하지 않는다. 객체는 논리 평가 시 항상 참으로 반환되어, 혼동을 일으킬 수 있다.

     

    new를 붙이지 않고 사용하는 것은 괜찮다. 인수를 원하는 형의 원시값(문자열, 숫자, 불 값)으로 바꿔주기 때문에 유용하다.

     

    3.9.3 객체를 기본 값으로 변환

     

     객체를 기본 값으로 변경하는 규칙은 복잡하다. 일부 객체는 여러 가지 기본 값으로 표현할 수 있다. 세 가지 기본 알고리즘이 정의되어 있다.

    • 문자열 선호 : 기본 값 반환 시, 문자열로 변환할 수 있다면 문자열 값을 우선한다.
    • 숫자 선호 : 기본 값 반환 시, 숫자로 변환할 수 있다면 숫자 값을 우선한다.
    • 선호 없음 : 어떤 기본 타입을 선호하는지 정해 놓지 않았으며 클래스에서 변환 방법을 정의할 수 있다. Date를 제외한 모든 타입이 이 알고리즘에 숫자 선호를 적용한다. (Date는 문자열 선호)

     

     객체는 모두 true로 반환된다. 빈 배열, 래퍼 객체 new Boolean(false) 역시 true이다. 

    객체를 문자열로 변환해야 할 때, 먼저 문자열 선호 알고리즘으로 기본 값으로 변환한다. 숫자로 변환해야 할 때는 숫자 선호 알고리즘으로 기본 값으로 변환한다. 

     

     특별한 케이스로는 연산자들이다. + 연산자는 피연산자 중 하나가 객체라면 해당 피연산자를 선호 없음 알고리즘에 따라 기본 값으로 변경한다. 두 개의 기본 값이 남으면 타입을 체크한다. 하나라도 문자열이면 다른 하나도 문자열로 변환한 다음 병합한다. 모두 문자열이 아니라면 숫자로 변환하여 더한다.   

     

     ==, != 연산자는 타입 변환을 허용한다. 피연산자 중 하나가 객체이고 다른 하나가 기본 값이면 선호 없음 알고리즘을 써서 객체를 기본 값으로 변환한 다음 비교한다. 

     

     관계 연산자 <, <=, >, >=는 피연산자의 순서를 비교하여 숫자와 문자열을 비교한다. 하나라도 객체라면 숫자 선호 알고리즘으로 기본 값으로 변경한다. 객체를 숫자로 변환하는 경우와는 달리 기본 값이 숫자로 변환되지 않는다.

     

     Date 객체의 숫자 표현은 <와 >로 비교할 수 있으나, 문자열 표현은 그렇지 않다. 선호 없음 알고리즘이 문자열로 변환되므로, 관계 연산자에 의해 숫자 선호 알고리즘을 사용한다는 것은 Date 객체의 순서를 비교할 수 있다는 뜻이다. 

     

     

     toString() 메서드는 객체의 문자열 표현을 반환한다. 

    [1,2,3].toString() // "1,2,3"
    let d = new Date(2020,0,1);
    d.toString() // "Wed Jan 01 2020 00:00:00 GMT+0900 (GMT+09:00)"

     

     valueOf() 메서드는 객체를 표현하는 기본 값이 존재한다면 그 값으로 객체를 변환한다. 객체는 복잡한 형태이며 대부분의 객체는 단일한 기본 값이 아니기에 valueOf() 메서드는 기본 값이 아닌 객체를 반환하는 경우가 많다. 

    let d = new Date(2010,0,1);
    d.valueOf() // 1262271600000

     

     문자열 선호 알고리즘은 먼저 toString() 메서드를 시도한다. 기본 값을 반환한다면 자바스크립트는 그 값을 사용한다. 그 기본 값이 문자열이 아니더라도 사용한다. toString()이 존재하지 않거나 객체를 반환하면 자바스크립트는 valueOf()를 시도한다. 기본 값을 반환한다면 자바스크립트는 그 값을 사용한다. 그렇지 않다면 TypeError가 일어난다.

     

     숫자 선호 알고리즘은 valueOf() -> toString() 순으로 시도한다.

     

     선호 없음 알고리즘은 객체의 클래스에 따라 다르게 동작한다. Date일 경우는 문자열 선호 알고리즘, 그 외는 숫자 선호 알고리즘을 사용한다.

     배열은 기본 valueOf()를 상속하는데, 이 메서드는 기본 값을 반환하지 않는다. 따라서 배열을 숫자로 변환하려 하면 결국 toString() 메서드를 호출한다. 빈 배열은 빈 문자열로 변환, 요소가 99 하나인 배열은 그 요소가 변환되는 것과 같은 문자열로 변환된다. 


    3.10 변수 선언과 할당

     값에 이름을 부여하면 프로그램에서 그 값을 참조하고 사용할 수 있다. 이런 과정을 일반적으로 변수에 값을 할당한다고 말한다. 변수라는 용어는 새로운 값을 할당할 수 있음을 암시한다. 값에 이름을 영구히 할당할 때는 상수라고 한다. 

     

    3.10.1 let과 const를 사용한 선언 

     변수는 let을 사용하여 선언한다.

    let i;
    let sum;
    
    //변수 여럿 선언
    let i,sum;
    
    //가능하면, 초깃값을 할당한다.
    let message = "hello";

     

     상수는 const를 사용하여 선언한다.

    const H0 = 74;

     

     상수의 값은 변경할 수 없다. 상수의 값을 바꾸려 하면 TypeError가 일어난다. 보통 상수는 전부 대문자를 써서 변수와 구별한다.

    바뀔 여지가 있다면 상수로 선언해서는 안 된다.

    let과 const는 for, for/in, for/of 루프에서도 사용할 수 있다.

    for(let datum of data) console.log(datum);
    
    for(const datum of data) console.log(datum);

     

     선언이 어떤 코드 블록에도 속하지 않고 최상위 레벨에 있을 경우 전역 변수 또는 상수라고 부른다. 

    • let, const : 블록 스코프. let과 const가 존재하는 블록 안에서만 해당 변수와 상수가 유효하다. 블록은 if/else, while, for 루프 등의 바디도 포함된다. (대략적으로 중괄호 안이면 블록이다.) let과 const로 선언했다면, 같은 이름으로 재선언은 금지된다. 중첩 스코프는 권장하지 않으나 가능은 하다. 
     const x = 1; // 전역 상수가 된다.
     if( x === 1 ){
     	let x = 2; // 블록 안에서는 다시 선언할 수 있다.
        console.log(x); // 2
     }
     
     console.log(x); // 1 , 전역 스코프 이므로.
     let x = 3; // 에러. 문법 에러이다.

     

    3.10.2 var를 사용한 변수 선언 

    • var은 함수 스코프이다. 
    • 함수 바디 바깥에 선언하면 전역 변수가 된다. var로 선언된 전역 변수는 전역 객체의 프로퍼티로 존재하게 되고, 이는 globalThis로 참조할 수 있다. let과 const로 선언한 전역 변수와 상수는 전역 객체의 프로퍼티가 아니다.
    var x = 2;
    // 는
    globalThis.x = 2;
    // 와 같다.
    • var은 같은 변수를 몇 번이고 선언할 수 있다. 
    • var로 선언된 변수는 선언문이 함수의 맨 위로 끌어올려진다(호이스팅, let과 const도 호이스팅은 된다). 정의만 함수 맨 위로 올라가 함수 어디에서든 에러 없이 사용할 수 있다(심지어 할당 전에 console.log를 찍어도 undefined로 찍힌다).

     

    3.10.3 분해 할당

     분해 할당이 일어나면 오른쪽 값에서 하나 이상의 값을 추출해서 왼쪽에 있는 변수에 할당한다. 복잡한 분해 할당은 코드의 가독성을 해칠 수 있으므로 명시적인 할당이 더 나은 경우도 있다.

    let [x,y] = [1,2]; // let x=1,y=2;
    [x,y] = [x+1,y+1];
    [x,y] = [y,x]; //swap과 같음.
    
    [x,y] = [1]; // x=1, y=undefined
    [x,y] = [1,2,3]; // x=1, y=2
    
    [x, ...y] = [1,2,3,4]; // x=1, y=[2,3,4]
    [x, ...y] = "Hello"; // x="H", y=["e","l","l","o"]
    
    const {cos : cosine, tan : tangent} = Math;
    // const cosine = Math.cos, tangent = Math.tan과 같다.

     

    자바스크립트 완벽 가이드

    25년 가까이 자바스크립트 프로그래머에게 가장 사랑받은 베스트셀러이며 이번 7판은 자바스크립트 2020 버전에 맞게 완전히 개정됐다. 책 전반에 걸쳐 흥미롭고 유용한 예제를 만날 수 있으며

    www.aladin.co.kr

    "JavaScript: The Definitive Guide, Seventh Edition, by David Flanagan (O'Reilly). Copyright 2020 David Flanagan, 978-1-491-95202-3."

    해당 게시글은 "자바스크립트 완벽 가이드"를 개인 학습용으로 정리한 내용입니다.

    댓글

🍀 Y0ungZ dev blog.
스크롤 버튼