Hyegineer

[javascript] 코어 자바스크립트 이론공부 - 01_데이터타입

2022-01-07T10:43:00+00:00

부트캠프 프렙코스 어드미션 결과가 나오기 전까지, 따로 js 이론 학습을 위해 코어 자바스크립트 책을 구매했다 ! 오늘은 20page까지 데이터타입 내용을 이해하면서 기타자료들과 함께 학습해봄

알게된 개념

데이터 타입에 관한 배경지식: 데이터 타입별로 변수들을 할당하는 과정이, 컴퓨터 메모리 원리를 알게되서 재밌고 흥미로웠다
부동소수점, 정수와 실수, 피연산자: js 기반지식이라기보단 수학 기초개념 다시 되새기기
변수의 호이스팅: poiemaweb에서 변수의 호이스팅 단계를 도식화한 자료를 제공해줘서 이해가 수월했당

(Data type & Variable) (number 타입 | Javascript로 만나는 세상)

[algorithm] 직사각형 별찍기

2022-01-06T12:10:00+00:00

이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다.
별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요.

process.stdin.setEncoding('utf8');
process.stdin.on('data', data => { 
const n = data.split(" "); 
const a = Number(n[0]), b = Number(n[1]);
for(let i = 0; i < b; i++){ 
        console.log('*'.repeat(a)) } 
});

repeat 알아감!!!

[javascript] 12-10 p.w.js.part4 Creating Elements

2021-12-10T07:40:00+00:00

아래 두 가지 예제 코드의 차이점을 분별해보세요.

const something = document.createElement("p");

for (let i = 0; i < 5; i++) {
    something.textContent = i;
    document.body.appendChild(something);
}

-> “01234”라는 문자열을 가진 p 엘리먼트 하나만 출력됌 (X) - 이렇게 생각했는뎀 something.textContent += i; 가 아니라 = 재할당이니깐 틀렸음 -> “4”라는 문자열을 가진 p 엘리먼트 하나만 출력됌

for (let i = 0; i < 5; i++) {
  const something = document.createElement("p");
  something.textContent = i;
  document.body.appendChild(something);
}

-> 0~4까지 각 숫자를 담은 p 엘리먼트 4개가 출력됌. (O)

[javascript] 12-10 innerHTML, textContent, innerText 간의 차이

2021-12-10T07:17:00+00:00

사전학습 가이드의 ⚠️ How to tackle problems 서두에 있는 강의를 보다가, innerHTML보다 textContent를 쓰는게 좋다는 켄님의 조언이 귀에 유독 들어왔다.

실무를 하면서 DOM의 text를 변경할 때는 innerHTML을 빈번하게 사용해왔던 나로써는 또 새롭게 발견된 textContent! 거의 3년 가까이 일했는데, 이제서야 알게 된 게 약간 머쓱하기도…

왜 innerHTML보다 textContent가 더 나을까?

브라우저에서는 textContent의 값을 text/plain으로 파싱하는데, 이게 다른 innerHTML, innerText보다 파싱이 빨리 성능면에서 좋다. innerHTML은 text/html로 파싱을 하게 되어 상대적으로 느리다고 한다. (하지만 큰 차이는 없다고 하네)
innerHTML 같은 경우 XSS 공격에 취약, 즉 보안에 취약하다는 단점이 있다고 한다. html 태그 중 script 태그를 삽입해서 실행하게 되면 공격을 받게되는 경우가 있는데 물론 HTML5에서 innerHTML의 script는 실행되지않도록 지정해놓았다고 한다.

찾아볼 수록 새로운걸 알 수 있는 자바스크립트의 세계~

매번 같은 방법으로 ‘돌아는 가네’식의 코드를 짰던 나의 모습을 조금은 경계하고 이렇게 공부를 하면서 새로운 방법을 적용해보면서 짜보던가, 아니면 다른 사람의 의도를 폭넓게 이해할 수 있는 기회를 좀 가져야겠다!

출처: 당신이 innerHTML을 쓰면 안되는 이유

[javascript] 12-09 가운데 글자 가져오기 리팩토링

2021-12-09T09:43:00+00:00

12-09

첫번째 풀이 과정
```
 function solution(s) {
     let center = s.length / 2;
     let str = '';

     if(s.length % 2 === 0){ // 짝수일 때
         str += s[Math.round(center) - 1];
         str += s[Math.round(center)];
     }else{
         str += s[Math.floor(center)];
     }

     return str;
 }
```
문자열의 길이 나누기 2한 값에서 요리조리 해서 Math.round를 했다가 Math.floor를 했다가 중구난방이다.

5초 후 미래의 내가 봐도 한심하다. 왜 저렇게 한걸까? ㅋㅋㅋㅋㅋㅋㅋㅋ ㅠㅠ 반올림을 하나 반내림을 하나 어차피 가운데 숫자로만 이용해서 메소드 종류별로 쓸 필요가 없었는데..

두번째 풀이 과정

 function solution(s) {
     let center = Math.floor(s.length / 2);
     let str = '';
        
     if(s.length % 2 === 0){ // 짝수일 때
         str += s[center - 1];
         str += s[center];
     }else{
         str += s[center];
     }

     return str;
 }

굳이 Math 객체의 메소드를 두개 쓸 필요 없이 해결이 되었다.

세번쨰 풀이 과정

 function solution(s) {
     let center = Math.floor(s.length / 2);
        
     return s.length % 2 === 0 ? s[center-1]+s[center] : s[center];
 }

삼항연산자와 연결연산자를 이용해 개행을 띄우지 않고 좀 더 간결하게 표현이 되었다. str 같은 굳이 필요없는 변수선언을 하지 않아서 함수 처리속도가 빠를 것 같다고 생각했는데 가산점 없는거보면 성능은 거기서 거긴가보다. ㅋㅋㅋ

[javascript] 12-08 javascript.info/object 관련 예제

2021-12-08T08:40:00+00:00

[javascript] 12-08 p.w.js.part2 javascript study

2021-12-08T07:50:00+00:00

12-08 (수)

for .. in 문

“integer property” 는 string 으로 바꿔도, number 로 바꿔도 동일한 값일 때, 숫자순서대로 정렬이 됀다.

 // Math.trunc is a built-in function that removes the decimal part
 alert( String(Math.trunc(Number("49"))) ); // "49", same, integer property
 alert( String(Math.trunc(Number("+49"))) ); // "49", not same "+49" ⇒ not integer property
 alert( String(Math.trunc(Number("1.2"))) ); // "1", not same "1.2" ⇒ not integer property
 </script>

반면에, key가 정수형이 아닐 때, 생성순으로 정렬이 된다.

 let user = {
   name: "John",
   surname: "Smith"
 };
 user.age = 25; // add one more
    
 // non-integer properties are listed in the creation order
 for (let prop in user) {
   alert( prop ); // name, surname, age
 }

그래서 국가코드와 같은 문제를 의도했던 정렬대로 하기 위해서는 속임수를 쓰는데, integer형이 아닌 non-integer 형태로 하면 된다. 각 국가코드의 맨 앞에 "+" 기호를 붙히면 작동한다.

 let codes = {
   "+49": "Germany",
   "+41": "Switzerland",
   "+44": "Great Britain",
   // ..,
   "+1": "USA"
 };
    
 for (let code in codes) {
   alert( +code ); // 49, 41, 44, 1
 }

[javascript] 12-07 javascript study

2021-12-07T13:00:00+00:00

12-07 (화)

대괄호를 사용해서 키값을 변수로 지정할 수 있음
```
 const property = 'name';
    
 const obj = {
   [property]: 'Ken Huh'
 };
    
 obj.property;  // undefined
 obj.name;      // 'Ken Huh'
```
위와 같이 대괄호를 사용해서 다른 변수에 저장된 문자열을 속성(Key)의 이름으로 쓰는 것도 가능합니다.
실제 코드에서, 존재하는 변수들을 속성 이름의 value로 빈번히 사용한다. 예를 들면 아래처럼..
```
 function makeUser(name, age) {
   return {
     name: name,
     age: age,
     // ...other properties
   };
 }
    
 let user = makeUser("John", 30);
 alert(user.name); // John
```
위의 예시와 같이, 프로퍼티들은 매개변수들과 똑같은 이름들을 가지는 경우가 있다. 이렇게 속성을 만드는 사용법은 매우 공통적이다. 특정 프로퍼티의 값의 속기로 매우 단축해서 쓸 수 있다.

name:name 과 같이 표기하는 대신에 name 만 쓰는 것처럼, 아래와 같이 말이다.
```
 function makeUser(name, age) {
   return {
     name, // same as name: name
     age,  // same as age: age
     // ...
   };
 }
```
속성의 존재 여부를 체크할 때 쓰이는 in operator

다른 언어들과 달리, 자바스크립트 객체의 눈에 띄는 특징 중 하나는, 어떤 속성이든 접근가능하다는 점이다. 심지어 존재하지 않는 속성도 에러를 뱉지 않는다.

존재하지 않는 속성은 그저 undefined 를 리턴할 뿐이고, 그래서 우리는 그걸로 속성이 존재하는지 아닌지 쉽게 테스트할 수 있다.
```
 let user = {};
    
 alert( user.noSuchProperty === undefined ); // true means "no such property"
```
그리고 또한 in 이라는 특별한 오퍼레이터도 있다.
```
 "key" in object
    
 let user = { name: "John", age: 30 };
    
 alert( "age" in user ); // true, user.age exists
 alert( "blabla" in user ); // false, user.blabla doesn't exist
```
속성이름은 in 오퍼레이터로부터 꼭 왼쪽 방향에 위치해야할 것임을 기억해라. 그리고 그것은 보통 따옴표로 나타낸다. 만약 우리가 변수가 선언이 된 채로 따옴표를 생략한다면, 실제로 선언된 변수값으로 테스트가 될 것이다. 아래처럼 말이다
```
 let user = { age: 30 };
    
 let key = "age";
 alert( key in user ); // true, property "age" exists
```
왜 in 오퍼레이터가 존재하는걸까? undefined 으로 속성의 존재여부를 판단하는걸로 충분하지 않나?

사실상 대부분 undefined 를 통한 비교는 잘 돌아가긴 한다. 하지만 그런 비교가 안통하는 몇몇 특수한 경우가 있다. 그럴 때 in 오퍼레이터가 통한다.

객체의 속성이 존재는 하되, undefined 란 값이 담겨져있을 때 그러하당
```
 let obj = {
   test: undefined
 };
    
 alert( obj.test ); // it's undefined, so - no such property?
    
 alert( "test" in obj ); // true, the property does exist!
```
상기 코드에서, obj.test는 기술적으로 존재하고, in 오퍼레이터는 잘 동작한다. 위와 같은 상황이 흔하진 않다. 왜냐면 undefined를 보통 명시적으로 선언하지 않는다. 우린 거의 알수없거나 빈값일 때는 null값을 선언한다. 때문에 상기 코드는 in 오퍼레이터를 적용해서 확인할 수 있는 특이케이스라 볼 수 있다

[javascript] 12-02 javascript study

2021-12-02T14:53:00+00:00

12-02 (목)

part 2 - Function

함수를 선언할 때의 방법은 2가지가 있음
1. 함수 선언식
2. 함수 표현식
→ 함수 표현식의 특징은 먼저 호이스팅 되지 않는다는 점이 있음 (상단에 작성하지 않고 호출된 아래 작성하면 에러가 남)

→ 이어서 특징은 클로져를 이용해 기능을 만들 수 있음, 전달인자로 응용가능함
함수의 매개변수 자리의 기본값 설정 가능

만약 기본값을 설정하지않았다면 undefined 가 뜰 것!

매개변수의 갯수를 딱히 설정하지 않아도 배열로 처리해서 계산할 수 있게끔 하는 방법
```
 /* 1. arguments로 처리방법 */
    
 function test(){
 	console.log('매개변수 갯수', arguments.length);
 	console.log('매개변수 형태', arguments);
 }
    
 test(1, 3); 
 // '매개변수 갯수', 2
 // '매개변수 형태', Argument (2) [1, 3]
```
```
 /* 2. 나머지 매개변수로 처리방법 */
    
 function myFun(a, b, ...manyMoreArgs) {
   console.log("a", a);
   console.log("b", b);
   console.log("manyMoreArgs", manyMoreArgs);
 }
    
 myFun("one", "two", "three", "four", "five", "six");
    
 // 콘솔 출력:
 // a, one
 // b, two
 // manyMoreArgs, [three, four, five, six]
```
💡 나머지 매개변수와 arguments 객체의 차이 1. `arguments` 객체는 **실제 배열이 아닙니다**. 그러나 나머지 매개변수는 `[Array](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)` 인스턴스이므로 `[sort](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)`, `[map](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map)`, `[forEach](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)`, `[pop](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)` 등의 메서드를 직접 적용할 수 있습니다. 2. `arguments` 객체는 `callee` 속성과 같은 추가 기능을 포함합니다. 3. `...restParam`은 후속 매개변수만 배열에 포함하므로 `...restParam` **이전**에 직접 정의한 매개변수는 포함하지 않습니다. 그러나 `arguments` 객체는, `...restParam`의 각 항목까지 더해 모든 매개변수를 포함합니다.

(출처) 함수 선언은 아주 쉽게 (때로는 무심코) 함수 표현식으로 바꿀 수 있습니다. 다음 두 가지 중 하나라도 만족할 경우 함수 선언이 아니라 함수 표현식이 됩니다.

표현식의 일부가 될 때
함수나 스크립트의 ‘본 요소’가 아닌 경우. ‘본 요소’는 함수나 스크립트 본문의, 중첩되지 않은 명령문을 의미합니다.

예시코드

  // 함수 선언
  function foo() {}
        
  // 함수 표현식
  (function bar() {})
        
  // 함수 표현식
  x = function hello() {}
        
  if (x) {
     // 함수 표현식
     function world() {}
  }
        
  // 함수 선언
  function a() {
     // 함수 선언
     function b() {}
     if (0) {
        // 함수 표현식
        function c() {}
     }
  }

Part 2 - Array

인덱스 위치에 있는 항목 제거하기

 let testArr = ['사과', '바나나', '레몬', '샤인머스캣'];
 let removeItems = testArr.splice(1, 1); // 2번째거, 한개 제거할 때
    
 console.log(removeItems); // ['바나나']
    
 let removeItems2 = testArr.splice(0); // 1번째거부터 끝까지 제거할 때
    
 console.log(testArr); // []

인덱스 위치에서부터 여러개의 항목 제거하기

 let testArr = ['호랑이', '토끼', '고양이', '강아지']
 let removeItems = testArr.splice(2, 2); // 3번째거부터 2개 제거
    
 console.log(testArr); // ['호랑이', '토끼']
 console.log(removeItems); // ['고양이', '강아지']

배열 복사하기

 let copyArr = testArr.slice() // 사본을 만드는 방법
 // ["호랑이", "토끼"]

[javascript] exercise 4. 함수 예제 풀이

2021-11-26T08:53:00+00:00