Modern JavaScript DeepDIve - 2

jkky98·2024년 2월 1일
0

JavaScript

목록 보기
2/6

타입 변환 & 단축 평가

암묵적 타입 변환

앞선 포스팅에서 암묵적 타입 변환에 대해 다루었다. 암묵적 타입 변환은 자바스크립트 엔진의 특성으로, 개발자의 의지가 코드에 명백히 드러나지 않는다.(개발자가 직접 타입변환을 한 것이 아니므로) 그렇다면 무결성을 잘 지키기 위해 우리는 명시적 타입 변환만 사용하도록 해야할까? 가독성 측면에서 (10).toString()보다 10+''이 더욱 간결하고 이해하기 쉽기 때문이다.

'10' + 2 // => '102'
5 * '10' // => 50
!0 // => true

위의 예시는 암묵적 타입변환이 이루어진 과정을 보여준다. +의 경우에 산술 연산자이기도 하지만 문자열 연결 연산자로 동작한다. 이때 문자열 연결 연산자를 우선으로, 피연산자 중에서 문자열이 아닌 타입을 문자열 타입으로 암묵적 타입 변환한다. 반면에, - * % 같은 산술 연산자의 역할은 숫자 값을 만들어야 하므로 숫자가 아닌 피연산자를 숫자로 암묵적 타입 변환한다. 서술에서 암묵적 타입변환이 일어날 수 없는 값들에 대해서는 어쩔 수 없이 NaN을 반환한다.

명시적 타입 변환

명시적 타입 변환은 사용하는 생성자 함수들만 잘 기억해두자.

// to string type
String(1)
(1).toString();
1+''

// to number type
Number('0')

// to boolean
Boolean(1)

단축 평가

논리곱(&&) 연산자는 두 개의 피연산자가 모두 true일 때 true를 반환한다. 좌항부터 검사해서 우항을 마지막으로 검사한다. 만약 좌항부터 false라면 좌항에서 검사를 끝내므로 좌항 false를 반환한다. 만약 모두 통과라면 마지막 항을 반환할 것이다. 논리합도 좌항->우항으로 생각해서 반환되는 것을 생각하면 된다.

//1
function getStringLength(str) {
  return str.length
}
//2
function getStringLength(str) {
  str = str || ''
  return str.length
}

만약 위의 함수에 아무 인자도 넣지 않는다면 str.length는 불가능한 코드이다. 아무 매개변수도 넣지 않았을 때 undefined가 할당되며 undefined.length는 불가능하므로 Typeerror가 발생할 것이다. 그래서 이런 경우 아래와 같이 아무 인자도 들어오지 않았을 때를 대비할 수 있다. 어떻게 보면 명시적 타입 설정이다.

객체

자바이전에 배운 언어 중 하나인 파이썬 또한 객체지향 언어이다. 프로그래밍을 처음 시작할 때 배우는 사람들을 가장 괴롭히는 단어중 하나이다. 일단 한글 뜻으로도 객체라는 단어에 대한 감이 잘 오지 않는다. 개인적으로는 객체 지향이라는 것은 좀 더 뒤에서 학습하면서 스스로 깨달을 수 있다고 생각한다. 처음 배우는 이들에게 이것을 이해시키겠다고 열심히 설명하는 것은 흥미만 떨어뜨리는 일이 아닌가 싶다.

자바를 처음 배울 때 사용하는 값들 대부분이 사실은 객체이다. 객체이기에 그 값뒤에 메서드를 사용하는 등의 추가 작업이 가능한 것이다. 문자열은 문자열 객체이고 숫자는 숫자 객체이다. 그러므로 둘은 구분되는 것이다. 구분되는 모든 것은 객체라 봐도 무방할 것이다. 하지만 이 설명이 초보자들에게는 결국 혼란이다. 분명하다.

  • 프로퍼티: 객체의 상태를 나타내는 값(data)
  • 메서드: 프로퍼티를 참조하고 조작할 수 있는 동작(behavior)

인스턴스
인스턴스는 클래스에 의해 생성되어 메모리에 저장된 실체이다. 말이 굉장히 추상적이다. 클래스는 설계도 같은거고 인스턴스는 쉽게 말하면 변수이다. 예로 Dog(변수) = SayHello()(클래스)라는 코드가 있을 때 변수할당의 문법이지만 클래스를 할당받은 Dog는 인스턴스가 되는 것이다.

아 그러면 Dog = 'wallwall'그냥 변수인거죠?라고 질문한다면 'wallwall'또한 클래스라는 설계도 아래에 있는 표현이며 Dog는 인스턴스가 되는 것이다. 생긴게 다른 이유는 언어엔진의 특성상(우리에게 편리함을 주기 위해) 불편함을 없애기 위함일 것이다. 항상 사용하는 것들에 대해 엔진이 미리 클래스를 만들어 놓지 않았더라면 우리는 문자열을 하나 사용하는데도 엄청난 코드길이의 클래스를 작성하고 시작해야할 것이다. 모든 것은 객체라 했다. 원시값 이외에 구분되는 모든 것은 객체라 했다. 구분(예로 문자열vs숫자)이 가능한 이유는 각 객체들은 클래스라는 설계도 아래에서 존재하기 때문이다. 자바 엔진의 문자열 클래스, 자바 엔진의 숫자 클래스 아래에서 존재하는 것이다. 우리는 직접 이러한 설계도를 작성하지 않고 많이 쓰는 주요한 것들에 대해서는 프로그래밍 언어 엔진이 미리 만들어두었다고 보면 편할 것이다.

객체 리터럴

객체 리터럴은 객체를 생성하기 위한 표기법이다. 바로 코드를 보자.

var person = {
  name: 'Jeehee'
  sayHello: function () {
    console.log('Hello! Im ${this.name}.');
  }
};
var key = 'age'
person[key] = '26' // 프로퍼티 키 동적 생성
var empty = {} // 빈 객체

객체 리터럴을 이해하기 위해 두 개의 객체를 만들었다. 중괄호내에 key:value 형식의 프로퍼티를 만들었고, sayHello를 키로 하여 값을 메서드로도 만들었다. 그리고 그 안에서 프로퍼티를 사용하기 위해 this.라는 표현도 사용했다. empty는 빈 객체로도 만들 수 있다는 것을 표현했다. 가장 중요한 것은 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구분된다는 것이다.

  • 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
  • 프로퍼티 값 : 자바스크립트의 사용가능한 모든 값

프로퍼티 값은 모든 것을 포함할 수 있기에 함수도 가능하다. 하지만 일반 함수와 구별하기 위해 우리는 객체 내에 프로퍼티 값으로 존재하는 함수를 메서드라고 부른다.

프로퍼티 접근법 두 가지

// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Jeehee
// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['age']); // 26
// undefined
console.log(person.what); // undefined

함수

//함수 선언문
function add(x, y) {
  return x + y ;
}
//함수 표현식
var sub = function (x,y) {
  return x - y ;
}

자바스크립트의 함수의 경우에는 함수 선언문을 사용할 것을 권장한다. 함수 선언문의 생성 시점은 런타임 이전의 소스평가 과정에서 변수 호이스팅시점이다. 즉 함수 선언문은 함수 호이스팅의 특징을 가진다. 그러나 함수 표현식의 경우 위의 예시에서 sub변수로 우선적으로 변수호이스팅(undefined초기화)가 이루어지기 때문에 함수 표현식 이전에 함수를 사용할 수 없다.(책에서 반대로 서술되어 있다....)

프로그래밍시 함수의 활용
함수에서 매개변수의 최대 개수는 명시적으로 제한되어 있지는 않지만, 매개변수가 많아지면, 함수의 사용법을 이해하기 어렵게 하고 실수를 발생시킬 수 있고 유지보수성이 매우 나빠진다. 이상적인 매개변수 개수는 0개이며, 적을수록 좋다.

profile
자바집사의 거북이 수련법

0개의 댓글