자바스크립트 기초 문법3

각종 es6 문법 소개

1. let, const

 

2. 화살표 함수 (Arrow Function)

 

3. 삼항 연산자 (ternary operator)

condition ? expr1 : expr2

console.log(true ? "참" : "거짓") // 참
console.log(false ? "참" : "거짓") // 거짓

 

4 구조 분해 할당 (Destructuring)

// 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"

let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3

// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

let [a,b,c,d] = arr
console.log(d) // undefined

let [a,b,c,d = 4] = arr
console.log(d) // 4

// 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;

// let name = user.name;
// let age = user.age;

console.log(name, age) // nbc 30

// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30

let {name, age, birthDay} = user;
console.log(birthDay) // undefined

let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today

5. 단축 속성명 (property shorthand)

객체의 key와 value 값이 같다면, 생략 가능

const name = "nbc"
const age = "30"

const obj = {
	name,
	age: newAge
}

const obj = {
	name,
	age
}

 

6 전개 구문 (Spread)

배열이나 객체를 전개하는 문법이에요. 구조분해할당과 함께 정말 많이 사용됩니다.

// 배열
let arr = [1,2,3];

let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]

// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}

user2.name = "nbc2"

console.log(user.name) // nbc
console.log(user2.name) // nbc2

 

(7) 나머지 매개변수(rest parameter)

function func (a, b, ...args) {
	console.log(...args)
}

func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7

 

8 템플릿 리터럴 (Template literals)

"string"
'string'
new String("string")

`string text`

`string text 
string text line2`

`string text ${value} text`

 

9 named export vs default export

 

default export

// name.js
const Name = () => {
}

export default Name

// other file 
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"

 

named export

// 하나의 파일에서 여러 변수/클래스 등을 export 하는 것이 가능

export const Name1 = () => {
}

export const Name2 = () => {
}

// other file
import {Name1, Name2} from "name.js"
import {newName} from "name.js" // x

// 다른 이름으로 바꾸려면 as 사용
import {Name1 as newName, Name2} from "name.js"

// default export 처럼 가져오려면 * 사용
import * as NameModule from "name.js"

console.log(NameModule.Name1)

 

2. 일급 객체로서의 함수

자바스크립트에서 함수는 일급 객체(First-Class Object)라고 해요. 그래서 함수를 객체처럼 여러가지 방식으로 다룰 수 있다. 함수가 일급 객체로 취급되기 때문에, 우리는 함수를 매우 유연하게 사용할 수 있어요. 아래에서 함수가 일급 객체로 취급되는 5가지 경우에 대해 알아볼게요.

(1) 변수에 함수를 할당

함수는 변수에 할당할 수 있습니다. 함수는 값으로 취급되기 때문에, 다른 변수와 마찬가지로 변수에 할당할 수 있습니다. 변수에 할당된 함수는 나중에 사용할 수 있습니다.

const sayHello = function() {
  console.log('Hello!');
};

sayHello(); // "Hello!" 출력

(2) 함수를 인자로 다른 함수에 전달

함수는 다른 함수에 인자로 전달될 수 있습니다. 함수가 값으로 취급되기 때문에, 다른 함수의 인자로 전달할 수 있습니다. 이것은 콜백(callback)이나 고차 함수(higher-order function)를 작성하는 데 사용됩니다.

콜백 함수. 그리고, 고차 함수(Higher-Order Function)란?

• 콜백 함수는 어떠한 함수의 매개변수로 쓰이는 함수를 말한다.
• 고차 함수는 함수를 인자로 받거나 함수를 출력으로 반환하는 함수를 말합니다. 함수를 다루는 함수라고도 하죠. 정리하면 콜백함수는 고차함수라고도 할 수 있겠다.

function callFunction(func) {
  func();
}

const sayHello = function() {
  console.log('Hello!');
};

callFunction(sayHello); // "Hello!" 출력

(3) 함수를 반환

함수는 다른 함수에서 반환될 수 있습니다. 함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있습니다. 이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용됩니다.

function createAdder(num) {
  return function(x) {
    return x + num;
  }
}

const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력

(4) 객체의 프로퍼티로 함수를 할당

함수는 객체의 프로퍼티로 할당될 수 있습니다. 객체의 메소드로 함수를 호출할 수 있습니다.

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // "Hello, my name is John" 출력

(5) 배열의 요소로 함수를 할당

함수는 배열의 요소로 할당될 수 있습니다. 이것은 함수를 배열에서 사용할 수 있게 합니다.

const myArray = [
  function(a, b) {
    return a + b;
  },
  function(a, b) {
    return a - b;
  }
];

console.log(myArray[0](5, 10)); // 15 출력
console.log(myArray[1](10, 5)); // 5 출력

 

함수가 일급 객체로 취급되기 때문에, 자바스크립트에서 함수는 매우 유연하게 사용될 수 있습니다. 함수를 일급 객체로 다룰 수 있다는 것은, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있고 함수를 다양하게 조합할 수 있다는 것을 의미합니다. 새로운 함수를 반환하는 함수를 작성하면, 함수를 조합하여 더 복잡한 기능을 구현할 수 있어요. 이것을 활용하면 코드를 더욱 간결하게 작성할 수 있으며, 유지 보수도 쉬워집니다.

function multiplyBy(num) {
  return function(x) {
    return x * num;
  }
}

function add(x, y) {
  return x + y;
}

const multiplyByTwo = multiplyBy(2);
const multiplyByThree = multiplyBy(3);

const result = add(multiplyByTwo(5), multiplyByThree(10)); // 40 출력

이처럼 함수가 일급 객체로 취급되는 것은 자바스크립트에서 함수를 다양한 방식으로 사용할 수 있게 해줍니다. 함수를 객체나 배열과 같은 일반적인 자료형과 동일한 방식으로 사용할 수 있기 때문에, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있습니다.

 

3. Map과 Set

JavaScript에서 객체(object)와 배열(array)을 이용하면 굉장히 다양하고 복잡한 프로그래밍을 할 수가 있습니다. 그럼에도 불구하고 여전히 현실세계의 여러가지 문제들을 ‘프로그래밍’적으로 반영하기엔 많이 부족해요. Map과 Set은 이러한 한계를 극복하고자 비교적 최근 등장한 자료구조라고 할 수 있습니다.

이 두 자료 구조는 데이터의 구성, 검색 및 사용을 객체나 배열보다 효율적으로 처리할 수 있기 때문에 많이 각광받고 있어요. 이제 JavaScript에서 Map과 Set을 사용하는 방법을 살펴보겠습니다 

(1) Map

Map은 키-값 쌍을 저장하는 객체와 비슷합니다. Map은 각 쌍의 키와 값을 저장하며, 객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있습니다. Map은 키가 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없습니다. Map을 사용하면 다음과 같은 작업을 수행할 수 있습니다.

• 키-값 쌍 추가 및 검색(set)
• 키-값 쌍 삭제(delete)
• 모든 키-값 쌍 제거(clear)
• Map 크기 및 존재 여부 확인(size)

[맵에는 다음과 같은 주요 메서드와 프로퍼티가 있습니다]

• new Map() – 맵을 만듭니다.
• map.set(key, value) – key를 이용해 value를 저장합니다.
• map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.
• map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.
• map.delete(key) – key에 해당하는 값을 삭제합니다.
• map.clear() – 맵 안의 모든 요소를 제거합니다.
• map.size – 요소의 개수를 반환합니다

<Map 생성 및 사용>

새로운 Map을 만들려면 Map() 생성자를 사용합니다.

const myMap = new Map();

이제 Map에 값을 추가하려면 set() 메소드를 사용합니다.

myMap.set('key', 'value');

Map에서 값을 검색하려면 get() 메소드를 사용합니다.

console.log(myMap.get('key')); // 'value' 출력

<Map의 반복>

Map에서는 keys(), values(), entries() 메소드를 사용하여 키, 값 및 키-값 쌍을 반복할 수 있습니다.

[for …of 반복문]

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다(직접 명시 가능).

var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value);// 10, 20, 30
}

iterator는 반복자라는 말이에요. 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조로 이해해주시면 돼요. 아래 예시 코드에서 myMap.keys()으로 쓸 수 있는 이유는 myMap.key()가 반환하는 값이 iterator이기 때문이에요.

const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

for (const key of myMap.keys()) {
  console.log(key);
}

for (const value of myMap.values()) {
  console.log(value);
}

for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`);
}

<Map의 크기 및 존재 여부 확인>

Map의 크기를 확인하려면 size 속성을 사용합니다.

console.log(myMap.size); // 3 출력

특정 키가 Map에 존재하는지 여부를 확인하려면 has() 메소드를 사용합니다.

console.log(myMap.has('two')); // true 출력

(2) Set

Set은 고유한 값을 저장하는 자료 구조입니다. Set은 값만 저장하며, 키를 저장하지 않습니다. Set은 값이 중복되지 않는 유일한 요소로만 구성됩니다. Set을 사용하면 다음과 같은 작업을 수행할 수 있습니다.

• 값 추가 및 검색
• 값 삭제
• 모든 값 제거
• Set 크기 및 존재 여부 확인

<Set 생성 및 사용>

새로운 Set을 만들려면 Set() 생성자를 사용합니다.

const mySet = new Set();

이제 Set에 값을 추가하려면 add() 메소드를 사용합니다.

mySet.add('value1');
mySet.add('value2');

Set에서 값을 검색하려면 has() 메소드를 사용합니다.

console.log(mySet.has('value1')); // true 출력

<Set의 반복>

Set에서는 values() 메소드를 사용하여 값을 반복할 수 있습니다.

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');

for (const value of mySet.values()) {
  console.log(value);
}

<Set의 크기 및 존재 여부 확인>

Set의 크기를 확인하려면 size 속성을 사용합니다.

console.log(mySet.size); // 3 출력

특정 값을 Set에서 검색하여 존재하는지 여부를 확인하려면 has() 메소드를 사용합니다.

console.log(mySet.has('value2')); // true 출력

JavaScript에서 Map과 Set은 두 가지 다른 유형의 자료 구조입니다. Map은 키-값 쌍을 저장하는 객체와 비슷하며, Set은 고유한 값을 저장하는 자료 구조입니다. Map 및 Set은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있습니다. Map 및 Set을 사용하여 효율적인 데이터 구성 및 검색을 수행할 수 있습니다.

 

https://school.programmers.co.kr/learn/courses/30/lessons/12915

프로그래머스

프로그래머스 문제다.

 

function solution(strings, n) {
    let temp=[];
    for(let i =0;i<strings.length-1;i++){ //버블정렬
        for(let j=0;j<strings.length-1-i;j++){
            if(strings[j][n]>strings[j+1][n]){
            temp = strings[j];
            strings[j] = strings[j+1];
            strings[j+1] = temp;
            }
            
            else if (strings[j][n] === strings[j+1][n]){
                for(let k=0;1;k++){
                    if(strings[j][k] > strings[j+1][k]){
                        temp = strings[j];
                        strings[j] = strings[j+1];
                        strings[j+1] = temp;
                        break;
                        
                    } else if(strings[j][k] < strings[j+1][k]){break;}
                }
            }
        }      
    }
    return strings;
}

난 일일이 다 정렬 구현하고 그랬는데 자바스크립트엔sort()나 localeCompare()같은 훌륭한 메소드들이 있는줄 몰랐다.

 

sort()와 localeCompare()

1. sort()

sort()는 배열을 정렬하는 메서드입니다. 문자열 배열을 기본적으로 알파벳 순서로 정렬하지만, 숫자나 언어에 맞는 순서로 정렬하려면 조건을 추가해 줄 수 있습니다.

• 기본적으로 sort()는 배열 요소를 문자열로 취급하여 사전식으로 정렬합니다.
• 숫자를 제대로 정렬하려면 sort() 메서드에 비교 함수를 넣어주어야 합니다.

문자열 예시

let fruits = ["banana", "apple", "cherry"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "cherry"]

 

숫자 배열을 정렬할 때

let numbers = [10, 5, 2, 30];
numbers.sort((a, b) => a - b); // 오름차순 정렬
console.log(numbers); // [2, 5, 10, 30]

2. localeCompare()

localeCompare()는 두 문자열을 비교하여 언어에 맞게 정렬할 수 있도록 도와주는 메서드입니다. 주로 비교 함수로 사용되어 sort()와 함께 사용됩니다. localeCompare()는 문자열 간의 문자열 비교를 지역화할 수 있어, 알파벳 외의 문자나 다른 언어에 맞는 정렬을 지원합니다.

• 반환 값은 다음과 같습니다:
  • -1: 첫 번째 문자열이 두 번째 문자열보다 앞에 와야 할 때
  • 1: 첫 번째 문자열이 두 번째 문자열보다 뒤에 와야 할 때
  • 0: 두 문자열이 동일할 때

사용 예시

let items = ["banana", "apple", "cherry"];
items.sort((a, b) => a.localeCompare(b));
console.log(items); // ["apple", "banana", "cherry"]

언어에 맞게 정렬할 때 이런 특이한 정렬옵션도 있더라..

let words = ["äpple", "banana", "cherry"];
words.sort((a, b) => a.localeCompare(b, 'de')); // 독일어 기준 정렬
console.log(words); // ["äpple", "banana", "cherry"]

요약

• sort(): 배열을 정렬하는 기본 메서드. 숫자 정렬이나 사용자 정의 정렬 시 비교 함수가 필요함.
• localeCompare(): 문자열 비교 메서드로 sort()와 함께 사용하면 특정 언어 기준에 맞춘 정렬이 가능함.