TIL.12 Javascript_초급_2

// Template literals

var name = 'k8805';

var letter = 'Dear '+name+' \n\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '+name+' Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa egoing qui officia deserunt mollit anim id est laborum. '+name;

console.log(letter);

::

Dear k8805 

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. k8805 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa egoing qui officia deserunt mollit anim id est laborum. k8805

Dear k8805

// \n == 줄바꿈이라는 약속

 

var name = 'k8805';

var letter = `Dear ${name}

 

Lorem ${1+1}ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ${name} Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa egoing qui officia deserunt mollit anim id est laborum. ${name}`;

console.log(letter);

:: (위와 동일한 결과)

Dear k8805

 

Lorem 2ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. k8805 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa egoing qui officia deserunt mollit anim id est laborum. k8805

// literals 이란?

// JS에서 문자열을 입력하는 방식 중 하나이다.

// 정보를 표현하는 방법, 정보를 표현하는 기호로 이해하면 된다.

// Template literals 은 ` (grave accetn)라는 기호로 시작해서 `로 끝난다.

// 첫번째 코드에서는 내가 원하는 줄바꿈을 해주기 위해 \n\n이라는 보기에도 불편한 코드가 추가되었는데, Template literals을 사용하면 (``) 이스케이프 문자를 사용하지 않아도 되며, JS변수를 문자열 안에 바로 연결 할 수 있는 이점이 생긴다.

// ${변수} 를 써주면 해당 위치에 변수 올 수 있다는 약속이다. ${변수}를 넣으면 해당 변수로 치환이되고, ${1+1}을 넣으면 2로 출력이 된다.

 

---

var str = 'Template literals are string literals allowing embedded expressions. \n' + 

'You can use multi-line strings and string interpolation features with them. \n' + 

'They were called "template strings" in prior editions of the ES2015 specification.';

console.log(str);

::

Template literals are string literals allowing embedded expressions. 

You can use multi-line strings and string interpolation features with them. 

They were called "template strings" in prior editions of the ES2015 specification.

 

const strr = `Template literals are string literals allowing embedded expressions.

You can use multi-line strings and string interpolation features with them.

They were called "template strings" in prior editions of the ES2015 specification.`;

console.log(strr);

::

(위와 동일)

// Template literals을 사용하면

// 이전에는 var , \n , + 등을 이용해 사용한것에 비해 훨씬 가독성이 좋은 코드를 입력 및 출력할 수 있다.

 

기타. Raw string

const s = String.raw `xy\n+${2+3}z`;

console.log(s);  //xy\n+5z

::

xy\n+5z

// Raw string은 이스케이프 문자를 해적하지 않는 일반 문자열이다.

// String.raw 태그함수를 사용하면 템플릿의 문자열을 입력한 그대로 출력 한다. (String 대소문자 구별!!)

// if 조건문

 

// if () {} else if (){} else {}의 구조

// if(처음 ; 조건; 끝) {실행}

var j = 6;  

if (j < 5) { 

    console.log('딸기') 

    j = j + 3; 

}

else {

    console.log('과일 끝');

}

::

과일 끝

---

var i = 0; // 1

while (i < 5) {  //2 5 8

    console.log('딸기') // 3 6 

    i += 3; // 4 7

}

::

딸기

딸기

---

for (var i =0; i < 5; i += 3) {

    console.log('딸기')

}

::

딸기

딸기

 

// for 반복문

// for (시작; 조건; 끝) { 내용; } 으로 구성되어 있다.

// for (초기문; 조건문; 증감문) { 명령문;} 

 

// 대표적으로 for, while문 말고도 많은 반복문이 존재한다.

// 1) for 문

// 2) for / in 문

// 3) for / of 문

// 4) while 문

// 5) do / while 문

// 6) label 문

// 7) break 문

// 8) continue 문

// 반복문내에서 조건이 참(True)라면 명령문을 실행한다.

 

---

for (var i = 1; i < 10; i += 1) { 

    console.log(i + '번째 실행')

}

::

1번째 실행

2번째 실행

3번째 실행

4번째 실행

5번째 실행

6번째 실행

7번째 실행

8번째 실행

9번째 실행

---

const a = [10, 20, 30, 40, 50];

for (i in a) {

    console.log(i + '번째 값')

}

::

0번째 값

1번째 값

2번째 값

3번째 값

4번째 값

---

const b = [10, 20, 30, 40, 50];

for (j of b) {

    console.log(j + " 값값")

}

::

10 값값

20 값값

30 값값

40 값값

50 값값

// while 문

// while (조건) { 내용 ;} 으로 구성되어 있다. 

Python과 마찬가지로 반복횟수를 알때(for) 모를떄(while)로 생각하면 될 듯 하다.

// while (조건문) {명렁문;}

var i = 0; // 1

while (i < 5) {  //2 5 8

    console.log('딸기') // 3 6

    i += 3; // 4 7 

}

console.log('과일'); // 9

::

딸기

딸기

과일

---

// while이 어렵다면 아래 동일 조건으로 if문 여러개를 사용해보자

// if문 여러개를 줄인것이 whiel문과 동일하기 때문이다.

 

var j = 0;  // 1

if (j < 5) { // 2

    console.log('딸기') //3

    j = j + 3; //4

}

if (j < 5) { // 5

    console.log('딸기') // 6

    j = j + 3; //7

}

if (j < 5) { //8

    console.log('딸기')

    j = j + 3;

}

:: 

딸기

딸기

// 또한 반복문 공부시 주석으로 실행순서를 달면서 공부하면 훨씬 효율이 좋다.

 

 

 

출처

joshua1988.github.io/es6-online-book/template-literal.html#%EC%97%AC%EB%9F%AC-%EC%A4%84%EC%97%90-%EA%B1%B8%EC%B3%90-%EB%AC%B8%EC%9E%90%EC%97%B4-%EC%84%A0%EC%96%B8%ED%95%98%EA%B8%B0 

eblee-repo.tistory.com/38

goddaehee.tistory.com/227

www.youtube.com/channel/UCp-vBtwvBmDiGqjvLjChaJw

ZeroCho TV

 

 

 

 

 

 

// 처음

// while(조건){

//    실행

//    끝

// }

 

// for (처음; 조건; 끝) {

//    실행

// }

 

// while <-> for 서로 바꿔보는 연습을 해보자.

// 연산자의 우선 순위 + > (<, > 부등호) > =