문자(String)와 객체(Object)

<SeongHun />·2022년 5월 2일

JavaScript TIL 멋쟁이 사자처럼

JavaScript

목록 보기

3/12

오늘의 키워드📌

문자(String)
객체(Object)

1. 문자 (String)

String 전역 객체는 문자열(문자의 나열)의 생성자이다.

전역: 자바스크립트 전체 영역

1-1. length

Array.length
Array 인스턴스의 length 속성은 배열의 길이를 반환한다.

const str = "0123"
const str2 = ""

console.log("0123".length)	//result: 4
console.log(str2.length)	//result: 0

자바스크립트에서는 문자열의 길이를 length 속성을 통해 구할 수 있다. 문자열의 length 속성은 문자열에서 문자의 갯수를 return 한다. 공백의 경우에도 한개의 문자로 인식하여 length에 포함시킨다. str2의 empty string의 경우에는 0을 리턴한다.

1-2. indexOf()

String.prototype.indexOf() 메소드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환한다. 일치하는 값이 없으면 -1을 반환한다.

const str = "Hello world!".indexOf("world")
console.log(str)	//result: 6

//String.prototype.indexOf()

"Hello world!" 문자열에서 "world"의 "w"는 6번째에 해당.

const str = "Hello world!".indexOf("exception")
console.log(str)	//result: -1

"Hello world!" 문자열에서 "exception"을 찾을 수 없다. 따라서 일치하는 값이 없으므로 -1을 반환.

indexOf() 매개변수

searchValue : 찾으려는 문자열. 아무 값도 주어지지 않으면 문자열 undefined를 찾으려는 문자열로 사용한다.

indexOf() 반환값

searchValue : 첫 번재 등장 인덱스. 찾을 수 없으면 -1을 리턴.

1-3. slice()

String.prototype.slice() 메소드는 문자열의 일부를 추출하면서 새로운 문자열을 반환한다.

const str = "Hello world!"
console.log(str.slice(0, 3)	//result: Hel

slice() 매개변수

beginIndex : 추출 시작점인 0부터 시작하는 인덱스이다.
endIndex : 0부터 시작하는 추출 종료점 인덱스로 그 직전까지 추출된다.

쉽게 말해 위 코드에서 slice() 메소드의 첫 번째 인수로 0, 두 번째 인수로 3을 넣었을 때 제로베이스로 0, 1, 2 까지만 추출이 되어 결과로 "Hel" 이 출력 되었다.
즉, 두 번째 인수로 넣은 3의 직전인 0, 1, 2 까지만 추출이 돼서 반환이 된다.

그렇다면 "Hello world!" 에서 "world"만 추출하고 싶다면 어떻게 해야될까?

const str = "Hello world!"`
console.log(str.slice(6, 11))	//result: world

w는 6번째에 위치해 있으므로 첫 번째 인수는 6을 입력해주고, d는 10번째에 위치해 있으므로 두 번째 인수는 11을 입력해준다.

1-4. relace()

const str = "Hello world!"
console.log(str.replace("world", "replace")
            
//result: "Hello replace!"

replace() 메소드는 문자 데이터에서 첫 번째 인수에 해당하는 문자를 찾아서 두 번째 인수로 교체를 해준다. "world" 문자열이 "replace" 문자열로 교체된 것처럼 말이다.

만약 "Hello" 만 출력하고 싶다면?

console.log(str.replace(" world!", ""))

위와 같이 첫 번째 인수로는 띄어쓰기를 포함한 " world!"를, 두 번째 인수로는 "" 공백으로 작성하면 된다.

1-5. match()

String.prototype.match() 메소드는 문자열이 정규식과 매치되는 부분을 검색한다.

const str = "userid@gmail.com"

위 코드에서 @gmail.com 앳사인을 포함한 도메인 주소를 제거하고 이메일의 아이디 부분 "userid" 부분만 추출하고 싶다면?

정규표현식(RegExp)

정규표현식이라는 것을 통해 @ 앞에 있는 내용들을 추출해 달라는 표현식을 작성하면 된다.

const str = "userid@gmail.com"

console.log(str.match(/.+(?=@)/)[0]
//result: userid

1-6. trim()

String.prototype.trim() 메소드는 문자열 양 끝의 공백을 제거한다. 이때 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR등)를 의미한다.

const str = '    Hello world   '

console.log(str)

str에는 시작부분과 끝부분에 공백을 가진 문자열이 저장되어 있다. 이때 시작부분과 끝부분의 공백을 제외한 문자열만 추출하고 싶다면 trim() 메소드를 활용하면 된다.

const str = '    Hello world   '

console.log(str.trim())

2. 객체 (Object)

Object.assign() Object.create() 처럼 prototype이 붙지 않은 메소드들은 static(정적 메소드)라고 한다.

static 메소드는 {} 중괄호를 사용한 객체 리터럴에 {Object}.assing()와 같이 붙여서 사용할 수 없다.

배열 메소드인 reverse() 는 Array.prototype.reverse() 처럼 prototype이 붙어있기 때문에 [array].reverse()와 같이 [] 대괄호를 사용한 배열 리터럴에 붙여서 사용할 수 있다.

2-1. Object.assign()

Object.assign() 메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용한다. 대상 객체를 반환한다.

const target = { a: 1, b: 2}
const source = { b: 4, c: 5}

const returnedTarget = Object.assign(target, source)

console.log(target)
// Object { a: 1, b: 4, c: 5}

console.log(returnedTarget)
// Object { a: 1, b: 4, c: 5}

source에 있는 여러가지 속성들이 복사돼서 target에 들어간다. 그리고 이때 b 라는 속성은 중복되는데 객체 데이터에서는 속성의 이름이 고유해야 되기 때문에 기존에 있던 target의 숫자데이터 b: 2는 source의 숫자데이터 b: 4로 덮어쓰기가 된다. 덮어쓰기가 된 target은 변수 returnedTarget에 반환된다.

const userAge = {
  // key: value
  name: '김멋사',
  age: 10
}
const userEmail = {
  name: '김멋사',
  email: 'theemail@gmail.com'
}

const target = Object.assign(userAge, userEmail)
console.log(target)
console.log(userAge)
console.log(target === userAge)

const a = { k: 123 }
const b = { k: 123 }
console.log(a === b)

target과 userAge는 같은 메모리 주소를 참조하기 때문에 일치연산자를 사용했을때 true 값이 나오게 된다.

똑같은 모양의 데이터를 가지고 있기 때문에 true 값이 나온 것은 아니다. 그 예로 a와 b는 같은 모양의 객체 데이터 k: 123을 가지고 있지만 일치연산자를 사용해서 비교하면 false 값이 나오게 된다. a와 b의 메모리 주소는 다르기 때문이다.

참조형 데이터 특징
데이터의 모양은 같지만 다른 메모리 주소를 바라보고 있기 때문에 자바스크립트 엔진은 '다르다' 고 판단한다. 이는 참조형 데이터(함수형 데이터, 배열 데이터, 객체 데이터)의 특징이다.

Object.assign(userAge. userEmail) 에서 userEmail이 userAge에 복사되어 붙여넣어진다면 userAge의 원본 객체 데이터에는 존재하지 않았던 userEmail의 email 데이터가 추가된다.

만약 단순하게 userAge와 userEmail을 합쳐서 새로운 객체 데이터를 만들고 싶다면 어떻게 해야될까?

Object.assign({}, userAge, userEmail)처럼 빈 객체를 넣어주면 된다! 그럼 userAge는 더 이상 대상 객체가 아닌 출처 객체가 됨으로써 원본 데이터 손상 없이 새로운 객체 데이터를 만들어 낼 수 있다.

하지만 메모리 주소는 다르기 때문에 target과 userAge를 일치연산자로 비교했을때 false가 나온다.

2.2 Object.keys()

Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환한다.

const user = {
  name: '김멋사',
  age: 10,
  email: 'theemail@gmail.com'
}

const keys = Object.keys(user)
console.log(keys)

console.log(user['email'])

const values = keys.map(key => user[key])
console.log(values)