개발자 아지트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 

문자열 내에서 표현식을 포함한다. 따라서 여러줄의 문자열을 보다 간편하게 작성할 수 있게 해준다. 

템플릿 리터럴은 백틱(backtick, `)문자로 싸여 사용된다. 

(맥북에서 백틱을 출력하려면 키보드 표현을 영어로 전환하고 ₩를 누르면 출력할 수 있다. )

기본 문법

let text = `Hello, World!`;

특징

1. 다중 줄 문자열 (Multi-line Strings)

let multiLine = `This is
a string
that spans multiple lines.`;

console.log(multiLine);

템플릿 리터럴을 사용하면 여러 줄의 문자열을 쉽게 작성할 수 있다. 

2. 표현식 삽입 (Expression Interpolation)

${} 구문을 사용하여 문자열 내에 표현식을 삽입할 수 있다.

let name = 'Alice';
let greeting = `Hello, ${name}!`;

console.log(greeting); // Hello, Alice!

표현식 내에서는 JavaScript의 모든 유효한 표현식을 사용할 수 있다. 

아래는 숫자와 문자가 혼합된 경우이다. 

let a = 5;
let b = 10;
let sum = `The sum of a and b is ${a + b}.`;

console.log(sum); // The sum of a and b is 15.

3. 태그된 템플릿 리터럴 (Tagged Template Literals)

태그 함수(tag function)를 사용하여 템플릿 리터럴을 처리할 수 있다. 태그 함수는 템플릿 리터럴의 각 부분과 표현식을 인수로 받아 처리한다. (템플릿 리터럴에 태그 함수를 붙여서 문자열과 삽입된 표현식을 가공하는 기능임)

태그함수는 두 종류의 인수를 받는다. 

1. 문자열 리터럴 부분들을 배열로 받는다. 

2. 표현식 부분들을 순서대로 받는다. 

function tag(strings, ...expressions) {
    console.log(strings); // ['Hello, ', '! How are ', ' today?']
    console.log(expressions); // ['Alice', 'you']
    return `${strings[0]}${expressions[0]}${strings[1]}${expressions[1]}${strings[2]}`;
}

let name = 'Alice';
let tagResult = tag`Hello, ${name}! How are ${'you'} today?`;

console.log(tagResult); // Hello, Alice! How are you today?

4. 중첩된 템플릿 리터럴 (Nested Template Literals)

템플릿 리터럴은 중첩해서 사용할 수 있습니다.

let nested = `This is ${`a nested ${`template literal`}`}.`;

console.log(nested); // This is a nested template literal.

예제

1. 다중 줄 문자열

let multiLine = `This is a
multi-line string.`;

console.log(multiLine);
// 출력:
// This is a
// multi-line string.

2. 표현식 삽입

let name = 'Bob';
let age = 30;
let greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting); // Hello, my name is Bob and I am 30 years old.

3. 태그 함수 사용

function emphasize(strings, ...values) {
    return strings.reduce((result, str, i) => `${result}${str}<strong>${values[i] || ''}</strong>`, '');
}

let name = 'Charlie';
let message = emphasize`Hello, ${name}! Welcome to our site.`;

console.log(message); // Hello, <strong>Charlie</strong>! Welcome to our site.

템플릿 리터럴은 가독성을 높이고, 다중 줄 문자열과 동적인 문자열 생성을 더욱 쉽게 만들어주는 강력한 기능을 제공한다. JavaScript에서 문자열 작업을 할 때 매우 유용한 도구다.

기존에 자바스크립트로 작성한 코드에서 ES6표준을 따르는 코드로 바꾸고 싶어서 ES6에 대해서 찾아보다가 화살표 함수가 뭔지 알게됐다.  이번 글에서는 화살표 함수에 대해서 정리해보려고 한다. 

JavaScript의 화살표 함수(arrow function)는 ES6(ECMAScript 2015)에서 도입된 간결한 문법의 함수 표현식이다. 화살표 함수는 기존 함수 선언보다 코드가 짧아지고, this 키워드의 동작이 달라지는 등의 특징이 있다. 다음은 화살표 함수에 대한 설명과 예제이다.

문법

화살표 함수는 다음과 같은 문법으로 작성된다.

(param1, param2, ..., paramN) => { statements }

param => { statements }

반환 값이 있는 단일 표현식의 경우 중괄호와 return 키워드를 생략할 수 있다.

(param1, param2) => expression

예제

1. 기본 사용법

// 전통적인 함수 표현식 
let add = function(x, y) {
	return x + y; 
}; 
    
// 화살표 함수 표현식 
let add = (x, y) => {
	return x + y; 
}; 
    
// 표현식으로 반환하는 경우 중괄호와 return 생략 
let add = (x, y) => x + y; 

console.log(add(2, 3)); // 5

2. 매개변수가 하나일 때 괄호 생략

let square = x => x * x;
console.log(square(4)); // 16

3. 매개변수가 없을 때

var greet = () => 'Hello';
console.log(greet()); // 'Hello'

특징

1. this 바인딩

화살표 함수는 자신만의 this 바인딩을 가지지 않는다. 대신, 화살표 함수는 상위 스코프의 this를 캡처한다. 이는 특히 콜백 함수 내부에서 유용하다.

function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++; // this는 Person 객체를 참조합니다
        console.log(this.age);
    }, 1000);
}

var person = new Person();

위 예제에서 setInterval 내부의 화살표 함수는 Person 객체의 this를 캡처하여 사용한다.
전통적인 함수 표현식을 사용했다면 this가 window 객체를 참조하게 된다.

2. arguments 객체 없음

화살표 함수는 arguments 객체를 가지지 않는다.

대신 나머지 매개변수(rest parameters)를 사용해야 한다.

var sum = (...args) => args.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3, 4)); // 10

3. 생성자 함수로 사용 불가

화살표 함수는 생성자 함수로 사용할 수 없다. new 키워드와 함께 사용할 수 없다.

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

화살표 함수는 간결한 문법과 this 바인딩의 특수성 덕분에 특히 콜백 함수나 간단한 함수 표현식에 유용하게 사용된다. 그러나 생성자 함수나 arguments 객체가 필요한 경우 전통적인 함수 표현식을 사용해야 한다.

자바스크립트 ECMAScript6(ES6)은 최신 표준 버전을 말한다. 

해당 버전에는 다음과 같은 기능들이 포함되어있다. 

• const and let Arrow
• functions(화살표 함수)
• Template Literals(템플릿 리터럴)
• Default parameters(기본 매개 변수) 
• Array and object destructing(배열 및 객체 비구조화)
• Import and export(가져오기 및 내보내기)
• Promises(프로미스)
• Rest parameter and Spread operator(나머지 매개 변수 및 확산 연산자) 
• Classes(클래스)

• 자바스크립트에서 배열인지 확인하는 코드 작성하는 방법 

Array.isArray(obj) // 반환값은 boolean값이다. 객체가 배열인 경우 true, 아닌경우 false를 반환

• for each 문

(기본 형태)

array.forEach(element => {
                    
});


array.forEach((item, index, array) => {
                    
});

• 데이터 타입 확인하기 위한 함수

typeof(operand) // 반환값은 operand의 타입 값을 반환함

• let과 const의 공통점
  • 변수를 선언할 때 사용하는 키워드이다. 
  • 블록 스코프를 가지므로, 블록 외부에서는 접근할 수 없다. 
  • 호이스팅 되지만, 초기화 되기전에 접근할 수 없다. 
  • 동일 스코프 내에서 중복 선언이 불가능하다. 
  • 전역 스코프에서 전역 객체의 속성이 될 수 없다. 
• let과 const의 차이점
  • let: 언제든 내용물을 바꿀 수 있는 변수
  • const: 상수 
• var을 사용하면 안되는 이유
  • 코드의 가독성과 예측성, 잠재적 버그를 피하기 위함
  • var을 사용했을때 발생할 수 있는 문제
    • var는 함수 스코프를 가지므로 블록 외부에서도 접근이 가능하다. 이로 인해 스코프의 예측이 불가능하다.
    • var로 선언된 변수는 호이스팅이 되어 선언전에 접근할 수 있다. 이로인해 초기화되지 않은 변수를 사용할 경우, 버그가 발생한다. 
    • var로 선언된 변수는 동일한 스코프 내에서 여러번 선언할 수 있다. 이는 코드의 예측가능성을 낮추고 실수 유발의 가능성을 만든다. 
    • 전역 스코프에서 전역 객체의 속성이 될 수 있다. 이는 예상치 못한 상호작용을 초래할 수 있다. 
• JSON.stringify()을 사용하면 대상을 JSON 문자열로 변환할 수 있다. 
• window.localStorage.setItem을 사용하면 해당 위치에 데이터를 저장할 수 있다. 
• JSON.parse()를 이용하면 자동으로 JSON 문자열을 자바스크립트 객체로 변환해준다.

1. DOM(Document Object Model)

DOM은 Document Object Model의 약자로, 웹 페이지의 구조화된 표현을 제공하는 인터페이스이다.

HTML이나 XML 문서의 각 요소에 접근하고 조작할 수 있는 방법을 제공한다.

• 개념: 웹 페이지를 논리적인 트리 구조로 표현한 모델이고, 각 HTML 요소는 DOM 노드로 표현된다
• 사용: JavaScript를 사용하여 DOM에 접근하고 수정할 수 있으며, 이를 통해 동적으로 웹 페이지를 변경할 수 있다.

2. localStorage와 JSON 활용

localStorage

localStorage는 클라이언트 측에서 데이터를 장기간 저장할 수 있는 메커니즘이다.
이를 통해 사용자의 로컬 브라우저에 데이터를 저장하고, 세션이나 페이지가 새로고침되어도 데이터를 유지할 수 있다.

• 사용: localStorage.setItem('key', 'value')로 데이터를 저장하고, localStorage.getItem('key')로 데이터를 가져올 수 있다.

JSON (JavaScript Object Notation)

JSON은 JavaScript의 객체 표기법을 기반으로 하는 경량 데이터 교환 형식이다. 

JavaScript 객체를 문자열로 변환하거나, 문자열을 다시 JavaScript 객체로 파싱하는 데 사용된다.

• 사용: JSON.stringify()는 JavaScript 객체를 JSON 문자열로 변환한다. 
• JSON.parse()는 JSON 문자열을 JavaScript 객체로 파싱한다.

3. 이벤트 핸들러 (Event Handler)

이벤트 핸들러는 특정한 이벤트가 발생했을 때 실행할 JavaScript 코드를 정의하는 함수이다.

• 사용: HTML 요소에 이벤트 핸들러를 추가하여 사용자 상호작용에 반응하도록 할 수 있다.
• 예를 들어, 버튼 클릭(onclick), 키 입력(onkeydown), 마우스 이동(onmousemove) 등 다양한 이벤트를 감지할 수 있다.

4. JavaScript에서의 동적 DOM 조작

JavaScript를 사용하여 DOM을 동적으로 조작할 수 있다.

예를 들어, 새로운 요소를 생성하거나 기존 요소를 수정하고 삭제할 수 있다.

• DOM 생성: document.createElement()로 새로운 요소를 생성한다
• 요소 추가: parentNode.appendChild()로 요소를 부모 요소에 추가한다.
• 속성 설정: element.setAttribute()로 요소의 속성을 설정한다.
• 텍스트 삽입: element.textContent로 요소에 텍스트 내용을 추가하거나 수정한다.