코드스테이츠 프리코스 2주차 후기(1)

*코드스테이츠 프리코스 33기를 수강하면서 2019년 5월 7일(화)에 학습한 내용을 정리한 포스팅입니다.

*https://soldonii.github.io에서 작성한 글을 티스토리로 옮겨온 포스팅입니다.

*자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :)

---

1. 변수의 전달(Passing Variables)

코드 스테이츠 Pre course 33기 2주차 화요일(2019-05-07)에는 변수의 전달과 문자열 다루기에 대해서 배웠다.

변수의 전달에서는 원시 타입 변수와 참조 타입 변수에 대해서 다루는데, 이 내용이 이해가 될 듯 말 듯하여 정리된 내용이 정확하지 않을 수 있다. 추가로 공부하면서 언젠가 100% 완벽하게 이해가 되면, 그 때 정확한 내용으로 수정하는 것으로 하고, 우선은 현재 이해된 만큼 정리해본다. :)

• 데이터 타입 중, number, string, boolean, null, undefined 등의 데이터를 Primitive Type(Scalar Type), 원시타입이라 부른다.
  • 원시타입 데이터는 변수에 특정 값이 할당될 때, 메모리 상에 고정된 크기로 저장이 되고, 해당 변수가 할당한 원시 데이터 값을 보관하는 형태이다.
• 객체, 배열, 함수는 Reference Type, 참조타입이라 부른다.
  • 참조타입 데이터는 값을 변수에 할당할 때, 할당된 값이 변수에 직접 보관되지 않고, 변수에는 값에 대한 참조값, 주소값만 할당되어 있다.

변수를 복사할 때, 원시타입/참조타입에 따라서 변수 복사의 결과가 달라진다.

// 원시타입 변수 복사의 case
let a = 100; // 변수 a에 원시타입인 number를 할당
let b = a; // 변수 b에도 마찬가지로 원시타입인 number가 할당됨
a = 99; // 변수 a의 값을 99로 변경
console.log(a); // 99가 출력된다.
console.log(b); // 100이 출력된다.// 참조타입 변수 복사의 case

let k = {name : 'hyunsol'}; // 변수 k에 참조타입인 객체를 할당
let r = k; // 이렇게 선언하는 순간, 변수 r에는 변수 k에 할당된 참조 메모리 주소가 할당된다.(주소값)
k.name = 'soldonii'; // 객체의 값을 'hyunsol'에서 'soldonii'로 변경해주었다.
console.log(k.name); // 'soldonii'가 출력된다.
console.log(r.name); // 마찬가지로 'soldonii'가 출력된다.

위 코드의 경우, 최초 a에는 100, b는 a의 값인 100이 할당된다. a에 할당된 데이터 타입은 number이므로 원시타입인 상태이다. 원시타입이므로 a에는 100이라는 값이 그대로 저장되어 있다. b는 a와 동일하고, 곧 b에도 100이라는 원시타입 데이터가 할당된 상태이다. 이 상태에서 a에 99를 다시 할당했을 때, a에 할당된 99는 변경되지만, b에 할당된 100은 변경되지 않는다. 왜냐하면 b에 할당된 number는 원시타입이므로, a 변수의 주소값을 가져온 것이 아니라, 데이터 값 원본을 그대로 할당한 상태이기 때문이다.(내가 이해한 것이 맞을까...?ㅠㅠ)

// 참조타입 변수 복사의 case
let k = {name : 'hyunsol'}; // 변수 k에 참조타입인 객체를 할당
let r = k; // 이렇게 선언하는 순간, 변수 r에는 변수 k에 할당된 참조 메모리 주소가 할당된다.(주소값)
k.name = 'soldonii'; // 객체의 값을 'hyunsol'에서 'soldonii'로 변경해주었다.
console.log(k.name); // 'soldonii'가 출력된다.
console.log(r.name); // 마찬가지로 'soldonii'가 출력된다.

위 코드를 이해해보자. 최초 k라는 변수에 참조타입 변수인 객체가 할당되어 있다. 따라서 변수 k에는 객체 값 자체가 할당되어 있지 않고, 그 값을 보관하고 있는 메모리 주소값이 할당되어 있다.(?) 이 상황에서 변수 r에 변수 k를 할당하는 것은 곧 변수 k에 할당되어 있는 메모리 주소값을 할당하는 것이다. 이 상태에서 객체의 property를 바꾸는 행위는, 주솟값에는 어떤 영향도 미치지 않고, 단지 주소값에 보관되어 있는 값의 property를 바꾸는 것이다. 따라서 console.log(k.name)과 console.log(r.name) 모두 같은 주소값에 보관되어 있는 객체를 불러오게 되므로, 동일한 결과 soldonii가 출력된다.

 

코드스테이츠 수업에서 다룬 예시로 조금 더 들어가보자.

// 참조타입 변수의 사례 1 - 원본 값 자체가 변경되는 경우
let obj = {item : '변경되지 않음'}; // 변수 obj에 참조타입인 객체를 할당
console.log("before : ", obj); // "before : {item : '변경되지 않음'}"이 출력된다.

function referenceCopy(ref) { // 함수 선언
 ref.item = '변경됨'; // 최초에 선언된 원본 객체를 변경한다.
}

referenceCopy(obj); // 선언한 함수를 실행시킨다. argument로 obj가 들어왔다.
console.log("after : ", obj); // "after : {item : '변경됨'}"이 출력된다.// 참조타입 변수의 사례 2 - 원본 값은 그대로인 경우
let obj = {item : '변경되지 않음'};
console.log("before : ", obj);

function referenceCopy(ref) { // 여기까지는 위와 동일하다.
 ref = {item : '변경됨'}; // parameter에 들어온 argument의 값 자체를 참조타입인 객체로 바꾼다.
}

referenceCopy(obj); // 선언한 함수를 실행시킨다. argument로 obj가 들어왔다.
console.log("after : ", obj); // "after : {item : '변경됨'}"이 출력된다.

---

2. 문자열 다루기(String Method)

• Method : 함수가 객체 안에 속해 있을 경우, 이를 method라고 부른다.
• str[i] ➙ 문자열의 경우, index로 해당 값에 접근은 가능하지만, 쓸 수는 없다.(read-only)
  • 배열에서는 arr[0] = 100;라고 하면 배열의 0번째 index에 위치한 값이 100으로 변경되지만, let string = 'codestates'라고 했을 때, str[0] = 'c'로 호출은 가능하지만, str[0] = 'g'라고 선언한다고 'godestates'가 되지는 않는다.
• str.split(seperator) : 구분자를 기준으로, 문자열을 배열로 return하는 메소드. IMMUTABLE

let str = '블로깅 생각보다 너무 오래걸려요.';
let resutl = str.split(); //separator에 아무것도 입력하지 않았다.
console.log(result1); // ["블로깅 생각보다 너무 오래걸려요."]라는 배열을 return

let result2 = str.split(""); // separator에 공백을 입력했다.
console.log(result2); // [블,로,깅, ,생,각,보,다, ,너,무, ,오,래,걸,려,요,.]라는 배열을 return

let result3 = str.split(" "); // 띄어쓰기를 separator로 입력했다.
console.log(result3); // [블로깅, 생각보다, 너무, 오래걸려요.]라는 배열을 return

• str.substring(start, end) : start 인덱스부터 end-1 인덱스까지의 문자열을 return하는 메소드. IMMUTABLE

 

let str1 = "하루가 다 갔네요. 흑흑.";
let result1 = str1.substring(0); // "하루가 다 갔네요. 흑흑"이 return
let result2 = str1.substring(0, 2); // "하루"가 return
let result3 = str1.substring(4, 0); // "하루가 "가 return(end가 start보다 작을 경우 거꾸로 실행)

• str.toLowerCase(), str.toUpperCase() : 문자열을 소문자로, 대문자로 바꿔주는 메소드. IMMUTABLE

let str2 = "thisisneverthat";
let str3 = "I like EATING";
console.log(str2.toUpperCase()); // "THISISNEVERTHAT"이 출력
console.log(str3.toLowerCase()); // "i like eating"이 출력
console.log(str3.toUpperCase()); // "I LIKE EATING"이 출력let str = "Blue Whale";

• str.includes(searchValue) : 문자열에 searchValue가 존재하면 true, 없으면 false를 return.(구형 웹브라우저에서는 지원이 안된다고 들었다.)

"Blue Whale Whale".indexOf("Whale"); // 5("Whale"이라는 문자열이 최초 등장한 index가 기준이다.)
"canal".indexOf("a"); // 1(앞에서부터 찾으면 "a"는 1번째 index에 위치한다.)
"canal".lastIndexOf("a"); // 3(뒤에서부터 찾으면 "a"는 3번째 index에 위치한다.)

// return값으로 해당 문자열의 index말고, searchValue가 문자열에 존재하는지 여부를 알고 싶으면,
if (str.indexOf("k") !== -1) { // 변수 str에 "k"가 없지 않을 경우(존재할 경우),
 console.log("k가 str에 존재합니다.");} // "k가 str에 존재합니다."라고 출력시킨다.

• str.indexOf(searchValue) : searchValue와 일치하는 문자열을 찾았을 때, 해당 문자열이 시작되는 index를 return한다. searchValue가 문자열 내에 없을 경우, -1을 return한다. lastIndexOf는 문자열의 뒤쪽에서부터 찾는다.

let str = "Blue Whale";
str.includes("Blue"); // true
str.includes("blue"); // false