Front-end Developer

0%

200227 러버덕 정리

암묵적 타입 변환과 명시적 타입 변환

암묵적 타입 변환: 자바스크립트 엔진이 개발자의 의도와는 상관없이 문맥에 따라 타입을 문자열, 숫자와 같은 원시타입의 값으로 강제 변환하는 것.

1
2
3
4
1 + '1' = ?
//숫자 1과 문자열 1을 더하면 에러가 날 것 같지만
//자바스크립트 엔진은 피연산자가 모두 문자열일 것이라고 간주하여
//둘을 더한 `문자열 11`이라는 결과를 반환한다.

명시적 타입 변환: 개발자의 의도에 따라 타입을 강제 변환하는 것으로 표준 빌트인 생성자 함수(string,number,boolean)을 new 연산자 없이 호출하는 방법, 빌트인 메소드를 사용하는 방법, 암묵적 타입 변환을 이용하는 방법 등이 있다.

1
2
console.log(1 + "");
//숫자 타입 1에 빈 문자열을 더하면 `문자열 1`이라는 결과가 출력된다.

단축평가: 논리곱, 논리합

단축평가는 표현식을 평가하는 도중에 결과가 확정되면 나머지 평가 과정을 중단하는 것이다. 논리곱과 논리합은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.

논리곱(&&)
논리곱은 두 개의 피연산자가 모두 true일 때만 true를 반환한다. 둘 중 하나라도 false일 때는 false가 반환된다.

true && anything //anything
false && anything //false

1
"cat" && "dog"; //dog

위의 예시와 같은 상황에서 첫 번째 피연산자인 cat을 평가했을 때 true로 반환되지만 논리곱(&&)은 두 피연산자 모두 true일때 true이므로 두 번째 피연산자까지 평가를 해보아야한다. 따라서 두 번째 피연산자인 dog을 검사한 후 dog를 반환한다.

논리합(||)
논리합은 두 개의 피연산자 중 하나만 true여도 true를 반환한다. 두 개의 피연산자 모두 false인 경우에는 false를 반환한다.

true || anything //true
false || anything //anything

1
"Cat" || "Dog"; // 'Cat'

위의 예시와 같은 상황에서 첫 번째 피연산자인 cat을 평가했을 때 true이기 때문에 두 번째 피연산자인 Dog를 평가하지 않고 바로 Cat을 반환한다. 논리합(||)은 두 피연산자 중 하나만 true여도 true를 반환하기 때문이다.

객체-객체 리터럴

객체: 다양한 타입의 값(원시 값 또는 다른 객체)들을 하나의 단위로 구성한 복합적인 자료 구조로 키(key) 값(value)으로 구성된 프로퍼티(property)들의 집합이라고 할 수 있다.

1
2
3
키워드 식별자 = {
key(속성) : value(값) //프로퍼티
}

객체 리터럴: 객체를 생성하는 가장 간단한 방법이다. 중괄호 내에 0개 이상의 프로퍼티를 정의하고, 값으로 평가되는 표현식이기 때문에 중괄호 뒤에 세미콜론을 붙여야한다.

1
var empty = {};

값에 의한 전달, 참조에 의한 전달

원시 값은 변경 불가능한 값이기 때문에 값을 복사하여 전달하고, 객체는 변경이 가능한 값이기 때문에 원본의 참조 값을 복사하여 전달한다.

값에 의한 전달

1
2
3
4
5
var score = 80;
copy = score;

console.log(score); //80
console.log(copy); //80

score라는 변수에 숫자값 80을 할당하고, copy라는 변수에 변수 score를 할당하면 원래 있던 score가 가지고 있던 숫자값 80이 복사되어 새롭게 할당되는 변수 copy에 전달된다. 원시값은 변경이 불가능하기 때문에 재할당 시 새로운 메모리 공간을 차지하는 것이다. 즉 score의 80과 copy의 80은 다른 메모리 공간에 저장된 다른 값이다.

1
2
3
4
socre = 100;

console.log(score); //100
console.log(copy); //80

score에 새로운 숫자 값 100을 재할당하면 100이라는 값을 가진 변수 score가 새로운 메모리 공간에 저장된다. 따라서 score의 값을 변경했다고 하여 copy도 변경되는 것이 아니라 score의 값만 변경된다.

참조에 의한 전달
객체는 변경 가능한 값이기 때문에 변수에 객체를 할당하면 생성된 객체는 참조값을 가진다. 이 참조값은 변수에 생성된 객체가 실제로 저장된 메모리 공간의 주소를 말한다. 따라서 변수 참조 시 원시 값에 바로 접근하는 원시값과 달리 객체는 메모리에 저장되어 있는 값을 참조하여 실제 객체에 접근한다.

1
2
3
var person = {
name: "lee",
};

person이라는 식별자가 붙은 공간에 참조값이 생성되고, 이 참조값은 객체를 가리키고 있다. 따라서 console.log(person);라고 하면 참조값이 객체에 접근하여 {name:'lee'}를 반환한다. 재할당이 이루어지지 않는다면 객체에 동적으로 값을 추가하여도 참조값은 여전히 동일하며 객체에만 값이 추가된다.

그런데 만약 참조 값을 복사한다면 어떻게 될까?

1
2
3
4
5
var person = {
name: "lee",
};

var copy = person;

위와 같이 person을 다른 변수 copy에 할당하면 객체이기 때문에 원본 값이 아닌 원본의 참조 값이 복사되어 전달된다. 새롭게 생성된 변수 copy는 copy라는 식별자가 붙은 새로운 참조값(메모리 주소가 다르다.)을 가지고 있지만 동일한 객체 {name:'lee'}를 가리키고 있다. 따라서 어느 한쪽이 값을 변경하면 서로에게 영향이 생긴다.