mystery

자바스크립트는 객체의 프로퍼티 키로 문자형과 심볼형만을 허용합니다. Symbol ? 심볼은 유일한 식별자를 만들고 싶을 때 사용합니다. let test = Symbol('테스트 심볼') console.log(test) // Symbol(테스트 심볼) 심볼은 Symbol() 로 만들 수 있고, 괄호안에 '심볼 이름' 이라고 불리는 심볼의 대한 설명을 붙일 수 있습니다. 심볼은 유일성이 보장되는 자료형입니다. 때문에 심볼 설명이 동일한 여러 개의 심볼을 만들어도 각 심볼값은 다릅니다. let test1 = Symbol('테스트 심볼') let test2 = Symbol('테스트 심볼') console.log(test1 == test2) // false console.log(test1 === test2) //..

옵셔널 체이닝( ?. )은 프로퍼티가 없는 중첩객체에 에러 없이 접근하고 싶을 때 사용합니다! let user1 = { name:{ firstName: 'John', lastName: 'Lee' } } let user2 = {} console.log(user2.name.firstName) // Cannot read properties of undefined 위 코드에서는 아직 이름 정보가 없는 객체에서 값을 가져오려 했기 때문에 에러가 발생했습니다. 옵셔널 체이닝이 등장하기 전에는 이런 에러를 막기위해 &&연산자를 사용했습니다. let user1 = { name:{ firstName: 'John', lastName: 'Lee' } } let user2 = {} console.log(user2 && use..

개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다. 이럴 때 사용하는 것이 new연산자와 constructor함수 입니다. constructor ( 생성자 함수 ) 생성자 함수와 일반 함수에 기술적인 차이는 없습니다. 대신 생성자 함수에는 2가지 관례가 있습니다. 1. 함수 이름의 첫 글자는 대문자로 시작합니다. 2. 반드시 'new' 연산자를 붙여 실행합니다. function User(name){ this.name = name; this.isGood = false; } let user1 = new User("Lee"); console.log(user1.name)// Lee console.log(user1.isGood)// false new 함수명( ... ) 을 사용해서 함수를 ..

객체는 실존하는 개체를 표현하고자 할 때 사용합니다! * 개체(entity)란? 현실 세계에서 조직을 운영하는 데 꼭 필요한 사람이나 사물과 같이 구별되는 모든 것을 의미한다. * 메서드(method)란? 객체의 프로퍼티에 함수를 할당할 수 있습니다. 객체 프로퍼티에 할당된 함수를 method 라고 부릅니다! method 만들기 1. 객체 밖에서 함수 표현식으로 생성 let user = { name : 'Lee', age : '26' } user.hi = function(){ console.log(`hi! ${user.name}`) } user.hi(); // hi! Lee 2. 이미 정의된 함수를 사용해서 생성 let user = { name : 'Lee', age : '26' } function hi..

자바스크립트에서 우리가 만든 모든 것 ( 원시값, 객체 , 함수 등 ) 들은 메모리를 차지합니다. 자바스크립트 엔진 안에서는 우리가 만든 것중 더 이상 쓸모 없어진 것 들을 처리하는 가비지 컬렉터 ( garbage collector ) 가 끊임없이 동작합니다 ! 가비지 컬렉션 기준 자바스크립트는 도달 가능성 이라는 개념을 통해 메모리 관리를 합니다. 도달 가능한 값은 어떻게든 접근,사용이 가능한 값을 의미하는데, 도달 가능한 값이라면 메모리에서 삭제되지 않습니다. root( 루트 ) root라고 불리는 값들은 태생부터 도달 가능한 값 이기 때문에 명백한 이유 없이 삭제되지 않습니다. root 의 예시 1. 현재 함수의 지역 변수와 매개변수 2. 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 ..

객체와 원시타입의 가장 큰 차이점은 원시 타입이 '값 그대로' 저장되고 복사되는 반면에 객체는 '참조에 의해' 저장되고 복사된다는 것입니다. 참조에 의한 값 복사 ( 객체 ) 문자열을 할당한 변수를 복사한 결과입니다. let msg = "hi" let phrase = msg phrase = "hello" console.log(msg)// hi console.log(phrase)// hello 각자 다른 문자열이 출력 되었습니다. 객체를 할당한 변수를 복사한 결과입니다. let msg = { msg : 'hi'} let phrase = msg phrase.msg = 'hello' console.log(msg)// {msg: 'hello'} console.log(phrase)// {msg: 'hello'} ..

객체 자바스크립트의 8가지 자료형중 객체형을 제외한 나머지 7개는 오직 하나의 데이터만 담을 수 있어 '원시형'( primitive type )이라고 부릅니다. 오늘 공부할 객체형은 원시형과는 다르게 다양한 데이터를 담을 수 있습니다. 객체를 만드는 방법은 두 가지 입니다. let person = new Object();//객체 생성자 문법 입니다. let person = {};//객체 리터럴 문법 입니다. 상수(const) 객체도 수정할 수 있습니다. 아래에서 person의 값 자체를 수정하려고 할 때만 에러가 발생합니다. const person = { name: 'Lee', } person.name = 'kim' // 수정 가능합니다 ! person = ["Lee"] // TypeError: Assi..

자바스크립트는 끊임없이 진화하는 언어이기 때문에 새로운 제안이 정기적으로 등록, 분석되고 가치가 있다고 판단되는 제안은 여러 단계를 거쳐 명세서에 등록됩니다! 명세서에 등록된 지 얼마 안 된 기능을 사용해 코드를 작성하다 보면 특정 엔진에서 우리가 작성한 코드를 지원하지 않는다는 걸 알게 되는 경우가 있습니다. 명세서 내 모든 기능을 모든 엔진이 구현하고 있지 않기 때문입니다! 이럴 때 바벨을 사용할 수 있습니다. Babel (바벨) 바벨의 주요역할은 2가지 입니다. 1. 트랜스파일러 바벨은 자바스크립트 트랜스파일러 이며, 이를 실행하면 코드가 구 표준을 준수하는 코드로 변경됩니다. ex) ES6 코드가 동작하지 않는 환경에서 해당 코드를 ES5 코드로 변환하여 사용자에게 전달 2. 폴리필 ( poly ..

코드를 테스트 해야하는 이유가 뭘까요? 함수를 하나 만들고 있다고 가정해봅시다! 매개변수도 사용해 보고 이러쿵 저러쿵 만들어 갑니다. 그 과정속에 함수의 실행 결과를 확인하는 작업이 필수로 포함될 것입니다! 내가 만든 함수가 잘 동작하는지, 다양한 인자가 주어졌을 때 케이스마다 잘 동작하는지 확인해야 하기 때문이죠! 예시입니다! 내가 만든 함수 num(n)을 테스트 해보려고 합니다. 1. num(0)의 동작을 확인 해봅니다. --> 문제 없이 작동하네요! 다른 인자도 전달해봤습니다. 2. num(1)의 동작을 확인 해봅니다. --> 이런... 에러가 발생해서 코드를 수정했습니다! 3. num(1)의 동작을 다시 확인 해봅니다. --> 문제 없이 작동했습니다! 테스트를 종료합니다! 여기서 문제점이 무엇일까..

코딩스타일은 정답이라고 정해진 것은 없지만, 대부분의 개발자들이 선호하는 스타일이 있습니다. 들여쓰기 가로 들여쓰기의 추세!?는 스페이스 2칸입니다. 보통 에디터에서 Tap키 설정을 통해 2칸으로 만들기도 합니다. 새로 들여쓰기는 논리블록 사이 사이 마다 빈 줄을 넣어 가독성을 올려줍니다. 가로길이 가로로 길게 늘어진 코드는 가독성이 좋지 않습니다. 문자열이 길어진다면 여러 줄로 나눠 작성하는 것이 좋습니다. 함수의 위치 다른 함수 안에서 특정 기능을 수행하는 함수를 헬퍼 함수라고 하는데, 여러개의 헬퍼함수와 그 함수들을 사용하는 코드를 정리할 때 코드를 먼저, 함수를 그 다음 선언하는 것이 좋습니다. let num = getNum(); checkNum(num) sumNum() function getNu..