Javascript 정리(5)

✅ 데이터 타입

👉 ES6에서 채택한 7개의 데이터타입

기본 자료형(Primitive)

• String(문자열)
• Number(숫자)
• Boolean (true/false)
• Undefined
• Null
• Symbol

객체 자료형(Object)

• Object

👉 typeof 연산자
각 데이터 타입을 확인하는 연산자
typeof ( );

let msg = "message";
let num = 123;
let confirm = true;

console.log(typeof msg); // "string"
console.log(typeof num); // "number"
console.log(typeof confirm); // "boolean"

console.log(typeof 100); // "number" (숫자(100)를 바로 대입해도 해당값의 데이터타입이 출력
console.log(typeof null); // "object"
❗ null 은 빈 객체를 참조하고 있기 때문에

console.log(typeof []); // "object"
❗ 배열은 확장된 객체 이기 때문에

console.log(typeof (!0)); // "boolean"
console.log(typeof function() {});  // "function"

👉 문자열

// 문자열 데이터 타입 변수 선언
let name = "leedev";

// .length >> 문자열이 몇 글자로 되어 있는지 확인
name.length // 6

// .toUpperCase >> 문자열을 대문자로 출력
name.toUpperCase() // "LEEDEV"

// .indexOf >> 특정 텍스트의 포함 유무 및 위치 확인
name.indexOf('e') // 1 (1번째에 e 위치)
name.indexOf('k') // -1 (해당 문자열이 없으면 -1 반환한다) ✨

// String은 대소문자를 구별한다
console.log('js' === 'js'); // true
console.log('Js' === 'js'); // false

⏩ String 대소문자 바꾸기 함수
String형에서 제공하는 기본 함수들이 많은데, 대표적으로 알아서 대소문자를 바꿔주는 함수가 있다.
toUpperCase, toLowerCase

let name = 'Dev Lee'
let upperLastName = name.toUpperCase();
let lowerLastName = name.toLowerCase();

console.log(name);  // 'Dev Lee'
console.log(upperLastName);  // 'DEV LEE'
console.log(lowerLastName);  // 'dev lee'

⏩ String 문자길이 확인하는 함수
String형도 length라는 속성으로 길이를 알 수 있다(=배열의 길이를 .length 속성으로 알듯)
(변수).length

◾ 회원가입을 받을 때 이름에 10자가 넘어갔는지 체크하거나, 한국의 핸드폰 번호는 무조건 10자 아니면 11자 이므로 사용자가 값을 잘못 입력했는지 체크할 때 유용하게 사용.

// 사용자가 핸드폰 번호 입력할 때 예시(입력 숫자 자릿수로 확인)
if (phoneNumber.length !== 10 &&  phoneNumber.length !== 11) {
    alert("폰 번호 제대로 입력하셨나요?");
}

// 사용자가 이름 입력할 때 예시(입력 글자 자릿수로 확인)
function yourName(name) {
    if (name.length === 2) {
        return("외자이시군요! 이름이 이쁘네요.");
    } 
    if (name.length === 1) {
       return("제대로 입력하셨나요?");
    } 
    if (name.length === 3) {
      return("멋진 이름입니다.");
    }
}
console.log(yourName("수련"));  //  "외자이시군요! 이름이 이쁘네요." 출력

⏩ String 문자열 찾기
indexOf() 함수는 문자열에 특정 문자열이 들어있는지 확인하고, 만약 있다면 몇번 째 순서에 해당 문자열이 있는지 알려준다.
(변수).indexOf("특정 문자열")

❗ 해당 문자열이 없다면 -1을 반환한다.

◾ 댓글에 욕설이 포함되면 달지 못하도록 차단할 때 사용할 수 있다. 차단할 단어 모음이 존재한다고 하고, 사용자가 댓글을 입력한 뒤 "댓글달기"를 누를 때, 차단할 단어 모음 중에 하나라도 매치되면 댓글을 달지 못하도록 막을 수 있다.

let info = "JavaScript는 프로래밍 언어이다.";
let firstChar = info.indexOf("프로래밍");  //"프로래밍" 문자열이 몇번째에 있는지 찾는 함수를 firstChar 변수에 담았다.

console.log(info, firstChar);  // 'JavaScript는 프로래밍 언어이다.', 12 출력

if (firstChar !== -1) {    // "프로래밍" 문자열이 존재한다면 (-1은 존재하지 않는다는 뜻이니깐)
                           // true. "프로래밍"이라는 오타가 포함되어있으면 if문을 실행합니다.
    info = info.slice(0, firstChar) + "프로그래밍" + info.slice(firstChar+4, info.length); 
}
// slice는 이름 그대로 텍스트를 잘라주는 함수
// slice(잘릴 시작위치, 잘릴 끝위치)

// info.slice(0, firstChar) ➡ 문구의 첫번째 값(0)부터 "프"전까지(12) 잘라준다
// + "프로그래밍" + ➡ "프로그래밍" 단어 삽입
// info.slice(firstChar+4, info.length) ➡  firstChar가 "프"로 시작하고 "프로래밍"은 4글자 이니깐 'firstChar+4' = "언" 글자 직전까지 부분에서 자르기 시작, 잘릴 끝위치는 info.length 이니깐 문장의 마지막까지.
// 따라서 남길 문자들만 잘라주는 것. "프로래밍" 문자의 전후를 모두 slice 하고있다.

console.log(info);  // info는 slice로 잘라낸 나머지와 "프로그래밍"이라는 단어 삽입으로 재구성했다

🚀 slice 함수

🔸 Array, String 메서드 중 하나인 slice는 배열(문자열)의 일부분(slice) 혹은 부분 배열(subarray)을 반환한다.
🔸 slice() 메서드는 전달 인자를 두 개 받는데, 각 인자는 반환될 부분의 처음과 끝을 각각 명시한다.
👉 slice(잘릴 시작위치, 잘릴 끝위치)
🔸 반환되는 배열은 첫 번째 전달인자가 지정하는 위치부터 두 번째 전달인자가 지정하는 위치를 제외한 그 사이의 모든 원소를 포함한다.
🔸 만약 전달 인자를 하나만 명시하면, 그 위치에서 배열 끝까지의 모든 원소를 포함하는 부분 배열을 반환한다.
🔸 만약 전달 인자가 음수라면 배열의 마지막 원소에서 상대적인 위치로 배열 원소를 지정한다.
ex) 전달 인자 -1은 배열의 마지막 원소를 가리키며, 전달인자 -3은 배열의 마지막 원소부터 앞쪽으로 세 번째 원소를 가리킨다.

/* 
sliceCityFromAddress 함수를 구현해 주세요.
sliceCityFromAddress 함수는 address 인자를 받습니다.
address 인자에는 주소를 나타내는 string이 주어집니다.
주어진 주소가 어느 도시인지를 찾아내서, 해당 주소에서 도시 부분만 삭제한 새로운 주소를 리턴해 주세요.
주소는 무조건 "시" 로 끝납니다. 예를 들어, "서울시".
"도" 와 "시" 는 주소에 한번 밖에 포함되어 있지 않습니다.
예를 들어, 다음과 같은 주소가 주어졌다면,
"경기도 성남시 분당구 중앙공원로 53"
다음과 같은 값이 리턴되어야 합니다:
"경기도 분당구 중앙공원로 53"
*/

function sliceCityFromAddress(address){
    let info = address;   // 매개변수를 담는 변수 생성(함수 내 활용)
    let firstChar = info.indexOf("도");  // "도"가 몇번째에 위치하는지 담는 변수 생성, 도 앞까지 
    let secondChar = info.indexOf("시");  // "시"가 몇번째에 위치하는지 담는 변수 생성, 시 앞까지 
   
    if (firstChar !== -1) {   // "도"가 존재한다면(= -1은 해당 문자열이 없다는 뜻이므로, -1을 부정한다는 것은 해당 문자열이 존재한다고 가정)
      info = info.slice(0, firstChar + 1) + info.slice(firstChar + 5, info.length); 
    } 
    // 맨 첫번째 문자열(0)부터 ~ "도" 까지(firstChar+1) 남기고,
    // "도" 이후 5글자(도✔성남시)부터 ~ 문자열 전체(info.length) 남기고,
    // 잘린 부분은 firstChar +1 ~ firstChar +5 사이의 문자열이다 (= ✔성남시✔) 
    else if (secondChar !== -1){
      info = info.slice(0, secondChar - 4) + info.slice(secondChar + 2, info.length);
    }
    // 맨 첫번째 문자열(0)부터 ~ "시" 앞의 4글자 까지(secondChar-4) 남기고, (= secondChar-4가 위치한 지점은 "시" 앞을 기준으로 -4글자 한 지점이다 
    // = 🚩서ㅣ울ㅣ특ㅣ별ㅣ"시" (0부터 🚩지점까지 남기는 것)
    // "시" 포함하여 이후 2글자(= 시✔)이후 부터 ~ 문자열 전체(info.length) 남기고,
    // 잘린 부분은 secondChar -4 ~ secondChar + 2 사이의 문자열이다 (= 서울특별"시✔) 
    return info;
}
console.log(sliceCityFromAddress("경기도 성남시 중앙공원로 53"));   //'경기도 중앙공원로 53'
console.log(sliceCityFromAddress("서울특별시 강남구 테헤란로 427 위워크타워"));  //'강남구 테헤란로 427 위워크타워'
console.log(sliceCityFromAddress("경기도 성남시 분당구 판교역로 235"));  //'경기도 분당구 판교역로 235'

🍧 String 함수 참고 site
https://www.w3schools.com/jsref/jsref_obj_string.asp

👉 문자열 + 문자열/숫자 조합
⏩ 문자열+문자열

• 텍스트를 조합할 때는 + 연산자를 사용
• 텍스트와 변수를 조합해서 사용할 수도 있다

console.log("안녕" + "하세" + "" + "요");

let hi = "안녕";
console.log(hi + "하세요");

let ha = "하세요";
console.log(hi + ha);

/* (참고) 핸드폰 번호 
핸드폰 번호는 항상 0으로 시작하지만, 0으로 시작하는 숫자 표현식은 없다.
그래서 핸드폰 번호는 숫자로 이루어져 있지만, 문자열로 관리해야 컴퓨터가 첫 숫자인 "0"도 갖고 있게 된다.
*/
let phoneNumber = 01012349876;

console.log(phoneNumber);  //1012349876
console.log(phoneNumber.length);   //undefined
// 핸드폰 번호는 문자열로 표현해줘야 한다
let phoneNumber = "01012349876";

console.log(phoneNumber);  //01012349876
console.log(phoneNumber.length);   //11

⏩ 문자열+숫자
❗ String과 Number형을 더하면 항상 String 형으로 변환

console.log("2" + "2");  // 22출력(문자열로 인식)
console.log(2 + 2);      // 숫자 4

⏩ String <-> Number 변환
자바스크립트 언어의 특징 중 하나가 데이터 타입을 신경쓰지 않는다는 것이다.
typeof 연산자로 해당 변수가 무슨 type인지 알 수 있다.

let a = '900';  
let b = 350; 
let c = Math.random(); 
let d = '5' + 5;   // 문자+숫자 = 문자

console.log(typeof a);  //'string'
console.log(typeof b);  //'number'
console.log(typeof c);  //'number'
console.log(typeof d);  //'string'


console.log('200'+'10');  //'20010' (문자열 +연산)
console.log('200'-'10');  //190 (-는 무조건 숫자연산 ➡ 따옴표로 감싸진 문자열일지라도 수학연산 처리됨)
console.log(200+'11');    //'20011' (문자열+숫자열 = 문자열)
console.log('200'+11);    //'20011' (문자열+숫자열 = 문자열)
console.log('200'-'안녕'); //NaN
❗ 숫자 연산에만 사용되는 -연산자를 문자에 넣어서 Not a Number가 출력


function join(){
  let birthYear = "2000";
  let currentYear = 2019;
  return currentYear-birthYear;
}
join();   //19 (문자열과 숫자열인데 -연산자 사용으로 인해 연산처리 됨. 뺄셈의 결과 출력)


console.log(2019+"2000");  // '20192000' 출력 
// +연산자로 인해 문자열+숫자열=문자열로 변환
console.log(2019-"2000");  // 19 출력
// -연산자는 숫자에만 사용되기 때문에 양쪽 모두 숫자로 변환해서 계산해줌

❗ 텍스트로 표현된 숫자는 꼭 숫자로 바꿔서 계산해주기
Number(정수,소수), parseInt(정수), parseFloat(소수)

parseInt("1.901"); ➡ 1 출력, `정수 반환`
parseFloat("1.901"); ➡ 1.901 출력, `소수 반환`
Number("1.901"); ➡ 1.901 출력, `정수 소수 모두 반환 가능`
parseInt("200") + 1; ➡ 201 출력

❗ 연산의 특성을 활용해서 String 형을 Number형으로 변환
-연산자 이용

var numberAsNumber = "1234"; 
var numberAsString = numberAsNumber - 0;

console.log(numberAsNumber, typeof numberAsNumber);
// '1234' 'string' 출력
console.log(numberAsString, typeof numberAsString);
// 1234 'number' 출력 ( - 연산을 통해 숫자연산이 됨)

❗ Number형에서 String형으로 변환 하는 경우
.toString, (숫자)+""

var numberAsNumber = 1234; 
var numberAsString = numberAsNumber.toString();
var numberAsString = 1234 + "";

console.log(numberAsNumber, typeof numberAsNumber);
// 1234 'number' 출력
console.log(numberAsString, typeof numberAsString);
// '1234' 'string' 출력
console.log(numberAsString, typeof numberAsString);
// '1234' 'string' 출력

👉 boolean

• boolean 은 단 두 개의 데이터로 이루어진 데이터 타입 → true / false
• boolean 데이터 타입은 조건문과 반복문에서 유용하게 사용.
• 다른 데이터 타입이 boolean 값으로 변환되는 여러 경우가 있다.

⏩ 여러 데이터 타입의 boolean 값 변환

✔️ true 로 변환되는 값

• 문자열 : 비어 있지 않은 모든 문자열
• 숫자 : 0 이 아닌 모든 숫자
• 객체: 모든 객체 ({ }, [ ] 포함)

✔️ false 로 변환되는 값 🚨🚨🚨

• 문자열 : " " (빈문자열)
• 숫자 : 0, NaN
• 객체 : null
• undefined

⏩ 조건문에서의 boolean 데이터 값 활용

let num = 3;
if (num === 3) {  //num === 3 이 true이면
  // 실행
}

let msg = "message";
if (msg) {   // 문자열은 " "(빈 문자열)을 제외하고 모두 true 값을 갖기 때문
  // 실행
}

let number = 0;
if (number) {   // 0이 아닌 모든 숫자만 true로 변환
  // 실행 안됨
}

👉 undefined

• undefined 데이터 타입은 정의되지 않은 데이터 타입이다.
• let, const 키워드를 사용해서 변수를 정의할 때 초기화 하지 않았다면, 즉 변수를 선언만 하고 값을 할당하지 않았다면 변수에는 undefined 가 할당된다.

let msg;
console.log(msg === undefined); //true (msg는 선언만 하고, 초기화 하지 않았다.)

👉 객체(Object)

• 객체는 키(Key)와 값(Value)의 조합으로 이루어진 데이터.
• 중괄호({ })로 감싸진 key-value(property)의 형태를 갖는다.

const person = {
	name : "leedev",
	age : 18,
	skills : ['HTML', 'CSS', 'Javascript'] 
}

🍧 코딩 컨벤션(코드작성가이드) 참고 site
https://github.com/airbnb/javascript