JS문법종합반 정리 1주차 01 - 자료형 보충, 문자열 관련 메서드, 형 변환, 삼항 연산자, 객체 관련 메서드

UX

user experience, 사용감 정도의 의미인 듯 하네

 

 

동적타이핑

변수 선언시 데이터 타입을 지정하지 않고, 런타임 시점에서 타입이 결정됨

 

 

선언 방식 간 차이

• var는 재선언이 가능하지만, let과 const는 재선언이 불가능
• var와 let은 재할당이 가능하지만, const는 재할당이 불가능

 

지수형 숫자 타입 Exponential(exp)

let num = 2.5e5; // 2.5에 10의 5승을 곱했다는 의미
console.log(num); // 반환 : 25000

 

 

Infinity와 -Infinity

/* Infinity */
let num1 = 1 / 0;

/* -Infinity */
let num2 = -1 / 0;

 

 

문자열 관련 메서드

• length : 문자열의 길이 확인(문자 개수 확인, 공백이나 특수문자도 모두 포함해 셈)

let str = "hi, world!";
let length_result = str.length;

console.log(length_result); // 반환 : 10

• concat() : 문자열들을 결합해줌 (concatenation)

/* 기본구조 */
기존문자열.concat(붙일문자열)

/* 예시 */
let str1 = "hi, "; 
let str2 = "world!";
let concat_result = str1.concat(str2);

console.log(concat_result); // 반환 : "hi, world!"

• substr() : 문자열 일부를 추출해줌. 인자엔 자르기 시작할 위치와 자르는 길이를 요구 (위치는 0부터 시작) 

/* 기본 구조 */
변수명.substr(시작위치, 추출할길이);

/* 예시 */
let str = "hi, world!";
let substr_result = str.substr(4, 5);

console.log(substr_result); // 반환 : "world"

• slice() : 문자열 일부를 추출해줌. 인자엔 자르기 시작할 위치와 마칠 위치를 요구 (위치는 0부터 시작, 마칠 위치 문자는 포함하지 않음)

/* 기본 구조 */
변수명.slice(시작위치, 마칠위치)

/* 예시 */
let str = "hi, world!";
let slice_result = str.slice(4, 9);

console.log(slice_result); // 반환 : "world"

• search() : 문자열에서 원하는 문자의 시작 위치를 알려줌. (위치는 0부터 시작)

/* 기본 구조 */
변수명.search(찾을위치)

/* 예시 */
let str = "hi, world!";
let search_result = str.search("world");

console.log(search_result); // 반환 : 4

• replace() : 문자열에서 특정 문자를 원하는 문자로 대체해줌. 

/* 기본 구조 */
변수명.replace(기존문자, 바꿀문자)

/* 예시 */
let str = "hi, world!";
let replace_result = str.replace("hi", "hello");

console.log(replace_result); // 반환 : "hello, world!"

• split() : 문자열을 원하는 문자 기준으로 분할해줌. 반환은 배열 형태로 해주고, 기준 문자는 포함하지 않음

/* 기본 구조 */
변수명.split(기준문자)

/* 예시 */
let str = "hi, world!";
let split_result = str.split(",");

console.log(split_result); // 반환 : ["hi", " world!"]

 

 

null과 undefined의 차이

null은 의도적으로 값이 없음을 보여주기 위해 활용하는 자료형이고, undefined는 값이 할당되지 않았음을 보여주는 자료형일 뿐임

 

 

형 변환

• 암시적 형 변환(implicit coercion) : 자바스크립트에서 사용자의 의도와 관계없이 발생하는 자동 형 변환. 일반적으로 연산자를 활용할 때 발생함. 더하기 연산에서 문자열이 포함되면 반환값이 문자형이 된다거나, 이외의 연산에서 숫자가 포함되면 반환값이 숫자형이 된다는 등의 경우.

/* 더하기 연산자와 문자열 */
let case1 = 1 + "2"; 
console.log(case1); // 반환 : "12"
let case2 = "1" + null;
console.log(case2); // 반환 : "1null"
let case3 = "1" + {};
console.log(case3); // 반환 "1[object Object]"
let case4 = "1" + [];
console.log(case4); // 반환 : "1"

/* 이외의 연산자와 숫자 */
let case5 = "1" - 2; 
console.log(case5); // 반환 : -1
let case6 = "2" * "3"; 
console.log(case6); // 반환 : 6
let case7 = 4 + +"5"; 
console.log(case7); // 반환 : 9, 숫자 형태의 문자열에 +를 붙여주면 숫자형으로 변환시킴
let case8 = 4 > "2";
console.log(case8); // 반환 : true, 비교 연산자 역시 숫자형으로 변환해 비교함

• 명시적 형 변환(explicit coercion) : 개발자가 메서드를 통해 직접 자료형을 변환하는 것. String(), Number(), Boolean() 등

 

삼항연산자

물음표 ?와 콜론:을 통해 표현. 조건식을 간단히 사용하거나 할 때 활용함

/* 기본 구조 */
변수선언 = 조건 ? 참일때반환값 : 거짓일때반환값

/* 예시 */
let x = 10;
let result = (x > 5) ? "큼" : "작음";
console.log(result); // 반환 : "큼", 조건식 결과가 true기 때문에 앞에 값 반환

 

 

조건부 실행

논리곱 연산자 &&를 활용

/* 기본 구조 */
조건식 && 참이면실행할로직

/* 예시 */
let x = 10;
(x > 0) && console.log("x는 양수입니다."); // 반환 : "x는 양수입니다."

 

 

단축 평가

삼항 연산자의 일종, 논리합 연산자 ||를 활용

/* 기본구조 */
변수x선언 = 할당된값이없는변수y || 대입할 값;

/* 예시1 undefined */
let y;
let x = y || 10;
console.log(x); // 반환 : 10, y에 할당된 값이 없다면 10을 할당

/* 예시2 null */
let b = null;
let a = b || 10;
console.log(a); // 반환 : 10

 

 

객체 관련 메서드

• Object.keys() : 객체의 key들을 배열 형태로 반환해줌

/* 기본 구조 */
Object.keys(객체명)

/* 예시 */
let person = {
  name : "Bob",
  age : 25,
  gender : "male"
};

let keys_result = Object.keys(person);
console.log(keys_result); // 반환 : ["name", "age", "gender"]

• Object.values() : 객체의 value들을 배열 형태로 반환해줌

/* 기본 구조 */
Object.values(객체명)

/* 예시 */
let person = {
  name : "Bob",
  age : 25,
  gender : "male"
};

let values_result = Object.values(person);
console.log(values_result); // 반환 : ["Bob", 25, "male"]

• Object.entries() : 객체를 2차원 배열로 변환해줌. 각 프로퍼티를 두가지 요소를 가진 배열로 만들고, 각 프로퍼티 배열들의 배열로 변환해줌

/* 기본 구조 */
Object.entries(객체명)

/* 예시 */
let person = {
  name : "Bob",
  age : 25,
  gender : "male"
};

let entries_result = Object.entries(person);
console.log(entries_result); // 반환 : [["name" : "Bob"], ["age" : 25], ["gender" : "male"]]

• Object.assign() : 기존 객체를 복사한 새 객체를 만들어줌. 만약 value 값을 바꾸고 싶다면 인자에 추가하는 식

/* 기본 구조 */
Object.assign(새로만들객체,복사할객체)

/* 예시 */
let personA = {
  name : "Bob",
  age : 25,
  gender : "male"
};
let personB;

let assign_result = Object.assign(personB, personA, {age : 30});
console.log(assign_result); // 반환 : {name : "Bob", age : 30, gender : "male"}

 

 

객체 간 비교

 내용물이 동일해보이는 객체들일지라도, 일치연산자를 사용해보면 두 객체가 다름을 알 수 있음. 객체의 메모리 저장 방식 때문. 객체 내용물 간의 비교가 필요하다면 JSON.stringify() 함수를 통해 객체들을 문자열로 변환해 비교

 

 

객체 간 병합

전개 연산자 ...을 활용. 중괄호 안에 병합할 객체들을 전개 연산자와 함께 씀

/* 기본 구조 */
{...합칠객체1, ...합칠객체2}

/* 예시 */
let person_1 = {
  name: "Bob",
  age: 30
};
let person_2 = {
  gender: "male"
};

let mergedPerson = {...person_1, ...person_2};
console.log(mergedPerson); // 반환 : {name: "Bob", age: 30, gender: "male"}