[포스코x코딩온] 풀스택 부트캠프 2주차 정리 -2 (javascript)

String:

JS또한 string slicing이 가능하다.

// str은 method를 execute할 문자열이다.

str.slice(startIndex, endIndex);
str.slice(startIndex);   => (to end) 

str.replace('a', 'b'); // 처음오는 하나만 바꾸기
str.replaceAll('a', 'b'); // 모두 바꾸기

str.repeat(3); // 문자열 3번 반복

str.split(''); 
//매개변수로 들어온 문자열을 기준으로 str을 쪼개서 배열로 저장.
//해당 경우에는 아무것도 들어가 있지 않기 때문에 한 글자를 기준으로 자른다.

str.split(' ');
의 경우 처음과 마지막에 공백이 있다면 [ex)' a b c '] 이를 기준으로 나눠서 ''값이 앞뒤에 들어온다.
그러므로 trim을 해주고 해주자.

 

 

for문 안에서 객체의 value에 접근하는 방식이 다른 이유

해답: 

const obj = {
            name : 'jihun',
            age : 26,
            married : 'not married',
            statement : 'I\'m starving'
        }
console.log(obj.married);
console.log(obj.['married']);

위와 같이 객체를 설정하고 key값 중 married의 value를 출력하려 한다. 하지만 두 경우 출력하는 문법이 다르다.

왜냐면 '.' 방식으로는 직접 key값을 넣기 때문이다.

만약 변수로 할당할 때는 변수에 할당된 값이 str값이기 때문에 [] 안에 넣어야한다.

 

고로 iteration에 별도의 변수를 만들고 이를 할당해서 하나씩 반복하는 for in이나 for of + [key값들의 배열] 등의 경우 obj[key] <= 이러한 형식을 통해서 value를 호출한다고 할 수 있겠다.

 

Object : Math 

Math 객체의 method인 round의 경우 다른 언어와는 다르게 정수로만 return이 가능하다.

그러므로 소수 몇번째까지 구하려면 *10^ 을 하고 round를 통해서 소수점을 구하고 /10^을 그대로 나눠서 소수 자리로 내려주면 될 듯하다.

다른 method는 num.toFixed(원하는 자리); 가 있다.

 

console.log(Math.round(5.532*100)/100);
// 정수까지만 가능하기 때문에 소수점 몇번쨰까지 출력하려면 이런식으로 해야하지 않을까...?
console.log((5.532).toFixed(2));
// 위 식의 Mehtod, 소수점 1번째 자리까지 나타냄. 그 이하는 반올림.

 

 

DOM

 

 

        let two = document.getElementById('two');

     

        two.innerHTML = '<p><strong>강조</strong></p>!@'; // 해당 tag가 적용되어 나온다.

        two.textContent = '<p><strong>강조</strong></p> !@ '; // tag가 적용되지 않고 그대로 text상태로 나온다.

     

 

// - innerText : 문자열을 넣는 것 & 공백문자는 제거한다.

// - innerHTML : HTML 요소를 넣는 것

// - textContent : 문자열을 넣는 것 & 공백문자 반환.

// 속성 변경 method

        let inputEl = document.getElementById('userName')

        inputEl.setAttribute('placeholder','name');   // placeholder 값에 'name' 할당

        inputEl.placeholder = 'name2'; // 이렇게도 가능

        inputEl.style = "outline: none";

        inputEl.style.backgroundColor = 'skyblue';

 

 

 

       function pSibling() {

            console.log(redBox.previousSibling);

            // 주석도 탐지함, 주석도 하나의 노드로 취급함에 주의!!!!! 해당 상황을 벗어나려면

           //previousElementSibling을 쓰면 된다.

        }

 

원시값과 참조값. 깊은복사와 얕은복사

 

- 전제:

    배열, 객체, 함수는 모두 객체(object)이다. 다만 특수한 객체.

    얕은복사: 주소값을 복사하는 것(이름만 다르지 같은 값).

    깊은복사: 주소값에 할당된 value를 그대로 복사해서 새로운 값을 만드는 것(다른 값).

원시값(  Primitive values)은 일반적인 컴퓨터 메모리에 저장되지만, 참조값( Reference values )인, 객체는 다르다. 
객체는 복잡해서 메모리 이슈를 이유로 복사는 될 수 있으면 지양한다.
그래서 함수에 parameter로 들어갈때도 복사값을 넣지 않고 주소값(포인터, 참조값)을 넣는다(원본을 넣는다. ==  얕은복사). 고로. parameter로 들어가도 원시값과 달리 객체의 값을 바꿀 수 있다.

예를들면,

let element = document.getElementById('id');
element.textContent = 'something';

let elementContent = document.getElementById('id').textContent;
elementContent = 'something';

위 둘의 차이와 같다.
첫번째는 객체 얕은복사를 통해 주소값을 가져오기 때문에 원본이 수정되는 것이고,

 

*(스프레드 연산자인 {...element}를 쓰면 수정되지 않지만, 이것마저도 겉은 깊은복사이지만 객체 안에 객체가 들어가면 그 안에는 얕은복사가 되기 때문에 이중구조에서는 활용 불가능하다. 이럴 경우에는  JSON.parse(JSON.stringify(object))나  Lodash 라이브러리 (타사패키지 사용)을 통해 deepCopy를 하면 깊은 복사가 가능하다.)

두번째는 string값, 원시값을 가져왔기 때문에, 즉 깊은복사가 되기 때문에 원본에 변형이 일어나지 않는다.