자바스크립트 기초

김주언·2022년 5월 20일
js

자바스크립트

목록 보기
1/8

1. 타입과 구문

1.1 랩퍼 객체

const str = 'javascript'
console.log(str.length); //10

str 변수는 문자열 원시 타입인데 마치 객체처럼 length 프로퍼티에 접근함. 자바스크립트는 문자열의 프로퍼티에 접근 시 내부적으로 문자열 값을 가지고 임시 객체로 변환한다. 그리고 프로퍼티 접근이 종료되면 생성된 객체는 메모리에서 제거

위와 같은 과정을 박싱이라고 한다. (숫자, 불리언 동일)
박싱과정에서 생성되는 임시 객체를 랩퍼객체라고 한다.

1.1.1 언박싱

객체를 원시타입으로 변환, valueOf()사용하여 호출한다.

1.2 연산자

1.2.1 단락 평가 (short circuit)

AND연산자 OR연산자는 단락평가 특징을 가짐. AND는 앞의 평가 결과가 거짓이면 뒤의 평가결과와 상관없이 false, OR은 앞이 참이면 뒤는 상관없이 true

1.2.2 동등연산자 (==)

: 값의 동등함을 판단하는 연산자

  • 객체의 참조 값이 동일
  • 피연사들의 타입이 달라도 같은 값을 반환할 수 있는 경우

위의 경우 ==는 두 값이 동등하다고 판단한다.

console.log(1 == true) // true

위의 코드에서 true가 1로 변환되어 같은 값을 반환하여서 참이 됨. 이러한 동작을 암시적 강제변환이라고 한다.

1.2.3 일치연산자 (===)

==와 달리 암시적 강제변환을 수행하지 않는다. 따라서 타입이 다르면 무조건 다른 값으로 판단

2. 타입변환과 함수

2.1 타입변환

자바스크립트의 타입 변환

  • 명시적 강제 변환 : 의도적 타입 변환
  • 암시적 강제 변환 : 표현식의 평가 중 타입이 변환 되는 것

2.1.1 명시적 타입 변환

문자열로 변환 : String(), toString()

console.log(String(3))		// '3'
console.log(String(false))	// 'false'
console.log(String(null))	// 'null'

ToString 추상 연산을 따른다.

const num = 4
console.log(num.toString()) //'4'
String() 과toString()의 차이
console.log(String(null))		// 'null'
console.log(String(undefined))	// 'undefined'

null.toString() //TypeError
undefined.toString() //TypeError

숫자로 변환 : Number(),parseInt()

: parseInt()는 문자열만 대상으로 변환한다.

2.1.2 객체의 원시 타입 변환

: 객체를 문자열로 변환하거나 숫자로 변환하거나

  • valueOf()
  • toString()

객체가 문자열로 변환되는 과정

  1. 객체에 정의된 toString() 메서드 호출. (별도로 정의하지 않았으면 Object.prototype.toString()호출하며, 이 메서드의 결과값은 '[Object object]'이다)
  2. 1단계의 결과가 원시 타입이라면 그 결과를 문자열로 변환하여 반환하고, 그렇지 않으면 valueOf() 실행 (마찬가지로 별도로 정의하지 않았으면 프로토타입)
  3. 2단계의 결과가 원시 타입이라면 문자열로 변환하여 반환하고, 그렇지 않으면 타입에러 발생

객체가 숫자로 변한되는 과정

  1. valueOf() 실행
  2. 1단계의 결과가 원시 타입이라면 그 결과를 숫자로 변환하여 반환하고, 그렇지 않으면 toString() 실행
  3. 2단계의 결과가 원시 타입이라면 숫자로 변환하여 반환하고, 그렇지 않으면 타입에러 발생

2.1.3 암시적 강제 변환

: 연산 중 내부적으로 타입 변환하는 것

  • 덧셈연산
  • 동등 연산
  • 비교 연산 등

2.2 함수

2.2.1 this

: this는 읽기 전용 값으로, 함수를 호출한 방법에 의해 값이 달라진다

전역 실행 컨텍스트에서 this는 항상 전역 객체를 참조.
전역 실행 컨텍스트는 자바스크립트 엔진이 코드를 실행할 때 처음으로 생성되는 컨텍스트이다.

일반함수에서 this

전역 실행 컨텍스트에서 this 바인딩은 항상 전역 객체를 참조한다. 전역 실행 컨텍스트는 자바스크립트 엔진이 코드를 실행할 때 처음으로 생성되는 컨텍스트

전역 객체는 자바스크립트 실행 환경마다 다르다. (브라우저, 노드 환경)

생성자 함수에서 this

객체를 생성하고 해당 객체를 this에 바인딩한다. 생성된 객체는 생성자 함수의 prototype 프로ㅠㅓ티에 해당하는 객체를 프로토타입으로 설정한다.

메서드에서 this

일반함수와 객체의 프로퍼티로서의 함수(메서드)는 바인딩 또한 다르게 동작. 메서드를 호출하면 this는 해당 메서드를 소유하는 객체로 바인딩 됨

메서드를 호출하는 방법에 따라 this가 달라진다!

const obj = {
  name: 'obj1',
  greeting(){
    return `hello, ${this.name}`;
  }
}
const greeting = obj.greeting;
console.log(obj.greeting());	// hello, obj1
console.log(greeting());		// hello, undefined

console.log(greeting());는 함수의 컨텍스트가 어딘지 알 수가 없어서 undefined를 반환한 것.

2.2.2 call(), apply(), bind()

자바스크립트 함수의 내장 메서드를 이용하여 this로 바인딩될 객체 변경하기 가능하다. 명시적 바인딩

call(), apply()

: 어떤 함수를 다른 객체의 메서드처럼 호출할 수 있게 해준다. this를 특정 객체에 바인딩하여 함수를 호출하는 역할 수행

call()
첫번째 인자 이후의 인자들은 모두 호출하는 함수로 전달된다.

const obj = {
  name: 'obj1',
  greeting(){
    return `hello, ${this.name}`;
  }
}
const greeting = obj.greeting;
console.log(greeting().call(obj));		// hello, obj1 

const obj2 = {
  name: 'kim'
}

function getUserInfo(age, country){
  return `${this.name}, age: ${age}, country: ${country}`;
}

console.log(getUserInfo.call(obj2, 20, 'korea')) //  name: 'kim', age:20, country:korea

apply()
call()과 동일하지만 호출하는 함수에 전달할 인자들을 배열로 전달

const obj2 = {
  name: 'kim'
}

function getUserInfo(age, country){
  return `${this.name}, age: ${age}, country: ${country}`;
}

console.log(getUserInfo.apply(obj2, [20, 'korea']))

bind()

call(), apply()와의 차이점

  • bind()는 함수의 this 바인딩을 영구적으로 변경한다
  • this를 바인딩하여 함수를 호출하는 것이 아니라 새로운 함수를 반환하는 것

bind()는 함수가 어디서 어떻게 호출되는지와 상관없이 this를 고정하고자 할 때 사용


const obj1 = {
  name: 'kim'
}

const obj2 = {
  name: 'lee'
}

function getUserInfo(age, country){
  return `${this.name}, age: ${age}, country: ${country}`;
}

const bound = getUserInfo.bind(obj1)

console.log(bound(20, 'korea')) //  name: 'kim', age:20, country:korea
console.log(getUserInfo.apply(obj2, [20, 'korea'])) ///  name: 'kim', age:20, country:korea

2.2.3 화살표 함수와 렉시컬 this

화살표함수는 this를 화살표함수를 둘러싼 렉시컬 스코프에서 받는다. 이 this는 변경되지 않음

렉시컬 스코프는 JS 엔진이 변수를 찾는 검색 방식에 대한 규칙
함수를 어디에 선언했는지에 따라 결정된다.
profile
김주언
학생 점심을 좀 차리시길 바랍니다
다음 포스트

자바스크립트 기초 (+)

0개의 댓글