반복문이란?같은 행동을 계속 반복하는 것은 처음에는 쉽지만 나중에 가면 어려워집니다. 인간은 똑같은 행동을 계속 따라하기만 하면 미쳐버릴수도 있기 때문입니다. 하지만 반복하는 것을 아무렇지 않게, 아주 빠르게, 그리고 누구보다도 잘해내는 것이 있습니다. 바로 컴퓨터입니다. 반복문이란 어떤 구문이 계속해서 반복되는 것이죠. 컴퓨터는 반복문을 누구보다도 더 잘 수행합니다. 오늘은 while과 for라는 두가지 반복문에 대해서 알아보도록 하겠습니다. while 반복문while (condition) { statements } while문을 간단히 표현하면 소스코드와 같습니다. 조건(condition)이 참일 때 구문을 계속 수행하고, 조건이 거짓일 때는 아무일도 일어나지 않습니다. 그리고 반복문에는 위에 소스코..
조건문이란 무엇일까요?조건이 참이 올 때, 구문을 실행시키는 것이 조건문입니다. 어떤 조건을 쓰든지 간에 값은 두 개밖에 올 수 없습니다. 바로 참과 거짓입니다. 가령 1 > 2라고 한다면 조건이 거짓이 되는 것이죠. 그리고 2 > 1일때는 참이 됩니다. if(2>1){ console.log("2는 1보다 큽니다."); }; if(1>2){ console.log("1은 2보다 큽니다."); }; 두개의 조건문입니다. 둘 중에서 어느 구문이 실행될까요? 콘솔을 확인하시면 "2는 1보다 큽니다."라는 적혀있을 겁니다. 조건이 참인 위의 조건문만 실행된 것이죠. if는 조건이 참일 때, 구문을 실행시킵니다.else는 무엇일까요?if문과 함께 else를 쓸 수 있습니다. else는 if의 조건이 거짓이 되었을 ..
확산연산자란?es6에서 추가된 문법으로 ...을 사용해서 배열의 나머지 값들을 받아오거나 편하게 확장시킬 수도 있습니다. 또 매개변수에도 활용가능합니다. let arr = [1, 2, 3, 4, 5]; console.log(...arr); 우선 arr이라는 배열 안에는 1~5까지의 숫자가 들어있습니다. 그리고 확산연사자를 통해서 콘솔에 값을 확인하면 어떻게 될까요? ...arr은 1 2 3 4 5라는 안 쪽의 값을 리턴합니다. 그리고 [...arr]처럼 배열리터럴을 하고 확산연산자를 쓰면 arr이라는 배열과 값이 같은 배열을 만들어 냅니다. 기본적으로 이 사실을 알면 쉽게 활용할 수 있습니다.배열에서의 활용위에서도 언급했지만 배열리터럴 안에서 확산연산자 + 배열명을 사용하면 쉽게 값이 똑같은 배열을 만들..
저번 포스팅에서는 객체의 구조분해를 다뤘습니다. 마지막 부분에는 객체와 배열을 혼합한 구조에서 구조분해는 어떻게 할 것인지도 다루니 혹시 객체 구조분해를 모르신다면 보고 오시는 것을 추천드립니다. 자바스크립트 객체의 구조분해배열 구조분해 하기 let arr = ["first", "second", "third"]; let [first, second, third] = arr; first와 second, third의 값을 확인하시면 각각 "first"와 "second", "third"의 값이 담겨 있는 것을 볼 수 있습니다. 객체를 구조분해 할 땐 객체 리터럴을 사용했지만 배열을 구조분해 할 땐 배열 리터럴을 사용합니다. 할당 연산자 왼쪽에 배열 리터럴이 오고, 할당연산자 오른쪽에 오는 값은 null이나 un..
es6에서의 객체 문법 추가function func(name, content){ return { name: name, content: content } }; 위의 함수는 함수의 매개변수인 name과 content를 받아서 name과 content라는 같은 이름의 프로퍼티를 가진 객체를 리턴합니다. es6에서는 매개변수 이름과 객체의 프로퍼티가 같을 시에 중복을 제거할 수 있도록 수정되었습니다. function func(name, content){ return { name, content } }; name과 content가 중복이 사라지고 한 번 적은게 보이시나요? { name : name, content : content }가 {name, content}로 변했다는 것을 미리 알아두시면 객체의 구조분해를..
배열이란? 배열도 객체와 같이 여러가지 값들을 저장할 수 있습니다. 객체와 다른점은 순서가 있다는 것입니다. 네! 배열은 바로 순서가 있는 객체입니다. 그리고 많은 값들을 한 곳에 저장할 때도 아주 유용하게 쓰일 수 있습니다. 배열 선언하기 let arr = ["컴퓨터", "티비", "냉장고"]; 배열은 위와 같은 형태로 선언합니다. 대괄호 사이에 값을 적고, 값 끼리는 ,로 구분합니다. 지금은 문자열로만 채웠지만 숫자, 또 다른 배열, 객체 등 모든 값들을 넣을 수 있습니다. let arr2 = new Array("컴퓨터", "티비", "냉장고"); arr2처럼 선언하는 방법도 있습니다. 둘 다 배열을 만들지만 첫 번째 방법이 더 쉽기 때문에 많이 쓰입니다. 첫 번째 방식처럼 직접 값을 넣는 방법을 리..
저번 포스팅에서 객체에 키(key)로는 문자열만 들어갈 수 있다고 말했습니다. 하지만 es6에 심볼이라는 원시 타입이 생기면서 객체의 키로 심볼도 들어갈 수 있게 되었습니다.객체의 키(key)로 심볼(symbol) 넣기 const S = Symbol("this is symbol"); 심볼을 만드는 방법은 Symbol() 하나밖에 없습니다. 이제 객체에 다른 키-값들과 함께 넣어보겠습니다. const obj = { name: "lemon", S: "not symbol", [S]: "symbol" }; obj라는 객체에 세 개의 프로퍼티를 주었습니다. 그냥 S라고 적힌 key는 문자열이고, [S]라고 적혀 있는게 위에서 생성한 심볼입니다. 괄호를 하지 않으면 당연하게도 문자열로 인식해서 우리가 생성한 심볼이..
원시 타입을 배웠으니 이제는 객체(참조 타입)를 배울 차례입니다. 원시 타입과 어떤 점들이 다를까 생각하면서 읽다보면 쉽게 이해하실 수 있을겁니다.객체란? 객체는 영어로 object라고 합니다. 뜻을 찾아보면 물건, 물체라고 적혀있죠. 가령 이 글을 읽고 계시다면 휴대폰이나 컴퓨터를 이용하고 있겠죠? 휴대폰을 예로 들어 보겠습니다. 휴대폰은 물건입니다. 휴대폰의 색은 흰색, 휴대폰의 길이는 15cm, 제조사는 삼성, 홈버튼을 누르면 기본화면으로 돌아가는 등 하나의 물체 안에 여러가지 속성과 기능이 있습니다. 자바스크립트의 객체도 변수(휴대폰) 안에 속성(색깔, 길이, 제조사)과 기능(홈버튼을 누르면 기본화면으로 돌아감)들이 들어 있는 것입니다. 객체 선언하기 객체는 {}(중괄호)를 적고 그 안에 키라는 ..
저번 포스팅에는 자바스크립트의 원시 타입인 숫자와 문자 그리고 불린에 대해서 배웠습니다. 오늘은 undefined와 null 그리고 es6를 통해 새롭게 추가된 심볼을 배워보도록 하겠습니다. 복습을 원하시면 아래 링크를 클릭해주세요. 자바스크립트의 데이터 타입 - 원시타입 포스팅 보기 null과 undefinednull 타입에서는 null이라는 값만 가지고 있고, undefined 타입에서는 undefined라는 값만 가지고 있습니다. 왜 이런 타입이 있는지 먼저 생각해보셔야 합니다. 변수라는 공간에 무언인가 담을 때 항상 바로 값이 존재하지는 않을 것입니다. 일단은 변수를 선언하고 나중에 값을 담는 일도 있고, 아예 값이 존재하지 않는 다는 것을 명시해야할 상황도 있을 것입니다. 그런 상황들에서 사용하..
저번 시간까지 변수에 대해서 배웠습니다. 오늘부터는 변수에 어떤 값들이 들어갈 수 있는 지에 대해서 알아볼 시간입니다. 자바스크립트에서 값으로 들어갈 수 있는 데이터 타입은 두개로 나뉘어 집니다. 바로 원시 타입과 객체(참조 타입)입니다. 원시 타입 이란? 원시 타입이란 말이 어려울 수도 있습니다만 기본 타입이라고 간단하게 생각하면 됩니다. 원시 타입의 특징 중의 하나는 불변성(immutable)입니다. 이 부분에 대해서 의문이 있을수도 있을 것이라고 생각합니다. 저번시간에 배운 const라면 값을 수정하는데 에러가 떳지만 let이나 var의 경우엔 undefined에서 문자를 갖게 되기고 했고, 숫자가 되기도 했으니까요. 하지만 이런 수정은 변수에 다른 값을 대입하는 것이었을 뿐 기존의 값을 변경하는 ..