Age of Discovery

let b = 1; function hi () { const a = 1; let b = 100; b++; console.log(a,b); } //console.log(a); console.log(b); hi(); console.log(b); 위 코드를 실행해보고 주석을 해제한 후 왜 에러가 나는지 봐보자. 위 코드를 실행해보니 다음과 같은 결과가 출력됐다. 전역변수에 이미 선언된 변수가 있다하더라고 함수안에서 같은 변수를 새로 선언하고 할당하면 초기화되어 함수안에서만 사용할 수 있는 새로운 변수가 생성된다. 그리하여 console.log(b); hi(); console.log(b); 첫째 콘솔로그와 둘째 콘솔로그는 전역변수에 있는 값이 출력되고 hi() 함수를 실행했을 땐 그 안에서 할당된 변수가 출력되..

JS에서 함수를 선언하는 방법은 두 가지가 있다. function step_1 () {} 위와 같이 선언하는 방법은 함수선언문이고 let step_1 = function () {} 위의 함수 선언은 함수표현식이다. 두 함수 전부 기능은 동일하다. 다만 호이스팅의 영향을 받는지 안받는지의 차이가 있다. 함수 표현식먼저 살펴보자 바로 전 글에서 var와 let의 호이스팅에 대해 알아보았는데 이번 함수표현식에서도 같은 원리가 적용된다. var step_1 = function () { console.log('위르겐') } step_1() let step_2 = function () { console.log('위르겐') } step_2() 위 두 함수는 각각 var와 let으로 함수를 작성했으나 문제 없이 작동된..

자바스크립트는 변수나 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가서 가장 먼저 해석한다. 그게 Hoisting이다. ​ function 함수(){ console.log(이름); var 이름 = 'Klopp'; } 이런 함수를 만들었다고 가정할 때 함수를 실행하면 콘솔에 이름이라는 정의되지않은 변수가 먼저 찍혀야하니 에러가 떠야한다. (원래대로라면) ​ 하지만 에러대신 undefined가 뜬다 ​ 그 이유는 function 함수(){ var 이름; console.log(이름); 이름 = 'Klopp'; } 자바스크립트라는 문법은 호이스팅이 일어나기 때문에 위의 함수처럼 인식을 하고 위에서부터 읽어내려간다. 그럼 var 이름;

이전 글에서 얕은복사와 깊은복사에 대해 간략하게 알아봤는데 이번엔 불변 객체를 만드는 법에 대해서 알아보자 let a = { name: 'ryu', hobbies: ['football', 'piano']} a.name = 'kim' console.log(a) // let a = { name: 'kim', hobbies: ['football', 'piano']} a라는 객체가 있는데 이름을 kim으로 바꿔준 후 다시 a를 출력하면 당연하게도 kim이라는 name을 가지고있는 a객체를 반환한다. 하지만 let a = { name: 'ryu', hobbies: ['football', 'piano']} Object.freeze(a) a.name = 'kim' console.log(a) // let a = { n..

원시형데이터와 참조형데이터에 대해 알아보았다. 이번엔 참조형데이터의 얕은 복사와 깊은 복사에 대해 알아보자 // Object의 얕은 복사 let object = {a:0, b:0, c:0} let object2 = object console.log(object.a, object2.a) // 0, 0 object2.a = 3 console.log(object.a, object2.a) // 3, 3 // 배열의 얕은 복사 const a = [1, 2, 3, 4]; const b = a; b[3] = 3 console.log(a) // 1, 2, 3, 3 console.log(b) // 1, 2, 3, 3 위 코드와 같이 object라는 객체에 데이터를 할당한 다음 object2라는 객체에 object를 할당..

원시자료형과 참조자료형 두 가지 데이터 타입이 존재한다. 원시자료형 기본자료형이라고도 불린다. 단 '하나'의 정보만 가지고 있다. number : 3.141592 string : 'Jurgen’ boolean : true & false undefined : 변수가 정의되지 않았거나 값이 없다. null : 의도적으로 비어있음을 표현하기 위해 null 이라는 것이 들어있다. symbol 참조자료형 참조형은 원시형 데이터의 집합이다. 배열([])과 객체({}), 함수(function(){})가 대표적이다. 동적으로 크기가 변하는 데이터를 보관하기위해 변수가 아닌 다른곳에 데이터를 저장하고 변수에는 그 주소만 할당한다. 배열 – Array : [0,1,2,3,4] 객체 – Object {name : “Hana..

자바스크립트의 undefined와 null은 비슷하지만 다르다. undefined는 undefined라는 자료형을 가지고 있으며 null은 null이라는 자료형을 또 따로 가지고 있다. 그래서 콘솔창에 자료형을 명시해주는 typeof를 사용해보면 undefined의 타입은 undefined라고 나오고 null은 null이라는 자료형이 나와야하는데 쌩뚱맞게 object가 출몰한다. 이건 아직까지 고쳐지지 않고 있는 자바스크립트 초기버전의 버그이다. 정확히는 고칠생각이 없는 버그이다. 그 이유는 JS의 하나의 타입을 바꿔버리면 전 세계 수많은 프로젝트에 오류가 생길 위험성이 있고 더욱 더 웃긴 답변은 이런 자잘한 버그를 고치지 않는 것이 '자바스크립트의 정신'이라고 한다. JS는 정말 간지나는 언어다. 그럼..

프론트엔드 개발자를 목표로 한다면 자바스크립트(이하 JS)를 갈고 닦고 다듬어야한다. JS의 고유한 특성과 다른 언어들이랑은 다른 동작원리까지 현재 [자바스크립트란?]의 카테고리에 시리즈로 정리해보려고 한다. JS는 자바, C언어와는 다르게 '융통성'을 가지고 있다. 개발자들이 좀 더 편하게 사용할 수 있고 타자를 한 글자라도 덜 칠 수 있도록 해주는 언어이다. 변수선언을 예로 들어보자 아래의 코드는 JAVA의 변수선언이다. i라는 변수에 100을 할당해준다. int i=100; let, var, const를 무시하고 극단적으로 비교해보자면 JS는 아래와 같이 i = 100 간단명료하게 사용할 수 있다. (물론 이렇게 사용하는 개발자는 없다.) 또한 자료형을 비교할 때에 특히 고유의 특성이 드러난다. 1..