Week2 - JavaScript (7)

template literal

---> template literal 이용하여 variable & string

1) 기호를 이용하여 javascript editor에서 작성한대로 줄바꿈 적용
2) String 내에서 ${variable}이용하여 변수적용

1  let name = 'lalala';
2
3  const str1 = `
4  What is ${name} Lorem Ipsum?
5  Lorem Ipsum is : 
6  simply dummy text of the printing
7  and typesetting industry.
8  Lorem Ipsum has been
9  the industry's standard dummy text
10  ever since the 1500s, 
11  when an unknown printer took a gallery
12  of type and scrambled it
13  to make a type specimen book. `
14
15  console.log(str1);

반복문(while & for)

구조

for

for ( 1. var = (변수선언); 2. 끝(조건); 4. 증가 혹은 감소에 대한 정보) {3. 이행내용}

while

var = (1. 변수 선언);
    while(2. 범위(조건)){
                       3. 이행내용
                       4. 증가 혹은 감소 행함
                      }

해석

1.변수 선언 후 2.조건이 맞는 경우에 한해 3.내용 이행후 4.증가/감소 행함 -> 1번

3단 구구단 작성
for : var i & while : var o

for(var i = 1; i <= 9; i ++{
    document.write("3x" + i + " = " +(i*3)
    + '</br>');
}

var o = 1;
while(o<=9){
     document.write("3x" + o + " = " +(o*3)
     + '</br>');
     o++;
}

Array methods

1)"map" : array내 모든 요소를 변경해야 할 때 사용

map()메소드는 호출 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 채워진 새 배열을 만든다.

const numbers = [1,2,3];

// change : i를 i * i로 변경하는 function
const change = i => i * i;

// result : array(number)에 function(change)를 적용
const result : numbers.map(change);

console.log(result);                   // [1, 4, 9]

const date = [12, 26, 31];

// month : 위 날짜에 특정 월을 추가하는 function을 직접 적용
const month = date.map((date) => "March" + (date));

console.log(month);       //["March12", "March26", "March31"]

2)"filter" : array내에서 조건에 해당하는 요소를 filtering

filter()메소드는 제공된 함수에 의해 구현된 테스를 통과하는 모든 요소로 새 배열을 만든다.

// word length > 6
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
                          // ["exuberant", "destruction", "present"]
// value >= 10
function isBigEnough(value) {
  return value >= 10
}
let filtered = [12, 5, 8, 130, 44].filter(isBigEnough)
console.log(filtered);                               //[12, 130, 44]

3)"pop" & "push" :

pop : array내 마지막 element를 제거하고 해당 element를 반환
pop()메소드는 배열에서 마지막 요소를 제거하고 해당 요소를 반환한다.
이 메소드는 배열의 길이를 변경한다.

push : array내 마지막에 element를 추가하고 변경된 array를 반환
push()메소드는 배열 끝에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환한다.

const animals = ['pigs', 'goats', 'sheep', 'dog'];

const remove = animals.pop();
console.log(remove);                 // "dog"
console.log(animals);                // ["pigs", "goats", "sheep"]

const add = animals.push('cows');
console.log(add);                    // 4
console.log(animals);                // ["pigs", "goats", "sheep","cows"]
animals.push('chickens', 'cats'); 
console.lod(animals);                // ["pigs", "goats", "sheep", 
                                        "cows", "chickens", "cats"]

4)"splice": array내 특정 index위치의 element를 제거 혹은 교체

splice()메소드는 기존요소를 제거 혹은 교체하거나 새 요소를 제자리에 추가하여 배열의 내용을 변경

구조!?
Array를 포함한 변수이름.splice(
1. 위치지정 index,
2. 제거할 element 수,
3. 추가할 element(s) 내용);

const alph = ["A", "Z", "Y", "O", "E", "F"]

alph.splice(1, 0, 'B');      // index1에 0개의 element를 제거하고 그 자리에 'B'추가
console.log(alph);           // Array["A", "B", "Z", "Y", "O", "E", "F"]

alph.splice(4, 1, 'W');      // index4에 1개의 element를 제거하고 그 자리에 'W'추가
console.log(alph);           // Array["A", "B", "Z", "Y", "W", "E", "F"]

alph.splice(2, 3, 'C', 'D'); // index2에 3개의 element를 제거하고 그 자리에 'C'와 'D'추가
console.log(alph);           // Array["A", "B", "C", "D", "E", "F"]

5)"slice" : array내 지정범위의 elements를 복사본으로 반환(기존 array보존)

slice()메소드는 배열부분의 얕은 복사본을 처음부터 끝까지 선택한 새 배열개체로 반환(끝은 포함되지 않음). 여기서 시작과 끝은 해당 배열의 항목 인덱스를 나타냄. 원래 배열은 수정되지 않는다.

const alph = ['A', 'B', 'C', 'D', 'E'];

console.log(alph.slice(2));      // Array ["camel", "duck", "elephant"]
console.log(alph.slice(2, 4));   // Array ["camel", "duck"]
console.log(alph.slice(1, 5));   // Array ["bison", "camel", "duck", "elephant"]