Methods 및 문법

Array.from()

  • 유사 배열 객체나 반복 가능한 객체를 복사해 새로운 배열을 만든다.
    • // 문자열을 잘라 배열로 만들기
    console.log(Array.from('foo'));
    // expected output: ["f", "o", "o"]
    

    // 배열을 넣어 map()처럼 사용
    console.log(Array.from([1, 2, 3], x => x + x));
    // expected output: [2, 4, 6]
    

    // 0부터 또는 1부터 시작하는 배열을 만들 수 있다.
    // v => 배열의 값(value), i => 배열의 인덱스(index)
    // Array(5)에서 5는 배열의 길이
    console.log(Array.from(Array(5), (v, i) => i + 1));
    // expected output: [1, 2, 3, 4, 5]

    .charCodeAt() / .charAt() / String.fromCharCode()

  • 해당 변수의 ()안 인덱스 값에 해당하는 문자의 아스키 코드를 출력한다. (인덱스는 띄어쓰기도 센다.)
  • String.fromCharCode()는 해당 아스키코드를 가진 문자를 가져온다.
    • const string = 'Hi my name is';
    

    console.log(string.charCodeAt(6), string.charAt(6));
    // 110 'n'
    

    console.log(String.fromCharCode(97));
    // a

    .concat()

  • 두 배열을 합칠 수 있다.
    • const arr1 = [1, 2, 3];
    const arr2 = [4, 5, 6, 7];
    

    console.log(arr1.concat(arr2));
    // output: [1, 2, 3, 4, 5, 6, 7]

    .fill()

  • 파라미터 안의 숫자로 배열안의 값을 채운다.
    • const array1 = [1, 2, 3, 4];
    

    // 인덱스 2번부터 4번까지 0으로 채우려면
    console.log(array1.fill(0, 2, 4));
    // expected output: [1, 2, 0, 0]
    

    // 인덱스 1번부터 5로 채우려면
    console.log(array1.fill(5, 1));
    // expected output: [1, 5, 5, 5]
    

    console.log(array1.fill(6));
    // expected output: [6, 6, 6, 6]

    .filter()

  • 조건에 부합하는 배열 요소만을 반환한다.
  • map과 문법이 같다.
    • const numbers = [1, 2, 3, 4, 5, 6];
    

    arr = numbers.filter((item, index, arr) => {
      console.log(item, index, arr);
    	// 1 0 [ 1, 2, 3, 4, 5, 6 ]
    	// 2 1 [ 1, 2, 3, 4, 5, 6 ]
    	// 3 2 [ 1, 2, 3, 4, 5, 6 ]
    	// 4 3 [ 1, 2, 3, 4, 5, 6 ]
    	// 5 4 [ 1, 2, 3, 4, 5, 6 ]
    	// 6 5 [ 1, 2, 3, 4, 5, 6 ]
      return item > 3;
    });
    

    console.log(arr);
    // [4, 5, 6]
  • 간단하게 다음처럼 작성할 수 있다.
    • const numbers = [1, 2, 3, 4, 5, 6];
    

    arr = numbers.filter(num => num > 3);
    

    console.log(arr);
    // [4, 5, 6]

    find / findIndex

  • find는 배열에 특정 값이 있는지 찾고 반환한다.
  • findIndex는 배열에 특정 값이 있는지 찾고 위치를 반환한다.
    • const fruits = ["Apple", "Banana", "Cherry"];
    

    const result = fruits.findIndex(item => {
      return item === "Apple";
    });
    

    console.log(result);
    // 0
  • 정규식과 함께 이런식으로 사용할 수 있다.
    • const fruits = ["Apple", "Banana", "Cherry"];
    

    const result1 = fruits.find(item => { 
    	return /^A/.test(item);
    })
    const result2 = fruits.findIndex(item => {
    	return /^C/.test(item);
    })
    

    console.log(result1);
    // Apple
    console.log(result2);
    // 2

    for…of 명령문

  • 배열뿐 아니라 Map, Set, String 등에도 사용이 가능하다.
    • const arr = ['a', 'b', 'c'];
    

    for (const element of arr) {
      console.log(element);
    }
    

    // expected output: "a"
    // expected output: "b"
    // expected output: "c"

    forEach 문

  • 배열에만 적용이 가능하다.
  • 괄호 안 세가지 인수는 요소 값, 해당 요소의 인덱스, 순회 중인 배열이다.
    • const array = ['a', 'b', 'c'];
    

    array.forEach((el, idx, arr) => {
    	console.log(el, idx, arr)
    });
    

    // a 0 [ 'a', 'b', 'c' ]
    // b 1 [ 'a', 'b', 'c' ]
    // c 2 [ 'a', 'b', 'c' ]

    for…in 문

  • 모든 객체에 적용 가능하다. 객체의 키 값을 순회한다.
  • 배열에 적용하면 키 값을 인덱스 번호로 한다.
  • enumerable 속성이 true인 것만 순회한다.
  • enumerable은 객체의 숨겨진 속성 중 하나로 브라우저에 console.log를 찍어보면 알 수 있다. (enumerable: 셀 수 있는, 열거할 수 있는)
    • const object = { a: 1, b: 2, c: 3 };
    

    for (const key in object) {
      console.log(`${key}: ${object[key]}`);
    }
    

    // Expected output:
    // "a: 1"
    // "b: 2"
    // "c: 3"

    .includes()

  • 배열이 ()안의 요소를 포함하고 있는지 판별한다.
    • const array1 = [1, 2, 3];
    

    console.log(array1.includes(2));
    // expected output: true
    

    const pets = ['cat', 'dog', 'bat'];
    

    console.log(pets.includes('cat'));
    // expected output: true
    

    console.log(pets.includes('at'));
    // expected output: false

    .indexOf() / .lastIndexOf()

    const arr = [1, 2, 3, 4, 1, 2];
    

    arr.indexOf(3)
    // 2
    

    arr.indexOf(1)
    // 0 (인덱스 0과 4에 1이 있지만 첫번째 위치를 리턴한다)
    

    arr.indexOf(6)
    // -1 (배열에 6이 존재하지 않으므로 -1을 리턴한다)
  • 배열에서 ()안의 값이 있는 인덱스 번호를 알려준다.

    • isNaN()

    isNaN(NaN);       // true
    isNaN(undefined); // true
    isNaN({});        // true
    

    isNaN(true);      // false
    isNaN(null);      // false
    isNaN(37);        // false
    

    // 문자열
    isNaN("37");      // false: "37"은 NaN이 아닌 숫자 37로 변환됩니다
    isNaN("37.37");   // false: "37.37"은 NaN이 아닌 숫자 37.37로 변환됩니다
    isNaN("123ABC");  // true: parseInt("123ABC")는 123이지만 Number("123ABC")는 NaN입니다
    isNaN("");        // false: 빈 문자열은 NaN이 아닌 0으로 변환됩니다
    isNaN(" ");       // false: 공백이 있는 문자열은 NaN이 아닌 0으로 변환됩니다
    

    // dates
    isNaN(new Date());                // false
    isNaN(new Date().toString());     // true
  • ()안의 데이터가 숫자로 변환된다면 false를, 숫자로 변환되지 않는 값이면 true를 리턴한다.

    • .join()

  • 배열의 모든 element를 연결해 하나의 문자열을 만든다. ()안의 내용을 사이에 넣는다.
  • ()안에 아무것도 없을 경우 ,를 넣는다.
  • 따라서 사이에 아무 내용 없이 붙이려면 “”를 입력해야 한다.
    • const elements = ['Fire', 'Air', 'Water'];
    

    console.log(elements.join());
    // output: "Fire,Air,Water"
    

    console.log(elements.join(''));
    // output: "FireAirWater"
    

    console.log(elements.join('-'));
    // output: "Fire-Air-Water"

    .length

  • 배열의 길이를 알려준다. length는 직접 조작이 가능하다.
    • const arr = [1, 2, 3, 4, 5];
    

    console.log(arr.length);
    // output: 5

    .map()

  • 배열의 모든 인덱스를 순회하며 해당 함수를 적용한다.
  • 원본 배열에 영향을 미치지 않는다. (변경하지 않는다)
    • const fruits = ["사과", "파인애플", "오렌지", "수박"];
    

    fruits.map(function(item, index, originArr) {
      console.log(item, index, originArr);
    })
    

    // 사과 0 [ '사과', '파인애플', '오렌지', '수박' ]
    // 파인애플 1 [ '사과', '파인애플', '오렌지', '수박' ]
    // 오렌지 2 [ '사과', '파인애플', '오렌지', '수박' ]
    // 수박 3 [ '사과', '파인애플', '오렌지', '수박' ]
  • 화살표 함수로는 다음과 같이 사용할 수 있다.
    • const fruits = ["사과", "파인애플", "오렌지", "수박"];
    

    fruits.map((item, index, originArr) => {
      console.log(item, index, originArr);
    })
    

    // 사과 0 [ '사과', '파인애플', '오렌지', '수박' ]
    // 파인애플 1 [ '사과', '파인애플', '오렌지', '수박' ]
    // 오렌지 2 [ '사과', '파인애플', '오렌지', '수박' ]
    // 수박 3 [ '사과', '파인애플', '오렌지', '수박' ]
  • 숫자에 사용하려면 아래와 같이 사용할 수 있다.
  • map함수는 리턴값을 배열로 만들어준다.
    • const nums = [1, 2, 3, 4, 5, 6];
    

    const newNums = nums.map((item, index, originArr) => {
      return item * 2;
    });
    

    console.log(newNums);
    // [ 2, 4, 6, 8, 10, 12 ]
  • 이를 간단하게 표현하면 아래처럼 사용할 수 있다.
    • const nums = [1, 2, 3, 4, 5, 6];
    

    const newNums = nums.map(x => x*2);
    

    console.log(newNums);
    // [ 2, 4, 6, 8, 10, 12 ]
  • 중괄호 내부에 return외에 코드가 없을 때는 중괄호와 return을 함께 생략할 수 있다.
  • 또한 파라미터가 하나라면 괄호를 생략할 수 있다.

    • Map 객체

  • Map 객체는 ES6에서 도입된 데이터 구조이다.
  • 이는 키와 값을 서로 매핑(연결)시켜 저장된 순서대로 각 요소들을 접근할 수 있도록 한다.
  • 여기에는 .set(), .get(), .has(), .delete() 등의 메소드가 존재하고 그 역할과 사용법은 아래와 같다.
    • let sayings = new Map();
    sayings.set("dog", "woof");
    sayings.set("cat", "meow");
    sayings.set("elephant", "toot");
    

    console.log(sayings.size); // 3
    console.log(sayings.get("fox")); // undefined
    console.log(sayings.get("cat")); // "meow"
    console.log(sayings.has("bird")); // false
    

    sayings.delete("dog");
    console.log(sayings)
    // Map(2) {'cat' => 'meow', 'elephant' => 'toot'}
    

    for (let [key, value] of sayings) {
      console.log(key + " goes " + value);
    }
    // "cat goes meow"
    // "elephant goes toot"

    Math.max() / Math.min()

  • 스프레드 연산자를 이용하여 해당 배열의 가장 큰 수 또는 가장 작은 수를 찾을 수 있다.
    • const arr = [1, 2, 3, 4, 5];
    const maxValue = Math.max(...arr); // 5
    const minValue = Math.min(...arr); // 1
    

    // 물론 아래 처럼도 사용 가능
    console.log(Math.max(-1, 2, 4)) // 4

    Math.abs()

  • 절댓값을 리턴한다.
    • const num = -999;
    console.log(Math.abs(num)); // 999

    Math.ceil() / Math.floor() / Math.round()

  • 순서대로 올림, 내림, 반올림이다.
    • console.log(Math.ceil(3.14)); // 4
    console.log(Math.floor(3.14)); // 3
    console.log(Math.round(3.6)); // 4
    console.log(Math.round(3.4)); // 3

    Math.random()

  • 0에서 1사이의 난수를 생성한다.
  • 아래 처럼 하면 일정 범위 내의 난수를 생성할 수 있다.
    • // 0 ~ 99 사이 랜덤 숫자
    const ranNum = Math.floor(Math.random() * 100);
    

    console.log(ranNum);

    Object.keys() / Object.values()

  • 객체 안의 key 또는 value 데이터를 배열로 반환한다.
    • const obj = {
    name: "경은",
    age: 26,
    address: "seoul"
    };
    

    console.log(Object.keys(obj));
    // output: ['name', 'age', 'address']
    

    console.log(Object.values(obj));
    // output: ['경은', 26, 'seoul']

    Object.assign()

  • 객체의 병합에 사용되는 메소드
  • obj1과 returnObj는 메모리 주소가 같다.
    • const obj1 = { a: 1, b: 2 };
    const obj2 = { b: 3, c: 4 };
    

    const returnObj = Object.assign(obj1, obj2);
    

    console.log(obj1); // { a: 1, b: 3, c: 4 }
    console.log(obj2); // { b: 3, c: 4 }
    console.log(returnObj);// { a: 1, b: 3, c: 4 }

    Optional Chaining (?, 물음표)

  • 옵셔널 체이닝을 사용하면 undefined에 어떠한 메소드를 실행해도 TypeError가 뜨지 않고 undefined를 리턴한다.
  • 값이 누락될 가능성이 있는 경우 이를 사용하면 프로그램의 안정성을 높일 수 있다.
    • const obj = {
    	name: '경은',
    	age: 27,
    	address: 'seoul'
    }
    

    console.log(obj.height); // undefined
    console.log(obj.height.length); // TypeError
    console.log(obj.height?.length); // undefined

    padstart(), padEnd()

  • padStart(문자열 길이, 채울 문자)
  • padStart()는 앞의 문자열을 입력한 문자열 길이만큼 특정 문자로 앞부분을 채워준다.