#4 심볼
·
JavaScript/중급
심볼 (Symbol)자바스크립트에서 객체(Object)의 프로퍼티 키는 보통 문자열로 취급된다.예를 들어 숫자 1, 불리언 false를 키로 써도 내부적으로는 "1", "false" 같은 문자열 키가 된다. 그런데 협업/라이브러리 사용 상황에서 내가 추가하는 키가 기존 키와 충돌하면 문제가 생길 수 있다.이때 Symbol은 매번 새로 만들어지는 고유한 값이라서, 키 충돌을 원천 차단하는 용도로 쓴다.Symbol 만드는 법: Symbol()심볼은 객체가 아니라 원시 타입(primitive)이라서 new Symbol()처럼 new키워드를 쓰지 않는다.const a = Symbol('id');const b = Symbol('id');console.log(a === b); // falseSymbol('id)의 ..
#3 객체 메소드, 계산된 프로퍼티
·
JavaScript/중급
계산된 프로퍼티일반적인 객체는 이렇게 고정된 키를 쓴다.const user = { name: "Mike", age: 30}; 그런데 이 키 이름을 변수나 식으로 만들고 싶을 때가 있다.그때 사용하는 것이 대괄호[ ] 이다.let a = "age";const user = { name: "Mike", [a]: 30, // a가 "age" 이므로 결과는 age: 30 [1 + 4]: 5, // "5": 5 (숫자 계산 결과가 키가 됨) ["굽네" + "치킨"]: "hello" // "굽네치킨": "hello"}; 왜 유용한가?함수로 원하는 키를 받아 객체를 만들어 낼 수 있다.function makeObj(key, val) { return { [key]: v..
#2 생성자 함수
·
JavaScript/중급
우리는 개체 만드는 것을 배웠다.let user = { name : 'Mike'; age : 30;}이렇게 만든 것을 객체 리터럴 이라고 한다. 그런데 개발을 하다 보면 비슷한 객체를 여러 개 만들어야 되는 상이 발생한다.이때, 필요한 것이 생성자 함수이다.생성자 함수생성자 함수는 다음과 같이 작성한다.function User(name, age) { this.name = name; this.age = age;}let user1 = new User('Mike',30);let user2 = new User('Jane',22);let user3 = new User('Tom',17);생성자 함수는 보통 첫글자를 대문자로 해 함수를 만든다.new 연산자를 사용해 함수를 호출한다.생성자 함수에..
#1 변수, 호이스팅, TDZ(Temporal Dead Zone)
·
JavaScript/중급
변수기초 시간에 let, const를 배워보았다. 이번엔 var 키워드에 대해서 알아보자.varvar는 한번 선언된 변수를 다시 선언이 가능하다.var name = 'Mike';console.log(name); // Mikevar name = 'Jane';console.log(name); // Jane이와 같이 name이 2번이 선언되어도 오류가 발생하지 않는다.같은 상황에서 let은? 오류를 발생시킨다. var는 선언하기 전에도 사용이 가능하다console.log(name); // undefinedvar name = 'Mike';오류를 발생시키지 않는데 이유가 뭘까? var는 아래 코드와 같이 동작한다.var name;console.log(name);name = 'Mike';var로 선언한 모든 변수..