JavaScript 입문하기

 

웹 서비스를 만든다면, HTML과 CSS만으로 정적인 페이지만을 만들 수 있지만,

요즘처럼 유저들의 상호작용이 중요한 환경에서는 이러한 동작을 가능하게 해주는 것이 바로 JavaScript입니다.

 

JavaScript 언어에 잘 적응하기 위해 필요한 개념 2가지가 있습니다.

바로 변수와 함수인데요!

 

이 개념들은 JavaScript뿐만 아니라 대부분의 프로그래밍 언어에서 가장 기본이 되는 요소입니다.

 

변수

변수는 데이터를 저장하기 위해 이름을 할당받은 메모리 공간입니다.

쉽게 말해, 컴퓨터와 개발자 사이에서 값을 저장하고 참조하기 위해 만든 이름표라고 볼 수 있습니다.

 

let apple = '사과';

 

위의 코드를 예시로 보면,

개발자는 apple이라는 변수명을 선언하고, '사과'라는 문자열 값을 할당한 것입니다.

 

여기서 '='이라는 할당 연산자는 수학에서의 ‘같다’는 의미가 아니라,

오른쪽의 값을 왼쪽 변수에 저장한다는 의미를 가지고 있습니다.

 

함수

프로그래밍에서 함수는 특정한 동작을 수행하도록 정의된 코드 블록입니다.

function countLength(string) {
	return string.length;
}

 

위 코드는 문자열의 길이를 반환하는 함수를 정의한 예시입니다.

각 요소는 다음과 같습니다.

• function : 함수 선언
• countLength : 함수 이름
• (string) : 외부에서 전달받을 값(매개변수)
• return : 함수 실행 결과를 반환하는 키워드
• string.length : 전달받은 문자열의 길이

이 코드를 활용하면 다음과 같이 사용할 수 있습니다.

// countLength 함수에 '사과'를 전달하고 반환된 값을 appleCount 변수에 할당
let appleCount = countLength('사과');
console.log(appleCount); // 2

// countLength 함수에 '바나나'를 전달하고 반환된 값을 bananaCount 변수에 할당
let bananaCount = countLength('바나나');
console.log(bananaCount); // 3


console.log(appleCount + bananaCount); // 5

 

즉, 함수는 반복되는 작업을 재사용할 수 있도록 만들어주는 도구라고 이해할 수 있습니다.

 

여기서 console.log()는 값을 콘솔에 출력해주는 코드로,

개발 과정에서 결과를 확인할 때 자주 사용됩니다.

실습해보기

위의 학습 내용을 바탕으로 구구단을 출력하는 코드를 작성해보았습니다.

let left = 2;
console.log(left * 1);
console.log(left * 2);
console.log(left * 3);
console.log(left * 4);
console.log(left * 5);
console.log(left * 6);
console.log(left * 7);
console.log(left * 8);
console.log(left * 9);

<실행 결과>

 

이렇게 작성하면 동일한 코드가 반복되어 효율적인 코드라고 보기 어렵습니다.

 

그래서 위에서 배운 함수와 반복문을 활용해 코드를 개선해봤습니다.

function gugudan(num) {
  for(let i=1; i<10; i++) {
    console.log(num*i);
  }
}

gugudan(3);

<실행 결과>

 

반복되는 코드를 'gugudan'이라는 함수로 묶고, 반복문을 활용함으로써

훨씬 간결하고 재사용 가능한 코드로 개선할 수 있었습니다.

 

이번 학습을 통해 변수와 함수의 개념을 이해하고,

코드를 보다 효율적으로 작성하는 방법에 대해 알게 되었습니다.

 

앞으로는 다양한 문제를 해결하면서

함수를 적극적으로 활용하고, 더 깔끔한 코드 구조를 만드는 연습을 해보려고 합니다.

---