mystery

객체와 원시타입의 가장 큰 차이점은 원시 타입이 '값 그대로' 저장되고 복사되는 반면에 객체는 '참조에 의해' 저장되고 복사된다는 것입니다. 참조에 의한 값 복사 ( 객체 ) 문자열을 할당한 변수를 복사한 결과입니다. 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..

디버깅은 스크립트의 에러를 검출해 제거하는 일련의 과정을 의미합니다! 모던 브라우저나 호스트 환경 대부분은 개발자 도구안에 디버깅 툴을 구비해 놓았습니다! 디버깅 툴을 사용 하면 디버깅이 쉬워지고 실행 단계별 동작을 코드 단위로 추적할 수 있습니다~ Source 패널 1. 파일 탐색 영역 - 페이지 구성에 쓰인 모든 리소스를 트리 형태로 보여줍니다 2. 코드 에디터 영역 - 1번 영역에서 선택한 파일의 소스 코드를 보여줍니다. 편집이 가능합니다. 3. 디버깅 영역 - 디버깅 관련 기능을 제공합니다. console Esc를 누르거나 console탭에 가면 콘솔 창을 열 수 있습니다. 간단한 코드를 짜고 실행할 수 있습니다. breakpoint breakpoint 란 자바스크립트의 실행이 중단되는 코드 지점..

함수 표현식 함수를 만드는 방법은 2가지 입니다. 함수 선언식( Function Declaration ), 함수 표현식( Function Expression ) 자바스크립트는 함수를 특별한 종류의 '값' 으로 취급합니다 그렇기 때문에 변수에 값을 할당하듯 함수를 할당할 수 있습니다. let hello = function(){ console.log("hello") } hello() // hello 함수는 hello변수에 할당된 '값'이기 때문에 출력이 가능합니다. 함수 코드가 문자형으로 변경되어 출력됩니다. console.log(hello)// ---> ƒ (){ // ---> console.log("hello") // ---> } 함수가 '값' 이기 때문에 변수를 복사해 다른 변수에 할당할 수 있습니다!..

함수선언식 function 키워드, 함수이름, 괄호안에 넣은 매개변수를 차례대로 써서 만든 함수. function hello(){ console.log("hello") } hello() 함수 내부에서 함수 외부의 변수에 접근 및 수정이 가능하다. let msg = "hello" function hello(){ msg = "bye" console.log(msg) } console.log(msg) // "hello" 함수 호출 전 hello() // "bye" 함수 호출 console.log(msg) // "bye" 함수 호출 후 함수 내부에 외부 변수의 이름과 동일한 변수가 선언되어 있다면, 함수에서 외부 변수를 사용할 수 없습니다. let msg = "hello" function hello(){ let ..

do....while do{ console.log("HI!") } while(condition) 조건(condition)의 truthy 여부와 상관없이 본문을 최소 한번은 실행하고 싶을 때 사용합니다. 보통 잘 쓰지는 않는다고 합니다. for for (begin; condition; step) { // 본문(body) } begin은 시작 시 한 번 실행됩니다. condition은 반복바다 확인 할 조건입니다. false가 된 순간 멈춥니다. body는 condition이 truthy이면 실행됩니다. step은 본문(body)실행 후 실행됩니다. for문 구성 요소 생략하기 for문은 구성 요소 생략이 가능합니다. let i = 0 for(; i < 3 ; i++){ // begin을 생략했습니다. 본문..

null 병합 연산자 ( ?? ) null 병합 연산자를 사용하면 여러 피연산자 중 값이 할당되어 있는 변수를 찾을 수 있습니다. let a = null let b = 1 console.log(a ?? b) //1 null 병합 연산자는 왼쪽 피연산자의 값이 null과 undefined가 아니면(값이 할당되어 있으면) a를 리턴하고 그 외의 경우에는 b를 리턴합니다 let a = null; let b = 2 let c = null; console.log(a ?? b ?? c) //2 왼쪽부터 차례대로 a ?? b의 결과는 a가 null이므로 b가 남고 b ?? c의 결과는 b에 값이 할당되어 있으므로 b가 리턴됩니다. null 병합 연산자( ?? )와 OR 연산자( || )의 차이점 - null 병합 연..