[EST] 240708 JavaScript-02

변수

 

호이스팅

- 의미

  ◽  끌어올리기

  ◽ 변수의 선언문이 해당 스코프의 최상단으로 끌어올려지는 현상

  ◽  코드에서 변수를 선언하기 전에 해당 변수를 사용할 수 있는 것처럼 보이는 현상

 

- TDZ

  ◽  Temporal Dead Zone

  ◽  코드상에 let, const로 선언된 변수와 상수는 TDZ(임시 접근불가구역)에 배치됨

  ◽  값들은 선언에 대한 초기화가 실행된 후에 TDZ에서 제거되어 사용 가능한 상태가 됨

  ◽  TDZ는 접근이 불가능하기 때문에, 초기화 전에 TDZ에 배치된 변수에 접근하려고 하면 에러 발생

 

- 호이스팅에서 var const let의 차이점

  ◽  var선언은 전역범위 / 함수 범위 -> 범위 내에서 업데이트 및 재선언 가능

  ◽  let과 const선언은 블록 범위 -> let : 업데이트 가능 및 재선언 불가능 / const : 업데이트 및 재선언 둘 다 불가능

---

Type과 원시타입

Type

- 자료형으로 해석

- 값의 종류를 나타냄

- 값의 종류에 따라 연산의 결과가 달라지거나, 타입에 맞는 여러 기능들을 제공

- 원시타입(Primitive Type) / 객체타입(Object Type)으로 나뉨

 

* 자바스크립트

- 동적 타입 언어

- 변수를 선언할 때 타입을 지정X

- 할당된 값에 의해서 변수의 타입이 결정되는 언어

 

원시타입

- 특징

  ◽ 값 변경 불가능

  ◽  값을 변수에 저장하거나 전달할 때 값에 의한 전달을 함

  ◽  원시 값을 다른 변수에 할당할 때 값 자체가 복사되어 저장됨

 

- 종류

  ◽ 문자(string)

  ◽ 숫자(number)

  ◽ bigint

  ◽ boolean

  ◽ symbol

  ◽ null

  ◽ undefined

 

문자열(String)

- 텍스트 데이터를 나타내는 타입

- 작은따옴표( ' ), 큰 따옴표( " ), 백틱( ` )으로 감싸서 표현

 

템프릿 리터럴

- 백틱(`)을 이용해 문자열을 나타내는 표기법

- 백틱으로 감싸진 문자열 안에 ${자바스크립트 표현식}을 작성

let a = 10;
let b = 20;

console.log(a + " + " + b + " = " + (a + b));

// 템플릿 리터럴을 사용하여 표현식 삽입
console.log(`${a} + ${b} = ${a + b}`);

 

문자열의 특징

- 순서

  ◽ 0부터 시작

  ◽  띄어쓰기도 문자로 취급

  ◽ 순서 = 인덱스(index)

  ◽ 대괄호( [ ] )를 사용하여 특정 위치의 문자를 가져올 수 있음

- 문자열의 길이를 구하는 속성

  ◽ length 속성을 이용하여 문자열 길이를 구함

let myPassword = "qwer123!@#";
console.log(myPassword.length);

- 원시타입으로 불변성을 가지고 있음

  ◽ 한 번 만들어진 문자열은 절대 변하지 않음

- 문자열은 +연산자로 연결 가능

let greeting = '안녕하세요.';
let company = '위니브';

console.log(greeting + ' ' + compoany + '입니다.');

 

문자열 메소드

- 메소드(method)

  ◽ 객체의 속성으로 존재하는 함수

 

- indexOf()

  ◽ indexOf("찾을 문자열", n번째자리부터 찾을 인덱스 번호)

  ◽  문자열 안에 존재하는 특정한 문자를 검색하여 문자의 인덱스를 반환

const str = "Hello world, Hello weniv!";

console.log(str.indexOf("Hello")); // 0 -> 0번째자리에서 Hello를 찾음
console.log(str.indexOf("weniv")); // 19 -> 19번째자리에서 weniv를 찾음
console.log(str.indexOf("licat")); // -1 -> 찾는 글자가 없으면 -1로 반환
console.log(str.indexOf("hello")); // -1 -> hello != Hello / 자바스크립트에서는 대소문자를 구분함
console.log(str.indexOf("Hello", 5)); // 13 -> 5번째부터 시작하여 찾은 Hello은 13번째

 

- lastIndexOf()

  ◽ lastIndexOf("찾을 문자열", n번째자리부터 찾을 인덱스 번호)

  ◽ 문자를 검색하는 순서가 indexOf()와 정반대

const str = "Hello world, Hello weniv!";

console.log(str.lastIndexOf("Hello")); // 13 -> 뒤에서부터 찾아 13번째에서 Hello를 찾음
console.log(str.lastIndexOf("weniv")); // 19 -> 뒤에서부터 찾아 19번째에서 weniv를 찾음
console.log(str.lastIndexOf("licat")); // -1 -> 찾는 글자가 없으므로 -1를 반환
console.log(str.lastIndexOf("Hello", 12)); // 0 : 12번째부터 거꾸로(왼쪽으로) 확인하여 0번째에서 Hello를 찾음

 

- includes()

  ◽  include("찾는 문자열")

  ◽ 문자열이 포함되어 있는지를 판별

  ◽ 포함 여부는 true와 false로 반환

const str = "Hello world, Hello weniv!";

console.log(str.includes("Hello")); // true -> Hello문자열 포함
console.log(str.includes("hello")); // false -> hello문자열 포함X

 

- match

 ◽ match(/정규표현식/g)

 ◽ 문자열에서 정규표현식과 일치하는 부분을 검색

 ◽ 일치하는 값들을 배열로 반환

 ◽ 일치하는 값이 없으면 null로 반환

const str = "Hello world, Hello weniv!"

console.log(str.match(/[A-Z]/g)); // ['H', 'H'] -> 대문자만 골라내기
console.log(str.match(/[0-9]/g)); // null -> 숫자만 골라내기 (일치하는 값이 없을 경우, null을 반환)
console.log(str.match(/H/)); // ['H'] -> 첫 번째로 일치하는 값을 반환

 

- substring()

 ◽ substring(시작 인덱스 번호, 종료 인덱스 번호+1)

 ◽ 문자열의 일부를 가져오는 메소드

 ◽  인덱스에 음수나 숫자가 아닌 값이 오면 0으로 반환

 ◽ 시작 인덱스가 종료 인덱스보다 크면 두 인자를 바꾼 것처럼 동작

const str2 = "Hello weniv!";

console.log(str2.substring(0, 5)); // Hello
console.log(str2.substring(6, str2.length-1)); // weniv
console.log(str2.substring(6)); // weniv! -> 종료인덱스가 없으면 끝까지 출력
console.log(str2.substring()); // Hello weniv! -> 전체값 출력
console.log(str2.substring(-2, 5)); Hello -> 음수는 0으로 처리
console.log(str2.substring(2, "hello")); // He -> 숫자가 아닌 값은 0으로 처리 / [2, 0]을 [0, 2]로 자동치환

 

- slice()

 ◽ slice(시작 인덱스 번호, 종료 인덱스 번호+1)

 ◽ 문자의 일부분을 복사하여 새로운 문자열을 반환

 ◽ 시작 인덱스와 종료 인덱스를 인자로 전달

 ◽ 종료 인덱스는 옵션으로 필수X / 기본값은 문자열의 길이

 ◽ 음수 인덱스도 허용

const str2 = "Hello weniv!";

console.log(str2.slice(0, 5)); // Hello
console.log(str2.slice(6, -1)); //weniv
console.log(str2.slice(2, "hello")); //  -> 숫자가 아닌 값은 0으로 처리 / slice(2,0)으로 빈문자열로 반환

 

* substring VS slice 차이점

	substring	slice
음수값	음수값 인정X -> 0으로 처리	음수값 인정O
치환	치환O	치환X -> 빈문자열로 반환

 

- substr()

 ◽ substr(시작 인덱스, 문자열의 길이)

 ◽ 문자열의 일부를 가져오는 메소드

 ◽ 음수 인덱스 허용

 ◽ 길이가 음수이거나 0이면 빈 문자열로 반환

 ◽ 길이가 생략된 경우에는 문자열 끝까지 반환

const str2 = "Hello weniv!";

console.log(str2.substr(6, 5)); // weniv -> 6번째부터 길이가 5가 되도록 반환
console.log(str2.substr(6)); // weniv! -> 문자열의 길이가 입력되지 않으면 문자열의 끝까지 반환
console.log(str2.substr(6, 0)); //  -> 문자열의 길이가 0면 빈문자열로 반환
console.log(str2.substr(6, -2)); //  -> 문자열의 길이가 음수이면 빈문자열로 반환

 

- split()

 ◽ split("나뉘는 기준의 문자")

 ◽ 인자로 전달하는 구분자로 문자열을 쪼개어 각각의 값을 원소로 하는 배열을 반환

 ◽ 두 번째 인자로 나눌 개수를 전달 가능

 ◽ 구분자가 빈 문자열이라면 문자열 하나하나가 모두 쪼개진 배열이 반환

const phonenumber = "010-1234-1234";

console.log(phonenumber.split("-"); // ['010', '1234', '1234']
console.log("apple".split(""); // ['a', 'p', 'p', 'l', 'e'] -> 기준문자가 없으면 하나하나 쪼갬
console.log("apple".split("", 2)); // ['a', 'p'] -> ['a', 'p', 'p', 'l', 'e'] 중 2번만 쪼갬

 

- replace()

 ◽ replace(찾아야하는 문자열, 대체할 값)

 ◽ 문자열에서 일치하는 첫번째 문자열을 찾고, 대체하여 새로운 문자열을 반환

 ◽ 정규표현식을 지원

 ◽ g플래그를 사용하면 일치하는 모든 부분 대체 가능

const str3 = "Hello World! Hello Weniv!";

console.log(str3.replace("Hello", "Hi")); // Hi World! Hello Weniv! -> 첫번째 Hello만 Hi로 대체하여 변환
console.log(str3.rplace(/Hello/g, "Hi")); // Hi World! Hi Weniv! -> 정규표현식을 이용하여 모든 Hello를 Hi로 대체하여 변환

 

- replaceAll()

 ◽ replaceAll(찾아야하는 문자열, 대체할 값)

 ◽ 문자열을 소문자 / 대문자로 변환한 새로운 문자열을 생성하여 반환

const str3 = "Hello World! Hello Weniv!"

console.log(str3.replaceAll("Hello", "Hi")); // Hi World! Hi Weniv! -> 모든 Hello를 Hi로 변환

 

- toLowerCase()

 ◽ toLowerCase()

 ◽ 문자열을 소문자로 변환하여 새로운 문자열을 생성하여 반환

const search = "JavaScript";

cosole.log(search.toLowerCase()); // javascript -> 모든 문자를 소문자로 변환

 

- toUpperCase()

 ◽ toUpperCase()

 ◽ 문자열을 대문자로 변환하여 새로운 문자열을 생성하여 변환

const search = "JavaScript";

cosole.log(search.toUpperCase()); // JAVASCRIPT -> 모든 문자를 대문자로 변환

 

- repeat()

 ◽ repeat(반복할 횟수)

 ◽ 문자열을 지정된 횟수만큼 반복한 새로운 문자열을 반환

console.log("*", repeat(5)); // ***** -> *를 5번 반복

 

- trim()

◽ trim()

◽ 문자열 앞 뒤의 공백을 제거

console.log("     Hello licat     ".trim()); // Hello licat -> 문자열의 앞뒤 모든 공백 제거

 

- padStart()

◽ padStart(목표로하는 문자열의 길이, 채울 문자열)

◽ 자릿수에 맞춰 인자로 전달받은 문자열을 앞쪽에 채움

◽ 패딩에 사용할 문자열을 지정하지 않은 경우, 공백으로 채워짐

console.log("3".padStart(2, "0")); //03 -> 3을 포함한 2자리수로 0을 왼쪽부터 채움
console.log("3".padStart(2)); //  3 -> 3을 포함한 2자리수로 공백을 왼쪽부터 채움
console.log("12".padStart(2, "0")); -> 12를 포함한 2자리수로 0을 왼쪽부터 채움(12로 두자리수 완성)

 

- padEnd()

◽ padEnd(목표로하는 문자열의 길이, 채울 문자열)

◽ 자릿수에 맞춰 인자로 전달받은 문자열을 enl쪽에 채움

◽ 패딩에 사용할 문자열을 지정하지 않은 경우, 공백으로 채워짐

console.log("12".padEnd(5, "-")); //12--- -> 12를 포함한 5자리를 만들기위해 뒤에 -을 추가