문자열이 주어진 길이에 도달할 때까지 원하는 문자열로 채움

console.log(str1.padStart(2, '0'));
// Expected output: "05"

const fullNumber = '2034399002125581';
const last4Digits = fullNumber.slice(-4);
const maskedNumber = last4Digits.padStart(fullNumber.length, '*');

console.log(maskedNumber);
// Expected output: "************5581"

padEnd

문자열을 원하는 문자열로 채워서 원하는 길이에 도달하도록 함

const str1 = 'Breaded Mushrooms';

console.log(str1.padEnd(25, '.'));
// Expected output: "Breaded Mushrooms........"

const str2 = '200';

console.log(str2.padEnd(5));
// Expected output: "200  "

Math.trunc() 정적 메서드는 숫자의 소수 부분을 제거한 숫자의 정수 부분을 반환합니다.

console.log(Math.trunc(13.37));
// Expected output: 13

console.log(Math.trunc(42.84));
// Expected output: 42

console.log(Math.trunc(0.123));
// Expected output: 0

console.log(Math.trunc(-0.123));
// Expected output: -0

이번 프로젝트에서 MVP 기간 동안 제가 맡은 역할은 간략하게 다음과 같습니다.

• 실시간 채팅 기능

해당 기능을 구현하기위해서는 Websocket에 대한 이해가 필요했고, Spring Boot와의 협업을 위해 StompJS 사용이 필수였습니다.

먼저 실시간 프로젝트를 진행할 때에 라이브러리를 사용하자는 의견도 있었지만, 밑바닥부터 하나씩 구현을 해보아야 Websocket에 대한 이해가 생길 것이라 판단하여 라이브러리는 최대한 쓰지 않기로 하였습니다.

가장 많이 참고한 사이트입니다.

위 사이트를 천천히 읽어보면 StompJS 어떻게 사용해야하며, 백엔드와 협업 시 어떻게 데이터를 송신해야하는지 알 수 있습니다.

이렇게 MVP 발표를 마치었고, 그에 대한 피드백은 다음과 같았습니다.

1. 개발을 하면서 테스트를 할 수 있는 환경이 모바일 환경이 되면 개발 속도에 긍정적인 영향을 줄 수 있을 것 같습니다.

2. useSelector의 비동기 처리를 setTimeout을 적용하는 것은 구현이 잘 못되어있다 라는 생각이 듭니다. 딜레이를 준다는 것은 뷰를 나타내는 것이 부자연스럽습니다. 이걸 개선할 수 있는 다른 방법을 찾는데 시간을 줄일 수 있는 방법을 생각해야 할 것 같습니다.

3. 현재 전략보다 더 빠르거나 더 정확하게 해결 할 수 있는 방법을 찾았으면 좋겠습니다. 질문방이나 기술 멘토님을 좀 더 활용했으면 좋겠습니다.

전반적으로 느꼈을 때 혼자서 문제를 해결하기 위해서 고민했던 것 같습니다. 팀원 분들 중에서 본인 스스로 해결 하는게 실력이 느는거 아닐까?라는 생각을 가지고 계신 것 같지만, 시간이 짧으니 지금보다 조금 더 주변의 전문성이 있는 분들, 아니면 비슷한 고민을 가진 분들과 이야기를 더 많이 해서 도움을 받는 게 좋은 것 같습니다. 혼자서 모든 문제를 해결하려고 하지 않았으면 좋겠습니다. 해결방법이 불편하거나 이게 맞나? 싶은 게 있으면 기술 멘토님께 질문을 가지는 시간을 가졌으면 좋겠습니다. 그러면 개발 속도가 좀 더 빨라질 것 같습니다.

이렇게 멘토링을 받았습니다.

1번 멘토링

• 저희 프로젝트 Bungle이 모바일 웹앱 버전을 타겟하였기 때문에, 모바일 환경 테스트가 매우 중요한 부분입니다. 현재는 자체 localhost:3000을 모바일로 접속하여 뷰적인 부분이나 브라우저에 따른 호환성 테스트를 해보고 있습니다. 추가적으로 mTworks라는 툴을 찾았는데, 금액이 너무 비싸 적용이 어려울 것으로 판단했습니다. 추후에 https 환경을 구축하게되면, firebase 배포를 통해 하나씩 테스트를 해볼 생각입니다.

2번 멘토링

• 현재 slice 파일에서 useSelector()로 데이터를 받아와 처리를 하고있는 부분이 있는데, useSelector()함수가 비동기처리가 되다보니, 데이터를 못받아오는 경우가 있어서 useEffect() 내부적으로 setTimeout()을 사용하여 억지 동기처리를 주었습니다.

• 이 부분은 저희도 체감하고 있는 부분인데, 좀 더 다른 분들과 멘토님들에게 자문을 구하여 대체방안을 강구하고있는 부분입니다.

3번 멘토링

• 3번 멘토링 내용은 2번 멘토링의 연장선으로 생각했습니다. 멘토님들이 보았을 때에 저희 프론트 팀원들이 자체적으로 방법을 강구하려고 했던 부분을 눈치채신 것 같습니다. 저희는 그게 맞다고 생각했고, 이게 저희의 공부방식이자 작업방식이라 생각했지만, 멘토링을 받고나니, 시간적 제약이 있다보니 멘토님들의 멘토링을 받아들여 진행해야겠다고 생각했습니다.

MVP 발표 후 느낀 점

프로젝트 시작하고 3주동안 최선을 다했기 때문에 후회는 없습니다. 앞으로 3주동안 추가적인 기능과 뷰들을 작업하게 될텐데 3주 뒤에도 오늘같이 후회가 없다고 쓸 수 있으면 좋겠습니다.

추후 개발 기능

• GPS - Kakao map API 활용한 지도 페이지
• 문자 채팅 추가적인 예외처리 사항과 디테일 기능들
• 전체적인 CSS 수정
• QR코드
• 화상 채팅 기능
• 소셜 로그인

<프로그래머스 문제를 기반으로 합니다>

문제 설명

• 문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요.
• s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다.

그저 내림차순으로 정렬이다 그럼 문자열s를 배열로 바꿔준 후, sort().reverse() 하면?? 내림차순 아닌가🤔

제한 사항

• str은 길이 1 이상인 문자열입니다.

입출력 예

s            return
"Zbcdefg"    "gfedcbZ"

이게 문제 보고 나서 ASCII CODE 생각이 났다 여기서 보면 대문자가 소문자보다 아스키 코드값이 작은걸 알 수 있다.

그래서 배열에서 오름차순으로 정렬하면 대문자가 소문자보다 먼저 출력된다 （￣︶￣）↗　

그럼 문제를 풀어보자 😃

1. 입력받은 문자열을 split함수로 쪼개준 후

2. sort 로 오름차순 정렬해준 후

3. reverse 로 역으로 순서를 바꾼 후

4. 출력값이 문자열이어야 하므로 배열을 문자열로 리턴해주는 join을 사용하자

<풀이 완성 코드>

function solution(s) {
    let str = s.split('').sort().reverse().join('');

    return str
}

자바스크립트 버전을 보면 뒤에 붙은 ES가 뭘까... 하는 생각을 하게 되었다🤔

그래서 공부했다 !!! (╯°□°）╯︵ ┻━┻ 가보자 자바스크립트와 ES!! ☝

ECMA Script가 생겨난 배경📖

자바스크립트가 1990년대 Netscape사의 Brendan Eich에 의해 개발되었다

그런데 이 자바스크립트가 완전 흥행해버렸네???

이걸 본 MS가 Jscript라는 언어를 만들어 IE에 탑재해버린다 ㅋㅋㅋㅋㅋㅋ

그런데 개발자 입장에서 두 언어가 너무 달라 힘들었고, 두 회사는 이에 대한 표준을 만들어야겠다!!! 라고 생각했다고 한다 🤦‍♂️

그래서 이 표준을 위해 자바스크립트를 ECMA(European Computer Manufactures Association)라는 정보와 통신시스템의 비영리 표준 기구에 제출했단다

그 후 표준에 대한 작업을 ECMA-262라는 이름으로 96년 11월 시작해서 97년 6월에 채택되게 된다.

ECMA가 다루는 표준(출처 : 위키)

Javascript // ECMA Script ??🤔

전자는 언어 // 후자는 규격 표준 즉, 스펙을 뜻한다

ES3(1999)

우리가 흔히 말하는 자바스크립트

• 함수 단위의 스코프, 호이스팅, 모듈화 미지원, 프로토타입, 클로저 등등
• 대부분의 브라우저에서 지원
• IE8까지 크로스브라우징하는 환경이면 ES3를 쓰고 있다고 생각하면 됨

ES5(2009)

• 4버전은 급변하는 내용을 담고 있었는지 거절됨
• 점진적 개선을 위해 ES5가 나옴
• 기본적으로 IE9부터 본격적 지원하지만 ES5-shim을 사용하면 하위 버전에서 도 특정 기능들을 지원

<추가된 내용>

• 배열과 관련한 새로운 메서드들이 생김

• forEach, map, filter, reduce, some, every ===> 개발자가 반복 횟수나 조건을 잘못 입력하는 등의 실수를 줄여줌

• object에 대한 getter / setter 지원

• 자바스크립트 strict 모드 지원(더욱 세심한 문법 검사 지원)

• JSON 지원(과거엔 XML 사용 => JSON이 부상하자 지원)

• bind() 메서드 생김(this를 강제로 bind 시켜주는 메서드)

ES 2015(ES6)

• 원래 이름이 ES6였는데, 끝자리인 6과 2016을 연관짓는 습성때문에 2016년에 나온것으로 착각해서인지 ES2015로 바꾼 듯함

<추가된 내용>

• let, const 키워드 추가 기존의 변수는 함수 스코프를 가진 var 키워드를 이용하여 선언 때문에 블록 스코프를 가진 let / const 키워드를 추가 기존에 상수형 키워드가 없어 CONST_TEST와 같이 대문자로 상수를 표시하다 ES6부터 const 키워드로 값의 변경을 통제

• arrow 문법 지원 익숙해지면 편하고 간결해진 코드를 작성할 수 있다. this를 바인딩 하지 않는다(this는 해당 scope의 this와 같다)

여기서 this를 바인딩 하지 않는다?? 무슨 뜻이야🤨

• literator / generator 추가
• module import / export 추가
• Promise 도입(Callback Hell을 해결해 줄 기법 추가)
• Default, Rest 파라미터
• 해체 할당, Spread 연산자
• 템플릿 리터럴
• 호이스팅이 사라진 것 같은 효과
• 함수 단위 스코프에서 블록 단위 스코프로 변경

ES6 화살표 함수

이렇게 쓸 수 있게 되었다!

var plus = function example (a,b) { return a+b; }

let plus = (a,b) => {return a+b}

회고🙄

이번주는

• 알고리즘 문제들을 하나씩 풀어보며 Javascript 문법들을 공부하고,
• 중간에 쿠키 / 캐시 / 세션에 대해 공부해서 발표도 해보고(항해톡),
• Javascript의 언어로서의 특성들과 작동 방식 및 역사도 공부해보았다

이번 한 주도 열심히 달려왔던 것 같다.

돌아올 내일부터도 또 열심히 달려보자🏃‍♂️🏃‍♂️🏃‍♂️

이번주 배운 내용들

• Javascript 기초 문법(알고리즘 문제)
• 쿠키 / 캐시 / 세션
• Javascript - 자료형 / 특성
• Javascript - 객체 / 불변성
• Javascript - 호이스팅 / TDZ
• React 기초 맛보기

1. 콘솔에 찍힐 b 값을 예상해보고,

2. 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요.

3. 주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.

let b = 1;

function hi () {

    const a = 1;

    let b = 100;

    b++;

    console.log(a,b);

}

//console.log(a);

console.log(b);

hi();

console.log(b);

<답변>

1. 콘솔에 찍힐 b 값을 예상해보고,

2. 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요.

• 첫번째 console.log(b)의 값은 1로 예상한다 왜냐하면 전역 변수로 지정되어있는 첫째줄 let b = 1 때문이다. function hi()안의 let b = 100은 함수 내에 지역 변수로 설정되어있기 때문에 함수 밖에는 영향을 끼치지 못한다.
• 두번째 console.log(b)의 값 또한 1로 예상한다. 이유는 첫뻔째와 같다.

3. 주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.

let b = 1;

function hi() {
  const a = 1;

  let b = 100;

  b++;

  console.log(a, b);
}

console.log(a);

console.log(b);

hi();

console.log(b);

//ReferenceError: a is not defined

• console.log(a)의 주석을 풀었더니 ReferenceError: a is not defined가 출력됐다.

• a가 선언된 지점은 hi()함수 내에 지역변수로 설정이 되어있는데, global context에서 a를 호출하였고, 여기서 const변수의 호이스팅이 일어나게된다.

• const변수의 호이스팅은 선언 && 초기화 && 할당이 동시에 이루어져야 하는데, 여기서는 선언만 되어있고 초기화 및 값이 할당되어있지 않기 때문에 Reference Error가 출력되는 것이다.

let b = 1;

function hi() {
  const a = 1;

  let b = 100;

  b++;

  console.log(a, b);
  console.log(a);        // 전역 변수 a 호출
}

console.log(b);

hi();

console.log(b);

이렇게 a를 호출하는 부분을 hi()안에 넣어주면 된다 😃

• 자바스크립트는 코트의 영역을 스코프로 나누어 관리한다.

• 스코프는 단방향으로 연결되는 체인을 형성하며, 이 스코프 체인을 통해 상위 스코프로 이동하면서 식별자를 검색한다.

• 클로저와 밀접한 관계를 갖기 때문에 꼭 알아두어야하는 개념

스코프(Scope)💘

식별자의 유효 범위

모든 식별자는 자신이 선언된 위치에 의하여 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다.

네임스페이스

한 스코프 내에서는 식별자가 유일해야 하지만, 다른 스코프에는 동명의 식별자를 사용할 수 있음.

식별자 결정(identifier resolution)

자바스크립트 엔진은 스코프를 통해서 어떤 변수를 참조할 것인지 결정함.

스코프의 종류

1. 전역 스코프(global scope)

전역은 코드의 가장 바깥 영역으로, 여기서 선언된 변수는 전역 변수가 됨.

전역 변수는 어디서든 참조 가능

2. 지역 스코프(local scope)

지역은 함수 코드의 내부 영역으로, 여기서 선언된 변수는 지역 변수가 됨.

지역 변수는 자신의 지역 스코프 및 하위 지역 스코프에서 참조 가능

3. 함수 레벨 스코프 VS 블록 레벨 스코프

지역 스코프는 함수에 의해서 생성되는가, 코드 블록에 의해서 생성되는가에 따라 레벨이 나뉨.

블록 레벨 스코프

• if, for, while, try/catch 등 코드 블록이 지역 스코프 생성

• let, const 키워드로 선언된 변수는 모든 코드 블록을 지역 스코프로 인정함.

함수 레벨 스코프

• 함수가 지역 스코프 생성

• var 키워드로 선언된 변수는 오직 '함수'만을 지역 스코프로 인정함.

4. 렉시컬 스코프 ( 정적 스코프 / lexical scope )

• 자바스크립트에서는 함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정됨.

• 즉, 함수를 어디서 호출했는지가 아니라 '어디에 정의했는지'에 따라서 상위 스코프가 결정됨.

• 함수의 상위 스코프는 함수 정의가 실행될 때 정적으로 결정되며, 함수 정의가 실행되어 생성된 함수 객체는 상위 스코프를 기억함. ⇒ 클로저와 깊은 연관

• 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다.
• 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다

스코프 체인(Scope Chain)

스코프는 함수의 중첩에 의해 계층적 구조를 가진다.

• 외부 함수(outer function)
• 중첩 함수(nested function)

변수를 참조할 때, 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프 =>>> 상위 스코프로 이동 선언된 변수를 검색한다.

변수 은닉화(variable shadowing)💨💨

• 여러 스코프에서 동일한 식별자를 선언한 경우, 무조건 스코프 체인 상에서 가장 먼저 검색된 식별자에만 접근 가능

스코프 체인은 outerEnvironmentReference와 밀접한 관계를 가짐.

TDZ( Temporal Dead Zone)🍟

일시적으로 죽은 공간이라는 뜻

무슨 의미일까?? 🤔

• 스코프의 시작 지점부터 초기화 시작 지점까지의 구간

let a = 1;
{
  console.log(foo);
  let a = 2;
}

간단히 여기서 중괄호 안의 구역을 TDZ라고 한다

• var은 TDZ의 영향을 안받는다
• let, const는 TDZ의 영향을 받고 이 떄문에 Reference Error가 출력되는 것이다.

호이스팅🌮

• 호이스팅은 코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니다.

• 호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.

• 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정( 실행 컨텍스트를 위한 과정 )을 거친다.

• 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다.

• 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경을 의미하고 실행되기전 이러한 실행 컨텍스트 과정(코드를 구분하는 과정)을 거친다.

변수 호이스팅 (var, let, const 키워드)🍿

• 자바스크립트의 모든 선언에는 호이스팅이 일어난다.

• 하지만 let, const, class를 이용한 선언문을 호이스팅이 발생하지 않는 것처럼 동작한다.

이런 이유가 무엇일까??🤔

이는 var, let, const의 호이스팅 단계가 다르기 때문이다（￣︶￣）↗　

1단계: 선언 단계(Declaration phase)📕

• 변수를 실행 컨텍스트의 변수 객체에 등록한다.
• 이 변수 객체는 스코프가 참조하는 대상이 된다.

  2단계: 초기화 단계(Initialization phase)📗

• 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다.
• 이 단계에서 변수는 undefined로 초기화 된다.

  3단계: 할당 단계(Assignment phase)📘

• undefined로 초기화된 변수에 실제 값을 할당한다.

var의 호이스팅 단계📕📗 => 📘

1. 선언 && 초기화
2. 할당

let의 호이스팅 단계📕 => 📗 => 📘

1. 선언
2. 초기화
3. 할당

const의 호이스팅 단계📕📗📘

1. 선언 && 초기화 && 할당

무슨 의미인지 아래 코드를 보고 이해해보자!!

var a = 1;
{
  console.log(a);
  var a = 2;
}

// 1출력

var는 호이스팅 시 선언 && 초기화가 동시에 발생하여 출력 이후 지정된 변수는 undefined로 초기화 되고 전역변수로 선언된 1이 출력된다

let a = 1;
{
  console.log(a);
  let a = 2;            //TDZ에 갇힘
}

// Reference Error(참조 에러)

let은 호이스팅 시 선언이 이루어진 후, 할당라인에서 초기화 => 할당으로 진행되기 때문에 선언은 됐지만 참조가 되지 않아 Referenc Error가 출력된다

const a = 1;
{
  console.log(a);
  const a = 2;        //TDZ에 갇힘
}

// Reference Error(참조 에러)

const는 호이스팅 시 선언 && 초기화 && 할당이 동시에 이루어져야 하는데 선언만 호이스팅되어 Reference Erorr가 출력된다.

또한 const는 재할당이 되지 않는다

함수 표현식과 함수 선언문의 호이스팅🥚

자바스크립트에서 함수를 선언하는 방법은 2가지가 있다.

• 함수 표현식

  var add = function (x, y) {
    return x + y;
  }

• 함수 선언문

  function add(x, y) {
    return x + y;
  }

그런데 자바스크립트 Guru로 알려진 더글러스 크락포드는 함수 생성에 있어서 함수 표현식만을 사용할 것을 권하고 있단다!!（￣︶￣）↗

그 이유가 뭘까?? 🤔

• 그 이유는 함수 표현식과 함수 선언문의 호이스팅 차이 때문이라고 한다!!

함수 선언문의 호이스팅

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

function add(x, y) {
    return x + y;
}

console.log(add(3, 4));    // 7 출력

보다시피 함수가 선언되기 전에 함수를 호출해도 Error가 출력되지 않는다.

즉, 함수가 자신이 위치한 코드에 상관없이 함수 선언문 형태로 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작한다는 것을 확인할 수 있다.

함수 표현식의 호이스팅

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

// 함수 표현식 형태로 add() 함수 정의
var add = function (x, y) {
    return x + y;
}

console.log(add(3, 4));  // 7

함수 표현식으로 함수를 나타내면, 함수가 선언되기 전에 호출하게되면 Error가 발생한다.

즉 더글러스는 함수 선언문으로 코드 작성 시 함수 선언문이 코드의 구조를 엉성하게 만들 수 있다는 점을 지적해 함수 표현식만을 사용하기를 권장한다

실행 컨텍스트🍞

• 자바스크립트 엔진이 코드를 실행하기 위해선 코드에 대한 정보들이 필요하다.

• 코드에 선언된 변수와 함수, 스코프, this, arguments 등을 묶어, 코드가 실행되는 위치를 설명한다는 뜻의 Execution Context라고 부릅니다.

• 자바스크립트 엔진은 Execution Context를 객체로 관리하며 코드를 Execution Context 내에서 실행합니다.

Execution Context의 종류

1. Global Execution Context

• 코드를 실행하며 단 한 개만 정의되는 전역 Context입니다.
• global object를 생성하며 this 값에 global object를 참조합니다.
• 전역 실행 컨텍스트는 Call Stack에 가장 먼저 추가되며 앱이 종료 될 때 삭제된다.

2. Functional Execution Context

• 함수가 실행 될 때 마다 정의되는 Context입니다.
• 전역 실행 컨텍스트가 단 한 번만 정의되는 것과 달리, 함수 실행 컨텍스트는 매 실행시마다 정의되며 함수 실행이 종료(return)되면 Call Stack에서 제거된다.

3. Eval Context❌

• eval 함수로 실행한 코드의 Context이다.
• 보안상 취약한 점이 있어 비권장 함수이다.

Execution Context의 관리: CallStack 👮‍♂️

• JS 엔진은 생성된 Context를 관리하는 목적의 Call Stack(호출스택)을 갖고 있다

• JS는 단일 스레드 형식이기 때문에 런타임에 단 하나의 Call Stack이 존재한다

• JS 엔진은 전역 범위의 코드를 실행하며 Global Execution Context를 생성해 stack에 push한다.

• 함수가 실행 또는 종료 될 때마다 Global Execution Context의 위로 Functional Execution Context stack을 push(추가), pop(제거)한다.

아래 gif 파일이 이해에 도움이 될 것 이다 （￣︶￣）↗　

공부하면서 느낀 점😃

이론적인 배경이 거의 없는 상태에서 코딩을 하다 보면 머릿속으로 생각한 것 처럼 코드를 짜도 출력이 안되거나 오류가 발생하는 경우가 허다했다

그런 부분들을 조금이나마 이해하게되었고, 앞으로 코드 리뷰나 코드 해석을 할 때에 보다 구체적으로 실행 알고리즘이나 오류 발생 원인을 파악할 수 있을 것 같다.

역시 새로운 것을 배우는 건 항상 새롭고 재미있다（￣︶￣）↗　

데이터의 두 가지 타입🤞

• 원시 자료형(primitive type)과 참조 자료형(reference type)이 있다.
• 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담긴다.
• 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다.

👩‍🎓기본형 데이터 (Primitive data type) = 원시타입

• 객체가 아니면서 method를 가지지 않는 6가지의 타입이 있다.
• 원시 자료형은 모두 “하나”의 정보, 즉, 데이터를 담고 있다.
• string, number, bigint, boolean, undefined, symbol, (null은 원시 타입과 거의 같게 사용되지만 엄밀히 따지면 객체이다. 빈 참조를 나타내는 데 자주 사용된다.)
• number : 3.141592
• string : ‘zerovodka’
• boolean : true & false
• undefined : 변수가 정의되지 않았거나 값이 없다.
• null : 의도적으로 비어있음을 표현하기 위해 null 이라는 것이 들어있다.
• symbol

🤵참조형 데이터 (Reference data type) = 참조타입

• 자바스크립트에선 원시 자료형이 아닌 모든 것은 참조 자료형이다.
• 참조형은 원시형 데이터의 집합이다.
• 배열([])과 객체({}), 함수(function(){})가 대표적이다.
• 참조 자료형은 기존에 고정된 크기의 보관함이 아니다.
• 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장한다.
• 동적으로 크기가 변하는 데이터를 보관하기위해 변수가 아닌 다른곳에 데이터를 저장하고 변수에는 그 주소만 할당한다.
• 배열 – Array : [0,1,2,3,4]
• 객체 – Object {name : “zerovodka”, age : 28}
• 정규표현식(RegExp)
• *<ES6에서 추가된 것들>**
• Map
• Set
• WeakMap
• WeakSet

즉, 변수에는 하나의 값 혹은 주소만 저장할 수 있다.

두 타입의 가장 대표적인 차이로는 기본형에는 바로 값을 그대로 할당한다는 것이고 참조형에는 값이 저장된 주소값을 할당(참조)한다는 것이다.（￣︶￣）↗　

불변성??🤔

아니 자바스크립트에서 데이터의 불변성이라는게 있다는데 그게 뭘까???

불변성을 이해하려면 자바스크립트에서 데이터를 저장하는 방식을 알아야 한다고 한다

그럼 알아볼까요?!☝

기본형 데이터 변수를 선언합니다🙂

let a = 'abc'

a라는 변수를 선언하고 abc라는 데이터 값을 할당했다.

그럼 자바스크립트 엔진은 메모리에 a라는 식별자를 가진 빈 공간을 만들고 주소를 할당한다. 그리고 할당한 주소에 'abc'라는 값을 저장한다

*즉, a라는 식별자를 가진 메모리 공간에 'abc'라는 데이터 값이 아닌 데이터 값의 메모리 주소값을 할당한다는 것이다 （￣︶￣）↗　*

그럼 변수의 값을 변경해볼까요?😀

let a = 'abc'
a = 'bbb'

선언해 둔 a 라는 변수에 'bbb'를 할당했다.

그럼 메모리에서 'bbb'라는 데이터를 찾고 없으면, 공간을 하나 더 만들어 'bbb'를 저장한다

그리고 그 주소를 a에 저장한다.

즉, a의 값을 변경했더라도 그 값을 변경한게 아니라 데이터 주소 값이 변경된 것이다 （￣︶￣）↗　

이처럼 한 번 만든 값을 변경할 수 없는 것이 불변성이다~!!🙂

하지만 가변성이 있는 데이터가 있다!!

위에 설명했던 두 타입 중에

• 기본형 타입 => 불변성을 띠는 데이터
• 참조형 타입 => 가변성을 띠는 데이터

참조형 데이터 변수를 선업합니다🙂

let obj ={
        a = 1,
          b = 'abc'
}

메모리에 obj라는 식별자를 가진 빈 공간을 마련하고, 주소를 할당한다.

그리고 그 주소에 여러개의 프로퍼티로 이루어진 데이터 그룹을 저장하기 위해 별도의 공간을 마련하고 그 영역의 주소를 저장한다

프로퍼티의 값을 변경해볼까요?😀

let obj ={
        a = 1,
          b = 'abc'
}

obj.a = 2

obj의 a 프로퍼티에 2를 할당하면 obj가 바라보고 있는 주소 b3030이 변경되는게 아닌 기존의 내부값만 바뀐다 （￣︶￣）↗　

바로 이 부분 때문에 참조형 데이터는 가변값이라고 하는 것이다.

💥참고로, 참조형 데이터 자체를 변경할 경우는 불변값이고 그 내부의 프로퍼티를 변경할 때만 가변성이 성립된다.

불변 객체를 만드는 방법

자바스크립트에서 불변 객체를 만드는 방법은 2가지가 있다 （￣︶￣）↗

• const

• Object.freeze()

Const

• ES6 버전부터 let과 const를 지원하게 되었다

• const 키워드는 변수를 상수로 선언할 수 있다, 일반적으로 상수로 선언된 변수는 값을 바꾸지 못하는 것으로 알려져 있다.

그렇다면 상수로 선언한 객체는 불변 객체일까??🤔

const test = {};
test.name = "seowoo";

console.log(test);  // {"seowoo"}

ES6에서의 const는 할당된 값이 상수가 되는 것이 아닌 바인딩된 값이 상수가 되는, 즉 test변수가 상수가 되기 때문에 const 키워드로 선언된 test변수에는 객체 재할당은 불가능하지만 객체의 속성은 변경 가능하다.

==> 때문에 비록 재할당은 불가능하지만 객체의 속성을 변경함으로 인해 변수에 바인딩된 객체의 내용까지 변경이 되기 때문에 불변객체라고 하기는 힘들다.

Object.freeze()

자바스크립트에서 기본적으로 제공하는 메소드인 Object.freeze() 메소드이다. 공식 문서에서는 "객체를 동결하기 위한 메소드" 라고 적혀있다.

let test = {
    name : 'Choi'
}

Object.freeze(test);

test 변수에 key value를 가진 객체를 바인딩 후 Object.freeze(test)를 사용해 바인딩된 변수를 동결 객체로 만들었다. 때문에 test 객체는 객체의 속성을 변경하는 시도는 불가능하다.

test.name = 'Kim';
console.log(test) // {name: 'Choi'}

그러나 Object.freeze()는 동결된 객체를 반환하지만 객체의 재할당은 가능하다.

test = {
    age : 28
};
console.log(test); // {age: 28}

==> 때문에 Object.freeze()도 불변 객체라고 할 수는 없을 것 같다.

그럼 결국 어떻게 불변객체를 만들어??😣

const와 Object.freeze()를 조합하여 만들 수 있다. (const의 재할당불가 + Object.freeze()의 객체속성 변경불가)

const test = {
    'name' : 'jung'
};

Object.freeze(test);

먼저 const키워드로 바인딩 된 변수를 상수화 시킨 다음,

Object.freeze()로 해당 변수를 동결 객체를 만들면

객체의 재할당과 객체의 속성 둘 다 변경불가능한 불변 객체가 된다.

얕은 복사 / 깊은 복사

• 얕은 복사는 객체의 참조값(주소 값)을 복사하고,

• 깊은 복사는 객체의 실제 값을 복사합니다.

🔅먼저 이 설명을 듣기 전에 위의 자바스크립트의 두가지 타입을 다시 보고 오는 것을 추천드립니다🔅

<깊은 복사>

• 기본값(원시값)을 복사할 때 그 값은 또 다른 독립적인 메모리 공간에 할당하기 때문에, 복사를 하고 값을 수정해도 기존 원시값을 저장한 변수에는 영향을 끼치지 않습니다.
• 이처럼 실제 값을 복사하는 것을 깊은 복사라고 합니다.
• 하지만 이것은 자료형을 깊은 복사한 것입니다.

이게 무슨 말인지 아래 코드들을 보면서 이해해나가시면 됩니다.

const a = 'a';
let b = 'b';
b = 'c';

console.log(a); // 'a';
console.log(b); // 'c';

// 기존 값에 영향을 끼치지 않는다.

<얕은 복사>

• 참조값을 복사할 때는 변수가 객체의 참조를 가리키고 있기 때문에 복사된 변수 또한 객체가 저장된 메모리 공간의 참조를 가리키고 있습니다.
• 그래서 복사를 하고 객체를 수정하면 두 변수는 똑같은 참조를 가리키고 있기 때문에 기존 객체를 저장한 변수에 영향을 끼칩니다.
• 이처럼 객체의 참조값(주소값)을 복사하는 것을 얕은 복사라고 합니다.

const a = {
    one: 1,
    two: 2,
};

let b = a;

b.one = 3;

console.log(a); // { one: 3, two: 2 } 출력
console.log(b); // { one: 3, two: 2 } 출력

// 기존 값에 영향을 끼친다.

깊은 복사가 뭔지는 알겠는데 얕은 복사를 해버리면 원본 객체가 수정이 되니 당황스러울 수 있을 것 같은데, 보통 복사를 하는 이유는 원본을 수정하는 것 보다는 사본을 떠서 작업을 하고 싶어 한다고 생각한다.

그럼 각각의 복사들을 하는 방법을 알고 있으면 좋을 것 같았다.

각각의 복사를 할 수 있는 방법들에 대해 알아보자（￣︶￣）↗　

<얕은 복사(Shallow Copy) 방법>

• 얕은 복사란 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말합니다.
• 객체 안에 객체가 있을 경우 한 개의 객체라도 기존 변수의 객체를 참조하고 있다면 이를 얕은 복사라고 합니다.

Array.prototype.slice()

• 얕은 복사 방법의 대표적인 예입니다.😃
• start부터 end 인덱스까지 기존 배열에서 추출하여 새로운 배열을 리턴하는 메소드 입니다.
• 만약 start와 end를 설정하지 않는다면, 기존 배열을 전체 얕은 복사합니다.

const original = ['a',2,true,4,"hi"];
const copy = original.slice();

console.log(JSON.stringify(original) === JSON.stringify(copy)); // true

copy.push(10);

console.log(JSON.stringify(original) === JSON.stringify(copy)); // false

console.log(original); // [ 'a', 2, true, 4, 'hi' ]
console.log(copy); // [ 'a', 2, true, 4, 'hi', 10 ]

==> 기존 배열에는 영향을 끼치지 않아서 깊은 복사로 보일 수 있지만, 원시값을 저장한 1차원 배열일 뿐입니다.

• 원시값은 기본적으로 깊은 복사입니다.
• Slice() 메소드는 기본적으로 얕은 복사를 수행합니다.

const original = [
    [1, 1, 1, 1],
    [0, 0, 0, 0],
    [2, 2, 2, 2],
    [3, 3, 3, 3],
];

const copy = original.slice();

console.log(JSON.stringify(original) === JSON.stringify(copy)); // true

// 복사된 배열에만 변경과 추가.
copy[0][0] = 99;
copy[2].push(98);

console.log(JSON.stringify(original) === JSON.stringify(copy)); // true

console.log(original);
// [ [ 99, 1, 1, 1 ], [ 0, 0, 0, 0 ], [ 2, 2, 2, 2, 98 ], [ 3, 3, 3, 3 ] ]출력

console.log(copy);
// [ [ 99, 1, 1, 1 ], [ 0, 0, 0, 0 ], [ 2, 2, 2, 2, 98 ], [ 3, 3, 3, 3 ] ]출력

만약 1차원 배열이 아닌 중첩 구조를 갖는 2차원 배열이면 얕은 복사를 수행하게 됩니다.

const original = [
    {
        a: 1,
        b: 2,
    },
    true,
];

const copy = original.slice();

console.log(JSON.stringify(original) === JSON.stringify(copy)); // true

// 복사된 배열에만 변경.
copy[0].a = 99;
copy[1] = false;

console.log(JSON.stringify(original) === JSON.stringify(copy)); // false

console.log(original);
// [ { a: 99, b: 2 }, true ]

console.log(copy);
// [ { a: 99, b: 2 }, false ]

배열 안에 객체를 수정하고자 할 경우 얕은 복사를 수행하는 것을 볼 수 있습니다. 하지만 원시값은 기본적으로 깊은 복사라 기존 변수에 있는 값과는 다른 값을 도출하는 것을 볼 수 있습니다.

Object.assign()

Object.assign(생성할 객체, 복사할 객체)

메소드의 첫 번째 인자로 빈 객체를 넣어주고 두 번째 인자로 복사할 객체를 넣어주면 됩니다. （￣︶￣）↗　

const object = {
    a: "a",
    number: {
        one: 1,
        two: 2,
    },
};

const copy = Object.assign({}, object);

copy.number.one = 3;

console.log(object === copy); // false
console.log(object.number.one === copy.number.one); // true

복사된 객체 copy 자체는 기존 object와 다른 객체지만 그 안에 들어가 있는 값은 기존 object안의 값과 같은 참조 값을 가리키고 있습니다.

Spread 연산자 (전개 연산자)

const object = {
    a: "a",
    number: {
        one: 1,
        two: 2,
    },
};

const copy = {...object}

copy.number.one = 3;

console.log(object === copy); // false
console.log(object.number.one === copy.number.one); // true

<깊은 복사(Deep Copy) 방법>

깊은 복사된 객체는 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말합니다.

JSON.parse && JSON.stringify

• JSON.stringify()는 객체를 json 문자열로 변환하는데 이 과정에서 원본 객체와의 참조가 모두 끊어집니다.

• 객체를 json 문자열로 변환 후, JSON.parse()를 이용해 다시 원래 객체(자바스크립트 객체)로 만들어줍니다.

• 이 방법이 가장 간단하고 쉽지만 다른 방법에 비해 느리다는 것과 객체가 function일 경우, undefined로 처리한다는 것이 단점입니다.

const object = {
    a: "a",
    number: {
        one: 1,
        two: 2,
    },
    arr: [1, 2, [3, 4]],
};

const copy = JSON.parse(JSON.stringify(object));

copy.number.one = 3;
copy.arr[2].push(5);

console.log(object === copy); // false
console.log(object.number.one === copy.number.one); // false
console.log(object.arr === copy.arr); // false

console.log(object); // { a: 'a', number: { one: 1, two: 2 }, arr: [ 1, 2, [ 3, 4 ] ] }
console.log(copy); // { a: 'a', number: { one: 3, two: 2 }, arr: [ 1, 2, [ 3, 4, 5 ] ] }

재귀 함수를 구현한 복사

• 복잡하다는 것이 단점입니다.

const object = {
    a: "a",
    number: {
        one: 1,
        two: 2,
    },
    arr: [1, 2, [3, 4]],
};

function deepCopy(object) {
    if (object === null || typeof object !== "object") {
        return object;
    }

// 객체인지 배열인지 판단
    const copy = Array.isArray(object) ? [] : {};
    for (let key of Object.keys(object)) {
        copy[key] = deepCopy(object[key]);
    }
    return copy;
}

const copy = deepCopy(object);

copy.number.one = 3;
copy.arr[2].push(5);

console.log(object === copy); // false
console.log(object.number.one === copy.number.one); // false
console.log(object.arr === copy.arr); // false

console.log(object); // { a: 'a', number: { one: 1, two: 2 }, arr: [ 1, 2, [ 3, 4 ] ] }
console.log(copy); // { a: 'a', number: { one: 3, two: 2 }, arr: [ 1, 2, [ 3, 4, 5 ] ] }

Lodash 라이브러리 사용

라이브러리를 사용하면 더 쉽고 안전하게 깊은 복사를 할 수 있습니다. 설치를 해야 한다는 점과 일반적인 개발에는 효율적이겠지만, 코딩 테스트에는 사용할 수 없다는 것이 단점입니다.

const deepCopy = require("lodash.clonedeep")
const object = {
    a: "a",
    number: {
        one: 1,
        two: 2,
    },
    arr: [1, 2, [3, 4]],
};

const copy = deepCopy(object);

copy.number.one = 3;
copy.arr[2].push(5);

console.log(object === copy); // false
console.log(object.number.one === copy.number.one); // false
console.log(object.arr === copy.arr); // false

console.log(object); // { a: 'a', number: { one: 1, two: 2 }, arr: [ 1, 2, [ 3, 4 ] ] }
console.log(copy); // { a: 'a', number: { one: 3, two: 2 }, arr: [ 1, 2, [ 3, 4, 5 ] ] }

공부하면서 느낀 점

단순히 코딩 공부를 위해 Javascript 문법 공부만 했지, 이렇게 이론적으로 공부를 해보니 코딩 해석 부분에서 도움이 많이 될 것 같다.

꾸준히 공부해나가야겠다.😁

(Loosely typed dynamic language)

• 자바스크립트에서 변수를 선언할 때 필요한 예약어는 let, const이다.(var도 있긴한데 지양한다.)

• 하나의 변수에 모든 타입의 데이터를 넣을 수 있다.

형변환🤞

자바스크립트의 형변환은 2가지 이다

1. 암시적변환

• 암시적 변환이란 자바스크립트 엔진이 필요에 따라 자동으로 데이터타입을 변환시키는 것이다.

1) 산술 연산자

더하기(+) 연산자는 숫자보다 문자열이 우선시 되기때문에, 숫자형이 문자형을 만나면 문자형으로 변환하여 연산된다. (문자 > 숫자)

// 더하기(+)
number + number // number
number + string // string
string + string // string
string + boolean // string
number + boolean // number
50 + 50; //100
100 + “점”; //”100점”
“100” + “점”; //”100점”
“10” + false; //”100"
99 + true; //100

다른 연산자(-,*,/,%)는 숫자형이 문자형보다 우선시되기 때문에 더하기와 같은 문자형으로의 변환이 일어나지 않는다. (문자 < 숫자)

//다른 연산자(-,*,/,%)
string * number // number
string * string // number
number * number // number
string * boolean //number
number * boolean //number
“2” * false; //0
2 * true; //2

2) 동치 비교

아래의 예제는 엄격하지 않은 동치(==) 비교이며, 아래의 결과값은 좌우항 변환 할 경우 모두 ‘0 == 0 이기때문에’ true 이다.

null == undefined
“0” == 0
0 == false
“0” == false

여기서 유의해야 할 점은 위의 비교는 엄격하지 않은 동치 비교일 경우이기 때문에, 두 값을 비교할 때 데이터타입을 변환하지 않는 엄격한 동치(===) 비교와 혼동되지 않도록 한다.

2. 명시적변환

• 명시적변환이란 개발자가 의도를 가지고 데이터타입을 변환시키는 것이다.
• 타입을 변경하는 기본적인 방법은 Object(), Number(), String(), Boolean() 와 같은 함수를 이용하는데 new 연산자가 없다면 사용한 함수는 타입을 변환하는 함수로써 사용된다.

let trans = 100; //Number
Object(trans); //100
console.log(typeof trans); //Number
String(trans); //”100"
console.log(typeof trans); //String
Boolean(trans); //true
console.log(typeof trans); //Bolean

1) A Type → Number Type

• 다른 자료형을 숫자타입으로 변형하는 방법은 아래와 같다.

Number()

• Number()는 정수형과 실수형의 숫자로 변환한다.

Number(“12345”); //12345
Number(“2”*2); //4

parseInt()

• parseInt()는 정수형의 숫자로 변환한다.
• 만약 문자열이 숫자 0 으로 시작하면 8진수로 인식하고(구형브라우저 O, 신형브라우저X), 0x, 0X 로 시작한다면 해당 문자열을 16진수 숫자로 인식한다.
• 또한 앞부분 빈 공백을 두고 나오는 문자는 모두 무시되어 NaN을 반환한다.

parseInt(“27”) //27
parseInt(0033); //27
parseInt(0x1b); //27
parseInt(“ 2”); //2
parseInt(“ 2ㅎ”); //2
parseInt(“ ㅎ2”); //NaN

parseFloat()

• parseFloat()는 부동 소수점의 숫자로 변환한다.
• parseInt()와는 달리 parseFloat()는 항상 10진수를 사용하며 parseFloat() 또한 앞부분 빈 공백을 두고 나오는 문자는 모두 무시되어 NaN을 반환한다.

parseFloat(“!123”); //NaN
parseFloat(“123.123456”); //123.123456
parseInt(“123.123456”); //123
parseFloat(“ 123.123456”); //123.123456
parseFloat(“ a123.123456”); //NaN

2) A Type → String Type

• 다른 자료형을 문자타입으로 변형하는 방법은 아래와 같다.

String()

String(123); //”123"
String(123.456); //”123.456"

toString()

• toString()는 인자로 기수를 선택할 수 있다. 인자를 전달하지 않으면 10진수로 변환한다.

let trans = 100;
trans.toString(); //”100"
trans.toString(2); //”1100100"
trans.toString(8); //”144"
let boolT = true;
let boolF = false;
boolT.toString(); //”true”
boolF.toString(); //”false”

toFixed()

• toFixed()의 인자를 넣으면 인자값만큼 반올림하여 소수점을 표현하며 소수점을 넘치는 값이 인자로 들어오면 0으로 길이를 맞춘 문자열을 반환한다.

let trans = 123.456789;
let roundOff = 99.987654;
trans.toFixed(); //”123"
trans.toFixed(0); //”123"
trans.toFixed(2); //”123.46"
trans.toFixed(8); //”123.45678900"
roundOff.toFixed(2); //”99.99"
roundOff.toFixed(0); //”100"

3) A Type → Boolean Type

• 다른 자료형을 불린타입으로 변형하는 방법은 아래와 같다.

Boolean()

Boolean(100); //true
Boolean(“1”); //true
Boolean(true); //true
Boolean(Object); //true
Boolean([]); //true
Boolean(0); //false
Boolean(NaN); //false
Boolean(null); //false
Boolean(undefined); //false
Boolean( ); //false

Loosely typed dynamic language의 문제점과 보완점??🤔

암시적 형변환으로 인해 원치 않은 형변환이 발생할 수 있을 것 같다.

그렇기 때문에 명시적 형변환을 통해 원하는 형변환만 진행을 해줄 수 있도록 하고,

엄격하지 않은 동치 비교(==) 보다는 데이터 타입까지 비교하는 엄격한 동치 비교(===)를 지향하면 어느 정도 보완될 것 같다.

undefined vs Null ❌

undefined은 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. 즉, undefined는 자료형이 없는 상태이다. 따라서 typeof를 통해 자료형을 확인해보면 null은 object로, undefined는 undefined가 출력되는 것을 확인할 수 있다.

typeof null // 'object'
typeof undefined // 'undefined'
null === undefined // false
null == undefined // true
null === null // true
null == null // true
!null // true
isNaN(1 + null) // false
isNaN(1 + undefined) // true

여기서 동치 비교( == / === ) 차이를 알 수 있다.（￣︶￣）↗　

<프로그래머스 문제를 기반으로 합니다>

문제 설명

• 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다.
• 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다.
• 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요.

또 나왔다 이상한 생각 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 🤣🤣

제한 조건

• x는 1 이상, 10000 이하인 정수입니다.

입출력 예

arr        return
10        true
12        true
11        false
13        false

입출력 예 #1
10의 모든 자릿수의 합은 1입니다. 10은 1로 나누어 떨어지므로 10은 하샤드 수입니다.

입출력 예 #2
12의 모든 자릿수의 합은 3입니다. 12는 3으로 나누어 떨어지므로 12는 하샤드 수입니다.

입출력 예 #3
11의 모든 자릿수의 합은 2입니다. 11은 2로 나누어 떨어지지 않으므로 11는 하샤드 수가 아닙니다.

입출력 예 #4
13의 모든 자릿수의 합은 4입니다. 13은 4로 나누어 떨어지지 않으므로 13은 하샤드 수가 아닙니다.

입력된 양의 정수 x의 각 자리 숫자들의 합으로 x가 나누어 떨어지면? ==> 하샤드 수

오케이 풀어보자

1. 먼저 입력 받은 양의 정수 x를 split() 함수를 이용해 각 자리수들로 이루어진 배열로 만들고

2. 각 숫자들의 합을 받을 변수 sum을 선언해준다

3. 배열을 for 문을 통해 돌려주고

4. string 값으로 배열에 저장되어있으니 parseInt()해준 후, sum에 하나씩 더해준다

5. 그 후 sum으로 x 값을 나누고

6. 나누어지면 true / 아니면 false 반환

<풀이 완성 코드>

function solution(x) {
    let arr =  (x + '').split('')
    let sum = 0
    for(let i = 0; i < arr.length; i++){
        sum += parseInt(arr[i])
    }
    if(x % sum === 0){
        return true
    }else{
        return false
    }
}

역시 제목은 생소하지만 알고리즘은 생소하지 않은 문제였다 🤔

<프로그래머스 문제를 기반으로 합니다>

문제 설명

• 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다.

  1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다.

• 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다.

• 예를 들어, 입력된 수가 6이라면 6→3→10→5→16→8→4→2→1 이 되어 총 8번 만에 1이 됩니다.
• 위 작업을 몇 번이나 반복해야하는지 반환하는 함수, solution을 완성해 주세요.
• 단, 작업을 500번을 반복해도 1이 되지 않는다면 –1을 반환해 주세요.

이런 생각을 대체 왜 하는건지에 대해 팀원들과 생각을 나눠봤는데, 결론이 나지 않아 그냥 문제를 풀었다 🤦‍♂️

500번 반복해도 1이 안되면 -1 반환하는 것 주의하자 ☝

제한 사항

• 입력된 수, num은 1 이상 8000000 미만인 정수입니다.

입출력 예

n            result
6            8
16            4
626331        -1


입출력 예 #1
문제의 설명과 같습니다.

입출력 예 #2
16 -> 8 -> 4 -> 2 -> 1 이되어 총 4번만에 1이 됩니다.

입출력 예 #3
626331은 500번을 시도해도 1이 되지 못하므로 -1을 리턴해야합니다.

알고리즘 자체는 쉬운 편이다😀

어떻게 풀까??

1. 먼저 짝수 / 홀수를 나누어야 하므로 조건문을 통해 나누어주고

2. 전체 진행 횟수를 담아줄 count 변수를 만들어주면 편할 것 같았다

3. 그리고 조건문을 계속 반복해야 하므로 반복문을 돌리고

4. 반복문의 조건을 500 미만으로 잡으면 500회라는 제한조건을 따를 수 있다. （￣︶￣）↗　

<풀이 완성 코드>

function solution(num) {
    let count = 0
    for(let i = 0; i < 500; i++){
        if(num % 2 === 0 && num !== 1){
            num = num / 2
            count++
        }else if(num % 2 === 1 && num !== 1){
            num = (num * 3) + 1
            count++
        }
    }
    if(count >= 500){
        return -1
    }else{
        return count
    }

}

처음 보는 콜라츠 어쩌구가 나와서 좀 당황했었는데, 앞으로는 그럴 필요 없을 것 같다. 제목이 거창하면 알고리즘이 쉬운 문제가 많은 것 같다 🤔

<프로그래머스 문제를 기반으로 합니다>

문제 설명

• 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요.
• 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요.
• 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다.

제한 조건

• arr은 길이 1 이상인 배열입니다.
• 인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다.

입출력 예

arr            return
[4,3,2,1]    [4,3,2]
[10]        [-1]

1. 문제, 제한조건, 입출력예에서 보면 길이가 1인 배열 arr이 입력되면 빈 배열이 리턴될 것이고 그럴 경우엔 [-1]을 반환해야 한다는 것

2. 내림차순하라는 조건은 없다는 것

유념해서 풀어보자 😁

<배열 인덱스들 중 최대 / 최소 구하는 법>

배열 안의 인덱스 값들 중 최소값 / 최대값을 구하는 방법을 알아보자 최대 / 최소라 하면 바로 생각나는 바로 그것 !! ☜(ﾟヮﾟ☜)

Math.min() / Math.max()

하지만 이 함수들을 배열에 바로 갖다 쓰게되면

let arr = [1, 2, 3]
console.log(Math.min(arr))

//NaN 출력

Not a Number가 출력된다. 왜냐하면 Math.min() / Math.max()는 배열이 아닌 고유한 변수를 기대하고 있는데, 배열을 넣으니 이미 첫번째 조건 입력 변수가 고유한 변수가 아니다에서 알고리즘이 끝나버리는 것이다.

그럼 이 배열을 숫자형식으로 바꿀 순 없을까???🤔

let arr = [1, 2, 3]
console.log(Math.min(...arr))

// 1 출력

Math.min(...arr)
= Math.min(1, 2, 3)

이렇게 표현할 수 있다. 이 구문은 ES6 / ES2016의 destructing 할당 구문이라고 한다 destructing 할당 구문은 배열 또는 개체에서 데이터를 추출하여 별도의 변수로 만들 수 있는 JavaScript 식이다. （￣︶￣）↗　

그럼 문제를 풀어보자 😀

1. 위에서 배운 배열에서 최소값 구하는 방법으로 최소값을 구하고
2. 최소값의 인덱스를 indexOf()를 이용하여 구한 후,
3. splice() 함수를 이용하여 해당 최소값의 인덱스를 제거해주면
4. 답이 뙇👍

<풀이 완성 코드>

function solution(arr) {
    const min = Math.min(...arr)
    arr.splice(arr.indexOf(min), 1)
    return arr.length < 1 ? [-1] : arr
}

<프로그래머스 문제를 기반으로 합니다>

문제 설명

• 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다.
• n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요.

제한 사항

• n은 1이상, 50000000000000 이하인 양의 정수입니다.

입출력 예

n        return
121        144
3        -1


입출력 예#1
121은 양의 정수 11의 제곱이므로, (11+1)를 제곱한 144를 리턴합니다.

입출력 예#2
3은 양의 정수의 제곱이 아니므로, -1을 리턴합니다.

정수인지 아닌지 판별하는 함수 isInteger()를 활용하면 좋을 것 같다. 또한 isInteger()는 Number()객체의 내장함수로 아래와 같이 써야 한다. （￣︶￣）↗　

bool a = Number.isInteger(n)

//n 값이 정수면 true 아니면 false를 리턴하는 함수이다

또한 제곱근 / 제곱을 구하는 Math 객체 내장 함수가 있다.

Math.sqrt(x)
//x의 제곱근을 반환한다

Math.pow(x, f)
//x의 f제곱을 반환한다

Math.sqrt(x) === Math.pow(x, 1/2)

난 Math.pow()를 더 선호하기 때문에 이를 이용하려고 한다 😁

1. 먼저 입력받은 양의정수 n의 제곱근 값이 정수인지 판별해서
2. 정수면 (제곱근 값 + 1)의 거듭제곱 값을 구하고
3. 정수가 아니라면 -1을 리턴하자 (●'◡'●)

<풀이 완성 코드>

function solution(n) {
    return Number.isInteger(Math.pow(n, 1/2)) == true ? Math.pow((Math.pow(n,1/2) + 1), 2) : -1
}

<추가 풀이 완성 코드>

한줄로 긴 게 좀 신경쓰여서 풀어 써 보았다 🙂

function solution(n) {
    if(Number.isInteger(Math.pow(n, 1/2)) == true){
        return Math.pow((Math.pow(n, 1/2) + 1), 2)
    }else {
        return -1
    }
}

<프로그래머스 문제를 기반으로 합니다>

문제 설명

• 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요.
• 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다.

제한 조건

• n은 10,000,000,000이하인 자연수입니다.

입출력 예

n        return
12345    [5,4,3,2,1]

무난한 문제다 🙂 입력받은 자연수를 배열화하여 뒤집은 배열을 출력해주면 된다（￣︶￣）↗　

1. split() 함수를 이용해 입력받은 자연수 n을 배열화 해준 후
2. reverse() 함수를 통해 배열의 순서를 뒤집는다
3. 뒤집은 배열을 반복문을 통해
4. 새로운 배열에 넣어줍니다 👍

<풀이 완성 코드>

function solution(n) {
    let answer = []
    let a = (n + '').split('').reverse()
    for(let i = 0; i < a.length; i++){
        answer[i] = parseInt(a[i])
    }
    return answer
}

<프로그래머스 문제를 기반으로 합니다>

문제 설명

• 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요.
• 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다.

제한사항

• N의 범위 : 100,000,000 이하의 자연수

입출력 예

N        answer
123        6
987        24


입출력 예 #1
문제의 예시와 같습니다.

입출력 예 #2
9 + 8 + 7 = 24이므로 24를 return 하면 됩니다.

무난한 문제다 🙂

1. 먼저 입력된 자연수 N을 split() 함수를 이용하여 배열로 쪼개준 후
2. 반복문으로 각 인덱스 값들을 더해주는데
3. 배열로 쪼갤 때 인덱스 값들이 string type 이므로
4. parseInt()를 이용해 정수로 변환해준 후 더해주자 （￣︶￣）↗　

<풀이 완성 코드>

function solution(n){
    let str = (n + '').split('')
    let answer = 0
    for(let i = 0; i < str.length; i++){
        answer += parseInt(str[i])
    }
    return answer
}

<프로그래머스 문제를 기반으로 합니다>

문제 설명

• 문자열 s는 한 개 이상의 단어로 구성되어 있습니다.
• 각 단어는 하나 이상의 공백문자로 구분되어 있습니다.
• 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요.

제한 사항

• 문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준)별로 짝/홀수 인덱스를 판단해야합니다.
• 첫 번째 글자는 0번째 인덱스로 보아 짝수번째 알파벳으로 처리해야 합니다.

단어별로 인덱스를 파악하라는 것은 배열화 하여 이중배열 처리를 해라라는 뜻으로 해석했다 🙂

입출력 예

s                    return
"try hello world"    "TrY HeLlO WoRlD"

단어 하나하나를 배열로 보면 위 제한사항이 이해된다 😀

어떻게 풀까?

1. 먼저 입력된 문자열을 split() 함수를 통해 쪼개어 인덱스 값들이 단어인 배열을 만든다.
2. 그 후 map() 함수를 이용하여 각 단어들을 다시 split()함수를 사용하여 쪼개어 이중 배열을 만든다.
3. 각 배열의 인덱스 값들을 % 연산자를 통해 짝/홀수를 판별하고
4. 조건문을 통해 짝수는 toUpperCase() / 홀수는 toLowerCase()를 적용한 후
5. join() 함수를 통해 각 내부 배열들을 합쳐 String 값으로 리턴한 후
6. 다시 join 함수를 통해 바깥 큰 배열을 합쳐 String 값으로 반환하면?
7. 답이 뙇👍

<풀이 완성 코드>

function solution(s) {
    return s
        .split(" ")
        .map(x => x.split('')
            .map((e, index) => index % 2 === 0 ? e.toUpperCase() : e.toLowerCase())
                .join(''))
        .join(' ')
}

<프로그래머스 문제를 기반으로 합니다>

문제 설명

• 수많은 마라톤 선수들이 마라톤에 참여하였습니다.
• 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다.
• 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때,
• 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요.

단 한명이라고 엄청 강조하네요??🤔

제한사항

• 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다.
• completion의 길이는 participant의 길이보다 1 작습니다.
• 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다.
• 참가자 중에는 동명이인이 있을 수 있습니다.

동명이인 이라는 키워드 중요할 것 같다. 😗

입출력 예 설명

예제 #1
"leo"는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

예제 #2
"vinko"는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

예제 #3
"mislav"는 참여자 명단에는 두 명이 있지만, 완주자 명단에는 한 명밖에 없기 때문에
한명은 완주하지 못했습니다.

예제 #3을 어떻게 뽑아내는지가 중요할 것으로 보인다.

그럼 어떻게 풀면 좋을까??🤔

1. 두 배열을 정렬해서 반복문을 통해 하나씩 점검한 다음 같은 index값의 element가 다를 경우 출력해주면 완주하지 못한 사람이 나올 것 같다.
2. 다른 방법은 생각해내지 못했다 🤣🤣

<풀이 완성 코드>

function solution(participant, completion) {
    participant.sort()
    completion.sort()

    for(let i = 0; i < participant.length; i++){
        if(participant[i] !== completion[i]){
            return participant[i]
        }
    }
}

생각보다 되게 간단히 풀리는 문제였다. 다만 뭔가 다른 방법이 없을까.. 하고 다른 분들의 풀이를 찾아보는데

<추가 코드>

function solution(participant, completion) {
const map = new Map()
    for(let i = 0; i < participant.length; i++){
        let a = participant[i],
            b = completion[i]

        map.set(a, (map.get(a) || 0) + 1)
        map.set(b, (map.get(b) || 0) - 1)
    }

    for(let [key, value] of map){
        if(value > 0){
            return key
        }
    }
    return 
}

처음 보고 무슨 소리지 했다 근데 이 코드가 가독성이 좋다는 댓글이 있어 꼭 이해하고 넘어가야겠다 싶었고 자바스크립트에서 자주 쓰는 Hash Table 개념이 들어가있다고 했다.

그래서 map 함수와 Hash Table에 대해 공부해보았다.

<Map 함수 / Hash Table>

Map() JS 내장 객체는 새로운 배열을 만드는 함수들을 갖고있는 객체이다.

map.set(a, (map.get(a) || 0) + 1)
map.set(b, (map.get(b) || 0) - 1)

이 코드로 설명을 하자면,

map.set(key값, value값)

• {key : value, key1 : value1 ....}
• 이러한 형태의 Hash Table을 만드는 함수이다

map.get(key값)

• 입력된 key값이 해당 Hash Table에 존재할 경우 True
• 없을 경우 False를 반환하는 함수이다

이 배경 지식들을 바탕으로, 풀이를 해보면

1. a라는 key 값을 넣어주는데, value 값으로 (map.get(a) || 0) + 1이 들어간다
2. (map.get(a) || 0) + 1 여기에서 a라는 값은 아직 key값으로 대입되기 전 이기 때문에 map.get(a)는 false가 return되어 0이 반환되고 +1이 되어 value 값으로 1이 대입되는 것이다.

   • map.get(key) || 0 ==> map.get이 false 면 0을

   • map.get(key) && 0 ==> map.get이 true 면 0을

이 내용을 콘솔창에 찍어보면 이렇게 나온다 （￣︶￣）↗　

마지막 undefined => -1은 completion 배열이 participant 배열보다 길이가 1 작기때문에 출력된 값이다.

즉 여기서 이 값들을 통해 Hash Table의 value 값이 0보다 큰 경우

for(let [key, value] of map){
        if(value > 0){
            return key
        }
    }

를 출력하면 탈락자의 key값이 return되게 되는것이다.

코드 하나로 몇시간을 보냈는지 모르겠다 🙂

하지만 이런게 싫다면 개발자 어떻게 해 ¯_(ツ)_/¯

즐겨~😁

<프로그래머스 문제를 기반으로 합니다>

여기 공간에 글 쓰는건 처음인 것 같은데 제목이 참 정신이 없다 😣

문제 설명

• 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요.
• 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다.

'수박' 이라는 String이 반복되고, 짝수/홀수를 구분해야겠네 🤔

제한 조건

• n은 길이 10,000이하인 자연수입니다.

입출력 예

n    return
3    "수박수"
4    "수박수박"

홀수일 땐 '수'를 따로 더해주고 짝수일 땐 '수박' 반복 해주면 될듯한데?? repeat() 함수 쓰면 좋겠구나!!（￣︶￣）↗　

<풀이 완성 코드>

function solution(n) {
    let a = new Array(n)

    if(n % 2 === 0){
        a = '수박'.repeat(n/2)
    }else{
        a = '수'+'박수'.repeat(n/2)
    }
    return a
}

아주 쉬운 문제였다. 😁

프로그래머스에 어마어마한 코드가 있던데 보러가실래요??

<프로그래머스 문제를 기반으로 합니다>

문제 설명

• String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요.
• seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다.

배열에서 x가 위치라는 것을 보니 index 값을 갖고 오는게 키포인트구나 😀

제한 사항

• seoul은 길이 1 이상, 1000 이하인 배열입니다.
• seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다.
• "Kim"은 반드시 seoul 안에 포함되어 있습니다.

입출력 예

seoul                return
["Jane", "Kim"]        "김서방은 1에 있다"

간단한 문제로 확인된다 (❁´◡`❁)

<풀이 완성 코드>

function solution(seoul) {
    let position = seoul.indexOf('Kim')

    return `김서방은 ${position}에 있다`
}

indexOf(찾고자 하는 String , 검색 시작 위치)

• 찾고자 하는 String 값의 index 값을 반환한다.

오죽 배열에서 index 값을 많이쓰면 이런 내장함수가 있을까 🤣😁

덕분에 좋은 내장함수 하나 알고갑니다~(～￣▽￣)～

<프로그래머스 문제를 기반으로 합니다>

문제 설명

• 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요.
• 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다.

입력값 s의 구성 문자가 숫자로만 이루어져 있는지 파악하는 문제다!! 딱 보자마자 생각난 건 정규표현식 이었다 🙂

제한 사항

• s는 길이 1 이상, 길이 8 이하인 문자열입니다.

입출력 예
s        return
"a234"    false
"1234"    true

어떻게 푸는게 좋을까?? 🙄

1. 정규표현식을 찾아서 검사하는 내장 함수를 찾아보자!!
2. Number(), parseInt() 같은 문자열 => 숫자 변환 함수를 사용하여 나오는 출력값을 어떻게 비교하면 되지 않을까?? ¯_(ツ)_/¯

<풀이 완성 코드>

function solution(s) {
    return (s.length === 4 || s.length === 6) && /^[0-9]+$/.test(s)
}

정규표현식을 이용한 풀이이다. 정규표현식에 쓰인 의미들을 간단히 살펴보자!! 😁

• 점검 하고자 하는 것 들 : /[0-9]/ /[a-z]/ /[A-Z]/ ...
• ^ : 정규 표현식 시작을 뜻함
• $ : 정규 표현식 끝을 뜻함
• + : 반복해서 체크해라라는 명령

test() 메서드

• 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환합니다.

굉장히 유요한 메서드와 정규표현식에 대해 공부할 수 있었던 코드였다. <많이 사용하는 정규표현식 궁금하지?????>

<추가 풀이 완성 코드>

이게 Number()랑 parseInt() 가지고 노는 코드이다 좀 어려웠다 🤣

function solution(s) {
    answer = (s.length === 4 || s.length === 6) && Number(s) === parseInt(s)
}

이 코드의 중요한 점은 NaN 이다.

문자가 포함된 String 값을 Number() / parseInt() 하게 되면, 모두 NaN을 반환한다.

그 떄 NaN은 특이하게 아래와 같이 리턴한다.

NaN === NaN  // false

그렇기에 s 값에 문자가 포함된 String 값이 입력되면 && 후자의 코드에서 무조건 false 값이 반환되므로, 문자가 들어간 String을 구별해낼 수 있게 되는 것이다. （￣︶￣）↗　

<undefined / NaN / Null> 궁금하지!!??