📘 2.4.1 기본 할당 (=) - 값을 상자에 넣어주는 정리 도우미
안녕하세요, 여러분. 지금까지 우리는 변수라는 상자를 만드는 방법과 여러 가지 종류의 정보들에 대해 배워왔어요. 이제는 그 상자 안에 물건을 넣고, 필요할 때마다 다른 물건으로 바꾸는 방법을 자세히 알아볼 시간이에요. 바로 할당 도우미 =에 대한 이야기랍니다.
여러분, 집에서 정리정돈을 할 때를 생각해보세요. "이 연필은 연필통에 넣고, 이 책은 책장에 넣어줘"라고 하면서 물건을 제자리에 넣잖아요? = 도우미가 바로 그런 일을 하는 똑똑한 친구예요.
🧠 새로운 단어들과 친해지기
정리 도우미 =와 관련된 중요한 단어들을 쉽게 알아보아요.
| 단어 | 쉬운 설명 |
|---|---|
| 정리 도우미 (=) | 오른쪽에 있는 것을 왼쪽 상자에 넣어주는 똑똑한 도우미예요 |
| 왼쪽 | = 기호의 왼쪽에 있는 상자를 말해요 |
| 오른쪽 | = 기호의 오른쪽에 있는 물건이나 계산을 말해요 |
| 연결 정리 | 여러 상자에 같은 물건을 한 번에 넣어주는 특별한 방법이에요 |
정리 도우미 =는 수학에서 사용하는 "같다"라는 뜻의 등호와 비슷하게 생겼지만, 완전히 다른 일을 해요. 수학에서는 "양쪽이 같다"는 뜻이지만, 코딩에서는 "오른쪽 것을 왼쪽에 넣어라"는 명령이랍니다.
✨ 정리 도우미의 특별한 능력
정리 도우미 =는 자바스크립트에서 가장 기본적이면서도 중요한 친구 중 하나예요. 이 친구가 없다면 우리는 상자에 물건을 넣을 수 없고, 프로그램에서 정보를 다룰 수도 없을 거예요.
정리 도우미의 가장 중요한 특징은 방향이 정해져 있다는 거예요. 물건은 항상 오른쪽에서 왼쪽으로 이동해요. 마치 물이 높은 곳에서 낮은 곳으로 흐르는 것처럼, 정보도 오른쪽의 값이 왼쪽의 상자로 이동하는 거죠. 이 과정에서 오른쪽에 복잡한 계산이 있다면, 그 계산을 먼저 완료한 후에 결과를 왼쪽 상자에 넣어줘요.
또 하나의 중요한 특징은 새 물건으로 바꿔치기예요. 이미 물건이 들어있는 상자에 새로운 물건을 넣으면, 기존 물건은 사라지고 새로운 물건만 남게 돼요. 이는 마치 상자에서 기존 물건을 꺼내고 새로운 물건을 넣는 것과 같아요.
재미있는 비유: 정리함과 정리 도우미
정리 도우미를 더 쉽게 이해하기 위해 '정리함과 정리 도우미'에 비유해보아요.
우리 집에는 특별한 정리 도우미가 살고 있어요. 이 도우미는 정말 체계적인 성격을 가지고 있어서, 항상 정해진 규칙에 따라 물건을 정리해요. 그 규칙은 바로 "오른쪽에 있는 물건을 왼쪽 정리함에 넣기"예요.
정리 도우미에게 연필통 = 연필이라고 말하면, 도우미는 먼저 오른쪽에 있는 연필을 확인하고, 그 연필을 왼쪽에 있는 연필통에 넣어줘요. 만약 그 연필통에 이미 지우개가 들어있었다면, 지우개를 꺼내고 연필을 넣어주죠.
이 정리 도우미는 계산도 할 줄 알아요. 총점 = 수학점수 + 영어점수라고 말하면, 먼저 수학점수와 영어점수를 더한 다음, 그 결과를 총점이라는 상자에 넣어줘요. 심지어 여러 상자에 같은 물건을 넣어달라고 하면 그것도 가능해요!
이 도우미 덕분에 우리는 언제나 깔끔하고 체계적으로 물건들을 관리할 수 있어요. 마치 스마트폰의 앱이 각각의 폴더에 정리되어 있는 것처럼요.
🎯 왜 정리 도우미가 필요할까요?
정리 도우미는 프로그래밍에서 왜 이렇게 중요할까요? 여러 가지 좋은 이유들이 있어요.
첫 번째는 정보 저장하기의 기본 기능이에요. 사용자가 입력한 정보, 계산 결과, 게임 점수 등 모든 정보를 상자에 저장할 때 정리 도우미를 사용해요. 이렇게 하면 나중에 그 정보를 다시 사용할 수 있게 되죠.
두 번째는 상태 바꾸기 역할이에요. 게임에서 플레이어의 체력이 변하거나, 온라인 쇼핑몰에서 장바구니 수량이 변할 때도 정리 도우미가 필요해요. 프로그램의 상태를 새롭게 만드는 모든 순간에 정리 도우미가 사용되는 거예요.
세 번째는 계산 결과 보관하기예요. 복잡한 계산의 결과를 상자에 저장해서 여러 번 재사용할 수 있게 해줘요. 매번 같은 계산을 반복하는 대신, 한 번 계산한 결과를 저장해두고 필요할 때마다 꺼내 쓸 수 있는 거죠.
⚙️ 정리 도우미와 대화하는 방법 배우기
정리 도우미의 기본 사용법은 정말 간단해요.
상자이름 = 넣을것;이 간단한 방법 안에는 여러 가지 패턴이 있어요.
기본 정리:
상자를 만들면서 동시에 물건을 넣거나, 이미 있는 상자에 새로운 물건을 넣는 방법이에요.
계산 결과 정리:
오른쪽에 계산이나 특별한 작업이 있을 수 있어요. 이 경우 먼저 계산이나 작업이 끝난 후, 그 결과가 상자에 저장돼요.
연결 정리:
여러 상자에 같은 물건을 동시에 넣는 특별한 방법도 있어요. 이는 여러 상자를 같은 값으로 만들 때 특히 유용해요.
🧪 직접 해보면서 배우기
이제 실제로 정리 도우미가 어떻게 일하는지 함께 실험해볼게요!
🔹 첫 번째 실험: 기본 정리와 물건의 이동 확인하기
첫 번째 실험에서는 정리 도우미의 가장 기본적인 동작을 확인해보아요.
// 학생 정보를 상자에 저장하는 기본적인 정리
let studentName = "김철수"; // "김철수"를 studentName 상자에 넣기
let studentAge = 12; // 12를 studentAge 상자에 넣기
let isHonorStudent = true; // true를 isHonorStudent 상자에 넣기
// 저장된 값들을 확인해봐요
console.log("학생 이름:", studentName); // "김철수"
console.log("학생 나이:", studentAge); // 12
console.log("우등생 여부:", isHonorStudent); // true
// 기존 상자의 물건을 새로운 물건으로 바꿔봐요
studentAge = 13; // 생일이 지나서 나이 증가
studentName = "김영희"; // 다른 학생으로 변경
console.log("변경 후 이름:", studentName); // "김영희"
console.log("변경 후 나이:", studentAge); // 13
// 계산 결과를 상자에 넣어보기
let mathScore = 85; // 수학 점수를 mathScore 상자에 넣기
let englishScore = 92; // 영어 점수를 englishScore 상자에 넣기
let totalScore = mathScore + englishScore; // 계산 후 totalScore 상자에 넣기
console.log("수학 점수:", mathScore); // 85
console.log("영어 점수:", englishScore); // 92
console.log("총점:", totalScore); // 177 (85 + 92)이 과정에서 우리는 정리 도우미의 핵심 동작을 확인할 수 있어요. 상자에 처음 물건을 저장할 때부터 시작해서, 기존 물건을 새로운 물건으로 교체하는 과정, 그리고 계산 결과를 상자에 저장하는 모든 과정에서 정리 도우미가 오른쪽의 값을 왼쪽 상자로 전달하는 역할을 담당해요.
🔹 두 번째 실험: 게임 상황에서 값이 계속 바뀌는 모습 보기
두 번째 실험에서는 게임 상황을 통해 값이 지속적으로 변화하는 모습을 살펴보아요.
// 게임 플레이어의 처음 상태 설정하기
let playerName = "용사123"; // 플레이어 이름을 playerName 상자에 넣기
let playerLevel = 1; // 레벨 1을 playerLevel 상자에 넣기
let playerHealth = 100; // 체력 100을 playerHealth 상자에 넣기
let playerExperience = 0; // 경험치 0을 playerExperience 상자에 넣기
let playerGold = 0; // 골드 0을 playerGold 상자에 넣기
console.log("게임 시작!");
console.log("플레이어:", playerName);
console.log("레벨:", playerLevel);
console.log("체력:", playerHealth);
// 첫 번째 몬스터와의 전투 결과 반영하기
console.log("첫 번째 몬스터를 물리쳤어요!");
playerExperience = playerExperience + 15; // 기존 경험치에 15 더해서 다시 넣기
playerGold = playerGold + 10; // 기존 골드에 10 더해서 다시 넣기
playerHealth = playerHealth - 20; // 기존 체력에서 20 빼서 다시 넣기
console.log("전투 후 상태:");
console.log("경험치:", playerExperience); // 15 (0 + 15)
console.log("골드:", playerGold); // 10 (0 + 10)
console.log("체력:", playerHealth); // 80 (100 - 20)
// 물약을 사용해서 체력 회복하기
let potionHealing = 30; // 물약 회복량을 potionHealing 상자에 넣기
playerHealth = playerHealth + potionHealing; // 체력 회복시키기
console.log("물약 사용 후 체력:", playerHealth); // 110 (80 + 30, 최대치 초과도 가능)
// 두 번째 몬스터와 전투하기
console.log("두 번째 몬스터와 전투!");
playerExperience = playerExperience + 20; // 경험치 20 더 추가
playerGold = playerGold + 15; // 골드 15 더 추가
playerHealth = playerHealth - 30; // 체력 30 감소
console.log("두 번째 전투 후:");
console.log("경험치:", playerExperience); // 35 (15 + 20)
console.log("골드:", playerGold); // 25 (10 + 15)
console.log("체력:", playerHealth); // 80 (110 - 30)이 실험을 통해 우리는 프로그램에서 상태가 어떻게 변화하는지 볼 수 있어요. 각각의 정리 작업은 게임 내 이벤트를 반영하며, 플레이어의 상태를 실시간으로 업데이트해요. 마치 실제 게임에서 경험치가 쌓이고 레벨이 오르는 것처럼, 상자들이 새로운 값으로 갱신되는 과정을 확인할 수 있어요.
🔹 세 번째 실험: 여러 상자를 동시에 관리하는 연결 정리
세 번째 실험에서는 여러 상자를 동시에 관리하는 방법을 알아보아요.
// 연결 정리로 여러 상자를 동시에 같은 값으로 만들기
let team1Score, team2Score, team3Score; // 세 개의 상자 만들기
team1Score = team2Score = team3Score = 0; // 모든 팀 점수를 0으로 시작
console.log("게임 시작 점수:");
console.log("팀1:", team1Score); // 0
console.log("팀2:", team2Score); // 0
console.log("팀3:", team3Score); // 0
// 1라운드 결과 반영하기
team1Score = team1Score + 15; // 팀1: 기존 점수에 15점 추가
team2Score = team2Score + 20; // 팀2: 기존 점수에 20점 추가
team3Score = team3Score + 10; // 팀3: 기존 점수에 10점 추가
console.log("1라운드 후:");
console.log("팀1:", team1Score); // 15
console.log("팀2:", team2Score); // 20
console.log("팀3:", team3Score); // 10
// 평균 점수 계산하기
let totalScore = team1Score + team2Score + team3Score; // 총 점수 계산
let averageScore = totalScore / 3; // 평균 점수 계산
console.log("총 점수:", totalScore); // 45 (15 + 20 + 10)
console.log("평균 점수:", averageScore); // 15 (45 / 3)
// 2라운드에서 보너스 점수 주기
let bonusPoints = 5; // 보너스 점수 설정
team1Score = team1Score + bonusPoints; // 팀1에 보너스 점수 추가
team2Score = team2Score + bonusPoints; // 팀2에 보너스 점수 추가
team3Score = team3Score + bonusPoints; // 팀3에 보너스 점수 추가
console.log("보너스 적용 후:");
console.log("팀1:", team1Score); // 20 (15 + 5)
console.log("팀2:", team2Score); // 25 (20 + 5)
console.log("팀3:", team3Score); // 15 (10 + 5)
// 우승팀 결정하기 (단순 비교)
let winningScore = team2Score; // 현재 가장 높은 점수 저장
let winningTeam = "팀2"; // 우승팀 이름 저장
console.log("우승팀:", winningTeam); // "팀2"
console.log("우승 점수:", winningScore); // 25이 실험에서는 연결 정리의 편리함과 기본적인 계산을 통한 정리를 볼 수 있어요. 연결 정리는 여러 상자를 같은 값으로 만들 때 정말 유용해요.
🧚♀️ 이야기로 다시 배우기: 학교의 물건 정리 수업
지금까지 배운 내용을 조용한 이야기로 다시 정리해볼게요.
우리 학교에서는 매일 아침 "물건 정리 수업"이 있어요. 이 수업의 담당 선생님은 정말 체계적인 정리 선생님이에요.
정리 수업의 기본 규칙은 상자 = 물건 형태예요. 이 규칙을 따르면 선생님이 나타나서 오른쪽에 있는 물건을 왼쪽 상자에 넣어줘요. 하지만 이 선생님은 정말 꼼꼼해서, 항상 정해진 순서를 따라요.
먼저 오른쪽 물건을 확인해요. 만약 그곳에 계산이 필요한 것이 있다면, 예를 들어 총점 = 수학점수 + 영어점수라면, 먼저 수학점수와 영어점수를 더해요. 그 다음 계산 결과를 왼쪽 상자에 넣어줘요.
만약 상자에 이미 다른 물건이 들어있다면, 기존 물건을 꺼내고 새로운 물건을 넣어줘요. 마치 옷장에서 여름옷을 꺼내고 겨울옷을 넣는 것처럼 말이에요.
가장 신기한 건 연결 정리 수업이에요. 상자A = 상자B = 상자C = 사탕이라고 하면, 선생님이 세 개의 상자에 모두 똑같은 사탕을 넣어줘요. 이때는 오른쪽부터 차례대로 정리하는 규칙을 따라요.
학생들은 이 수업 덕분에 정확하고 체계적인 정리 방법을 배웠어요. 그리고 이 방법이 모든 프로그래밍의 기초가 된다는 것도 알게 되었답니다.
🧠 자주 하는 실수와 주의할 점
친구들이 정리 도우미를 사용할 때 자주 하는 실수들을 살펴보고, 어떻게 피할 수 있는지 알아보아요.
❌ 실수 1: 정리(=)와 비교(===)를 헷갈리기
let score = 85; // 점수를 score 상자에 넣기
// ❌ 잘못된 예시: 정리와 비교를 헷갈림
// (이런 코드는 아직 배우지 않았으니 참고만 하세요)
score = 90; // score에 90을 넣기 (정리)
console.log("현재 점수:", score); // 90 출력
// 나중에 비교할 때는 ===를 사용한다는 것을 기억하세요!정리(=)는 값을 넣는 것이고, 비교(===)는 값을 비교하는 것임을 기억해야 해요.
❌ 실수 2: 연결 정리에서 상자 선언을 빼먹기
// ❌ 잘못된 예시: 상자 선언 없이 연결 정리
// a = b = c = 10; // b와 c가 전체 공간 상자가 됨!
// ✅ 올바른 예시: 상자 먼저 만든 후 연결 정리
let x, y, z; // 상자 먼저 만들기
x = y = z = 10; // 안전한 연결 정리상자를 만들지 않고 정리하면 의도하지 않은 전체 공간 상자가 생성되어 나중에 문제를 찾기 어려워질 수 있어요.
❌ 실수 3: 고정값(const)에 다시 넣기를 시도하기
const PI = 3.14159; // 고정값으로 상자 만들기
// ❌ 잘못된 예시: 고정값에 다시 넣기 시도
// PI = 3.14; // 오류가 발생해요!
// ✅ 올바른 방법: let 사용하거나 새 상자 만들기
let approximatePI = 3.14; // 새로운 상자 만들기const로 만든 상자는 다시 넣기를 할 수 없다는 점을 항상 기억해야 해요.
마음을 담아 준비한 연습 문제들
여러분이 지금까지 배운 것들을 차분히 정리해볼 수 있는 시간을 마련했어요. 이 문제들은 마치 오후의 따뜻한 차 한 잔처럼, 여러분의 이해를 조용히 깊게 해줄 거예요.
문제를 풀면서 조급해하지 마세요. 컴퓨터 언어도 결국 우리가 일상에서 쓰는 말처럼, 차근차근 익혀가면 돼요. 여러분 각자의 속도에 맞춰 천천히 해보세요.
Ex1) 나의 정보를 상자에 저장하고 보여주기
// 개인 정보를 상자에 저장해보기
let myName = "이지수"; // 내 이름을 myName 상자에 넣기
let myAge = 11; // 내 나이를 myAge 상자에 넣기
let mySubject = "과학"; // 좋아하는 과목을 mySubject 상자에 넣기
let isStudent = true; // 학생 여부를 isStudent 상자에 넣기
// 저장된 정보를 출력해보기
console.log("이름:", myName); // "이름: 이지수" 출력
console.log("나이:", myAge + "세"); // "나이: 11세" 출력
console.log("좋아하는 과목:", mySubject); // "좋아하는 과목: 과학" 출력
console.log("학생인가요?:", isStudent); // "학생인가요?: true" 출력Ex2) 계산 결과를 상자에 넣는 연습하기
// 직사각형의 가로와 세로 길이
let width = 8; // 가로 길이를 width 상자에 넣기
let height = 5; // 세로 길이를 height 상자에 넣기
// 계산 결과를 상자에 넣기
let area = width * height; // 넓이 계산해서 area 상자에 넣기
let perimeter = (width + height) * 2; // 둘레 계산해서 perimeter 상자에 넣기
console.log("직사각형 정보:");
console.log("가로:", width + "cm"); // "가로: 8cm" 출력
console.log("세로:", height + "cm"); // "세로: 5cm" 출력
console.log("넓이:", area + "cm²"); // "넓이: 40cm²" 출력
console.log("둘레:", perimeter + "cm"); // "둘레: 26cm" 출력🔄 복습 문제: 이전 단원들과 2.3.1~2.3.3 내용 복습하기
이전에 배운 내용들을 잊지 않도록 복습해볼게요!
복습 문제 1) 변수와 데이터 타입 (1단원 복습)
// 1단원에서 배운 변수 만들기와 데이터 타입을 복습해보세요!
// let과 const로 다양한 상자 만들기
let bookPrice = 12000; // 책 가격 (바뀔 수 있음)
const storeHours = 9; // 영업시간 (바뀌지 않음)
let bookTitle = "자바스크립트 입문"; // 책 제목
let isAvailable = true; // 재고 있는지
console.log("책 가격:", bookPrice + "원");
console.log("영업시간:", storeHours + "시간");
console.log("책 제목:", bookTitle);
console.log("재고 있음:", isAvailable);
// 데이터 타입 확인하기
console.log("가격 타입:", typeof bookPrice); // number
console.log("제목 타입:", typeof bookTitle); // string
console.log("재고여부 타입:", typeof isAvailable); // boolean복습 문제 2) 계산과 비교 연산자 (2.1, 2.2단원 복습)
// 2.1단원: 계산하기 복습
let price1 = 5000;
let price2 = 3000;
console.log("=== 계산 연산자 복습 ===");
console.log("총 가격:", price1 + price2); // 8000
console.log("가격 차이:", price1 - price2); // 2000
console.log("할인 후:", price1 * 0.8); // 4000
console.log("평균 가격:", (price1 + price2) / 2); // 4000
// 2.2단원: 비교 연산자 복습
let myMoney = 6000;
let itemPrice = 5000;
console.log("\n=== 비교 연산자 복습 ===");
console.log("돈이 충분한가:", myMoney >= itemPrice); // true
console.log("돈이 정확히 맞나:", myMoney === itemPrice); // false
console.log("돈이 부족한가:", myMoney < itemPrice); // false
console.log("돈이 더 많나:", myMoney > itemPrice); // true복습 문제 3) 논리 연산자 (2.3.1~2.3.3단원 복습)
// 방금 전에 배운 &&, ||, ! 연산자 복습하기
let hasCard = true; // 카드 있나요?
let hasEnoughMoney = false; // 돈이 충분한가요?
let storeOpen = true; // 가게 열었나요?
console.log("=== 논리 연산자 복습 ===");
// && 검사관: 모든 조건이 맞아야 성공
let canPayWithCard = hasCard && hasEnoughMoney; // 카드로 결제 가능?
console.log("카드 결제 가능:", canPayWithCard); // false (돈이 부족해서)
// || 검사관: 하나라도 맞으면 성공
let canEnterStore = hasCard || storeOpen; // 가게에 들어갈 수 있나?
console.log("가게 입장 가능:", canEnterStore); // true (가게가 열어서)
// ! 검사관: 반대로 바꿔주기
let needsCash = !hasCard; // 현금이 필요한가?
let storeClosed = !storeOpen; // 가게가 닫혔나?
console.log("현금 필요:", needsCash); // false (카드가 있어서)
console.log("가게 닫힘:", storeClosed); // false (가게가 열어서)
// 복합 조건 만들기 (할당과 함께 사용)
let shoppingResult = hasCard && hasEnoughMoney && storeOpen; // 쇼핑 가능?
let problemExists = !hasCard || !hasEnoughMoney || !storeOpen; // 문제 있나?
console.log("쇼핑 가능:", shoppingResult); // false
console.log("문제 있음:", problemExists); // true (돈이 부족해서)설명:
=할당 연산자로 계산이나 논리 연산의 결과를 변수에 저장할 수 있어요- 논리 연산자들(&&, ||, !)과 할당 연산자를 조합하면 복잡한 조건도 깔끔하게 처리할 수 있어요
- 할당(=)은 항상 오른쪽 계산을 먼저 완료한 후 왼쪽 변수에 저장한다는 것을 기억하세요!
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| = 연산자의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 연쇄 할당 방법 | ✅ |
| 할당과 비교의 차이 | ✅ |
| const 주의사항 | ✅ |
| 실전 예제 이해 | ✅ |
| 이전 단원들 복습 완료 | ✅ |
| 논리 연산자와 할당의 조합 | ✅ |
📂 마무리 정보
오늘 배운 2.4.1 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요?
지금까지 정리 도우미 =의 모든 특징과 활용법을 자세히 알아보았어요. 이 도우미는 자바스크립트뿐만 아니라 모든 프로그래밍 언어에서 가장 기본이 되는 친구예요. 값의 저장과 변경이라는 단순해 보이는 기능이지만, 프로그램의 상태를 관리하고 정보를 처리하는 데 있어서는 없어서는 안 될 중요한 도구랍니다!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'2. 계산하고 비교하기 (연산자) > 2.4 상자에 값 넣기 (할당 연산자)' 카테고리의 다른 글
| 2.4.2 계산해서 넣기 (+=, -=, *=, /=) - 한 번에 계산하고 저장하는 똑똑한 계산 도우미들 (0) | 2025.06.29 |
|---|